js의 변수 승격 메커니즘에 대한 자세한 소개

변수 승격

JavaScript에는 var로 선언된 변수와 function으로 선언된 변수라는 두 가지 유형의 변수 승격이 있습니다.

var로 선언된 변수

먼저 다음 코드를 살펴보겠습니다. a

Code 1

console.log(a);

var a;

의 값은 무엇입니까? 이전 프로그래밍 언어의 아이디어에 따르면 코드는 위에서 아래로 실행됩니다. . 이에 따르면 실행이 두 번째 줄에 도달하면 변수 a가 정의되지 않았기 때문에 오류가 보고된다는 아이디어입니다. 따라서 오류 a는 정의되지 않습니다

그러나 실제로 대답은 정의되지 않습니다

좋습니다. 다음 코드를 살펴보겠습니다.

var a;
console.log(a);

이 두 코드가 동일하므로 var a가 있는지 여부는 중요하지 않습니다. 정의되지 않은 변수가 승격되는 듯한 착각을 불러일으키기 때문에 3

Code 3

console.log(a);

코드를 작성했습니다. 드디어 오류가 발생했습니다. 이는 JavaScript 코드가 위에서 아래로 실행되지 않는다는 것을 증명합니다. 적어도 표면적으로는 이렇게 보입니다.

그럼 코드 4를 다시 살펴보겠습니다

코드 4

console.log(a);
var a = 2;

변수가 승격되었기 때문에 답은 2인데 사실 아직 정의되지 않은 상태인데 왜일까요?

이때 구문 분석, 코드 생성 등 지저분한 작업을 담당하는 컴파일러에게 물어봐야 합니다.

컴파일러는 var a = 2;를 발견하면 이를 var a; 및 a = 2라는 두 개의 명령문으로 처리합니다. 첫 번째 명령문은 컴파일 단계에서 작성되고 두 번째 명령문은 실행 단계를 기다립니다.

즉, 위의 코드는 다음 코드가 됩니다

var a;
console.log(a);
a = 2;

그래서 정의되지 않은 상태가 됩니다

자, 이 코드를 살펴보겠습니다 5

코드 5

a = 2;
var a;
console.log(a);

제 생각에는 이제 저는 이 코드의 실제 실행 순서와 답을 알고 있습니다. 예, 답은 2이지만 제가 말하고 싶은 것은 라인 2를 주석 처리하는 것입니다. 답은 여전히 ​​2이지만 이것은 아무 것도 아닙니다. 엄격 모드와 비엄격 모드의 차이입니다. 비엄격 모드에서는 개발자가 변수 선언에 키워드를 사용할 수 없지만 엄격 모드에서는 이것이 불가능하며 오류가 보고됩니다. .

함수로 선언된 변수

var와 마찬가지로 함수로 선언된 변수는 계속 승격됩니다.

log(5);

function log(mes){
  console.log(mes)
}

변수 승격에 대한 이전 이해에 따르면 이 코드의 실제 순서는 다음과 같습니다.

function log(mes){
  console.log(mes)
}

log(5);

아주 좋아요, 매우 정확합니다. 그러면 다음 코드를 보세요

log(5);

var log = function(mes){
  console.log(mes)
}

오류를 보고하지만 로그는 그렇지 않습니다. 여기에서 이러한 종류의 함수 표현식은 승격되지 않고 함수 선언만 승격되는 것을 볼 수 있습니다. 앞에 console.log(log) 코드 줄을 추가하면 undefound가 먼저 출력됩니다.

여기서 실제 순서는

var log;
log(); //这时候只是声明了log这个变量，并不是函数，却用函数的方法调用它，所以会报错，说这不是一个函数。
log = function(mes){
  console.log(mes)
}

함수에서 변수를 선언하려면 var를 사용하세요

var로 선언된 변수가 승격된다는 것은 알고 있지만 어느 정도까지 승격될지는 알 수 없습니다.

그 전에 코드를 살펴보겠습니다

var a = 4;

function foo(){
  var a = 5;
  console.log(a);

}
foo();

console.log(a)

답은 5,4입니다. 먼저 5를 출력한 다음 4를 출력합니다.

var로 선언된 변수는 함수 범위를 가지므로 in foo는 외부 foo와 관계가 없습니다. 이것이 바로 제가 원하는 상황입니다.

코드를 다시 변경하세요

function foo(){
  a = 5
  console.log(a);
  var a;
}
foo();

console.log(a)

답은 5, a는 정의되지 않았습니다

코드의 네 번째 줄은 5를 출력하고, 아홉 번째 줄은 오류를 보고합니다.

이 경우 변수 승격은 변수가 있는 범위의 최상위로만 승격되며 상위 범위로는 승격되지 않습니다.

그래서 우리는 결론을 내릴 수 있습니다: 변수 승격은 변수를 자체 범위의 최상위까지만 승격시킵니다.

함수 우선순위

var와 함수를 사용하는 변수에는 승격 기능이 있으므로 동일한 변수를 사용하면 어떻게 될까요? 둘 다 선언하면 무슨 일이 일어날까요? 제목에서 알 수 있듯이 함수가 우선합니다.

코드를 자세히 보세요

foo();

var foo;

function foo(){
  console.log(1)
}

foo = function(){
  console.log(2)
}

답은 1입니다

이 코드는 실제로 이렇게 생겼습니다

function foo(){
  console.log(1)
}

foo();// 1

foo = function(){
  console.log(2)
}

자세히 보세요, var foo는 사라졌습니다. 예, 반복되는 문장이라고 생각하여 엔진에서는 무시됩니다. 이므로 폐기됩니다.

알겠습니다. var로 선언된 변수는 함수 선언만큼 좋지 않으므로 함수 선언을 사용하여 동일한 변수를 여러 번 선언하세요.

foo()
function foo(){
  console.log(1);
}
foo()
function foo(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

foo는 세 번 선언되고 네 번 호출됩니다. 각 호출의 결과는 3이므로 마지막 함수 선언이 이전 함수 선언을 덮어쓰게 됩니다.

그러나 var는 여전히 어려움을 겪고 있으며 이를 증명하는 것이 여전히 필요하다고 느낍니다. 존재.

foo()
function foo(){
  console.log(1);
}
var foo;
foo()
foo = function(){
  console.log(2);
}
foo()
function foo(){
  console.log(3);
}

foo()

잘 보시면 코드 중간 부분이 바뀌어서 3,3,2,2가 순서대로 출력됩니다

var foo는 무시되지만, 다음 함수는 이렇게 보면 됩니다

function foo(){
  console.log(3);
}

foo();//3
foo();//3
foo = function(){
  console.log(2);
}
foo();//2
foo();//2

일반 블록 내부에 함수 선언

이전에는 스코프 내에서 함수를 선언했다면 이제는 블록 내부에서 함수를 선언합니다

function foo(){

  console.log(b); // undefined
  b(); //TypeError: b is not a function

  var a = true;

  if(a){
    function b(){
      console.log(2)
    }
    //下面这段代码和上面的结果一样
    // var b = function(){
 //      console.log(2)
 //    }
  }
  //b() --> 这里会被执行

}

foo()

위에서 b는 정의되지 않았으므로 이 변수가 여전히 존재한다는 것을 증명합니다. 이는 함수가 아닙니다. 이 상황은 함수 표현식을 사용하는 것과 유사합니다.

요약

1. 승격은 함수 선언 승격과 변수 선언 승격으로 구분됩니다

2. 변수를 선언하려면 var를 사용하고, 함수를 선언하려면 함수를 사용하세요

3. 변수 승격은 변수를 자체 범위의 최상위로 승격시킵니다.

4. 함수 표현식에는 호이스팅 메커니즘이 없습니다

5. 함수 선언과 변수 선언이 동시에 동일한 식별자를 선언하는 경우 함수 선언이 우선 적용됩니다

6. 마지막 선언이 이전 선언을 덮어씁니다.

추천 튜토리얼: js 튜토리얼

위 내용은 js의 변수 승격 메커니즘에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!