JavaScript_Basic 지식을 바탕으로 Hoisting 메커니즘을 심층적으로 해석

인양 메커니즘

Javascript의 변수 선언에는 호이스팅 메커니즘이 있습니다. JavaScript 엔진이 실행되면 모든 변수 선언이 현재 범위 앞으로 올라갑니다.

먼저 코드를 살펴보세요

var v = "hello";
(function(){
 console.log(v);
 var v = "world";
})();

이 코드를 실행한 결과는 무엇입니까?
대답은: 정의되지 않음
이 코드는 두 가지 문제를 보여줍니다.
첫째, 함수 범위의 변수 v는 상위 범위 변수 v를 포함합니다. 코드 변경을 줄이세요

var v = "hello";
if(true){
 console.log(v);
 var v = "world";
}  

출력 결과는 "hello"입니다. 이는 JavaScript에 블록 수준 범위가 없음을 나타냅니다. 함수는 자체 범위를 갖는 JavaScript의 유일한 구조입니다.

둘째, 함수 범위 내에서 변수 v 선언이 승격됩니다. 따라서 초기 코드는 다음과 같습니다.

var v = "hello";
(function(){
 var v; //declaration hoisting
 console.log(v);
 v = "world";
})();  

선언, 정의 및 초기화

선언은 이름의 존재를 선언하고, 정의는 이름에 대한 저장 공간을 할당하며, 초기화는 이름에 의해 할당된 저장 공간에 초기 값을 할당합니다.
이 세 가지 개념을 C로 표현해보세요

extern int i;//i라는 이름이 이미 어딘가에 존재함을 나타내는 명령문입니다
int i;//i라는 이름을 선언 정의하고, i에 대한 저장 공간을 할당하기 위한 것입니다
i = 0;//초기화 이름 i이며 초기값 0을 할당합니다
자바스크립트의 경우입니다

var v;//변수 v 선언
v = "hello";//(정의 및) 변수 v 초기화
JavaScript는 동적 언어이기 때문에 변수의 유형이 고정되어 있지 않으며 초기화 및 할당에 따라 저장 공간의 크기가 변경됩니다. 따라서 변수의 "정의"는 기존 정적 언어의 정의와 동일하지 않습니다. 그 정의는 관련이 없습니다.

승격 선언

변수 및 함수 선언을 포함하여 현재 범위 내의 선언이 범위 앞으로 승격됩니다

(function(){
 var a = "1";
 var f = function(){};
 var b = "2";
 var c = "3";
})();  

변수 a, f, b, c의 선언은 다음과 유사하게 함수 범위 앞으로 승격됩니다.

(function(){
 var a,f,b,c;
 a = "1";
 f = function(){};
 b = "2";
 c = "3";
})();

함수 표현식은 승격되지 않으며 이는 함수 표현식과 함수 선언의 차이점이기도 합니다. 두 가지의 차이점을 자세히 살펴보겠습니다.

(function(){
 //var f1,function f2(){}; //hoisting,被隐式提升的声明

 f1(); //ReferenceError: f1 is not defined
 f2();

 var f1 = function(){};
 function f2(){}
})();  

위 코드에서 함수 선언 f2가 승격되었으므로 f2를 더 일찍 호출해도 문제가 없습니다. 변수 f1도 승격되지만 승격 후 f1의 값은 정의되지 않으며 함수 표현식이 실행될 때 실제 초기값이 할당됩니다. 따라서 해당 명령문만 승격됩니다.

이름 확인 순서

자바스크립트의 이름은 네 가지 방법으로 범위에 들어가며 우선순위는 다음과 같습니다.
1. 언어 내장: 모든 범위에는 this 및 인수 키워드가 있습니다
2. 형식 매개변수: 함수의 매개변수는 함수 범위 내에서 유효합니다
3. 함수 선언: function foo() {}
형식 4. 변수 선언: var bar 형식

이름 선언의 우선순위는 위에 표시된 것과 같습니다. 즉, 변수 이름이 함수 이름과 동일한 경우 순서에 관계없이 함수 이름이 변수 이름을 재정의합니다. 코드에서. 단, 이름은 코드에 쓰여진 순서대로 초기화되며, 위의 우선순위에 영향을 받지 않습니다. 코드를 보세요:

(function(){
  var foo;
  console.log(typeof foo); //function

  function foo(){}

  foo = "foo";
  console.log(typeof foo); //string
})();  

정식 매개변수에 동일한 이름의 변수가 여러 개 있는 경우, 동일한 이름의 마지막 매개변수가 정의되지 않은 경우에도 동일한 이름의 마지막 매개변수가 동일한 이름의 다른 매개변수를 덮어씁니다.

위의 이름 확인 우선순위에는 언어의 내장 이름 인수를 재정의하는 기능과 같은 예외가 있습니다.

이름이 지정된 함수 표현식

함수 표현식에는 함수 선언과 마찬가지로 이름을 지정할 수 있지만 이것이 함수 표현식을 함수 선언으로 만들지는 않습니다. 명명된 함수 표현식의 이름은 네임스페이스에 들어가지 않으며 승격되지 않습니다.

f();//TypeError: f는 함수가 아닙니다
foo();//ReferenceError: foo가 정의되지 않았습니다
var f = function foo(){console.log(typeof foo);};
f();//함수
foo();//ReferenceError: foo가 정의되지 않았습니다
명명된 함수 표현식의 이름은 함수 범위 내에서만 유효합니다.

다음 예를 살펴보겠습니다.

var myval = "my global var";
(function() {
 console.log(myval); // log "my global var"
})();

위 코드는 분명히 "my global var"를 출력하지만, 위 코드를 다음과 같이 약간 수정하면:

var myval = "my global var";
(function() {
 console.log(myval); // log "undefined"
 var myval = "my local var";
})();

실행 결과는 undefound가 출력되는 이유는 위의 코드가 다음과 동일하기 때문입니다.

var myval = "my global var";
(function() {
 var myval;
 console.log(myval); // log "undefined"
 myval = "my local var";
})();

변수 선언 부분만 승격되고 바로 초기화되지 않아 undefine이 출력됩니다.

그러나 이러한 승격 메커니즘은 일반 변수뿐만 아니라 함수에도 반영됩니다. 예를 들어 다음 코드는 올바르게 실행될 수 없습니다.

(function() {
 fun(); // Uncaught TypeError: undefined is not a function
 var fun = function() {
 console.log("Hello!");
 }
})();

다음과 동일하기 때문입니다.

(function() {
 var fun;
 fun(); // Uncaught TypeError: undefined is not a function
 fun = function() {
 console.log("Hello!");
 }
})();

함수 선언도 호이스팅되어 바로 초기화되지 않기 때문에 오류가 발생합니다.

물론, 이러한 함수 정의 방법을 "함수 표현"이라고 하며 승격 메커니즘이 있습니다. 다음과 같은 "함수 선언" 방법이라면 승격 메커니즘에 전혀 문제가 없습니다.

(function() {
 fun();
 function fun() {
 console.log("Hello!"); // log "Hello!"
 }
})();

이것이 함수 선언과 함수 표현식의 주요 차이점이기도 합니다.