JavaScript의 변수 승격 예에 대한 자세한 설명

다음 에디터는 JavaScript 변수 승격에 대한 가장 이해하기 쉬운 자세한 설명을 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터를 따라가서 살펴보겠습니다.

은 다음과 같습니다.

a = 'ghostwu';
var a;
console.log( a );

변수 승격이 무엇인지, 변수 승격의 규칙에 대해 이야기하기 전에, 혹은 변수 승격을 배우지 않았다면, 기존 JavaScript 이해를 따르십시오. 위 예의 경우 두 번째 줄은 변수를 선언하지만 값을 할당하지 않으므로 코드의 세 번째 줄의 출력 결과가 정의되지 않아야 한다고 생각할 수 있습니다. a는 정의되지 않았지만 정확합니다. 결과는 ghostwu입니다. 이유는 계속 읽어주세요!

console.log( a );
var a = 'ghostwu';

위의 예에서는 첫 번째 코드 줄을 출력하기 전에 오류가 보고되었다고 생각할 수 있습니다. a 변수는 정의되지 않았지만 올바른 결과는 정의되지 않았습니다. 글쎄요, 설명하기 어려운 것 같습니다. 자바스크립트는 너무 버그가 많습니다.

이유를 이해하려면 먼저 다음 2가지 사항을 명확히 해야 합니다.

javascript 코드는 한 줄씩 실행되지 않습니다.

javascript 실행은 2단계로 나누어집니다.

컴파일(어휘 해석/사전 해석)

실행

두 번째, var a = "ghostwu" 실제로 js는 변수를 정의하기 위해 이 문장을 2단계로 간주하여 컴파일 단계에서 var a가 발생하고 실행 단계에서 a = 'ghostwu'가 발생하면 var a가 맨 앞으로 승격됩니다. 현재 범위의 a = 'ghostwu'는 실행 단계를 기다리며 유지됩니다. 따라서:

a = 'ghostwu';
var a;
console.log( a );

//上面这段代码经过编译之后，变成下面这样

var a; //被提升到当前作用域的最前面
a = 'ghostwu'; //留在原地，等待执行
console.log( a );

console.log( a ); 
var a = 'ghostwu';

//上面这段代码,经过编译之后，变成下面这样

var a;
console.log( a );
a = 'ghostwu';

컴파일된 코드를 읽은 후 이해가 되셨나요?

계속하기 전에 먼저 함수를 정의하는 두 가지 일반적인 방법을 명확히 하겠습니다.

//函数声明, 形如:
  function show(){
   console.log( '函数声明方式' );
  }

  //函数表达式, 形如:
  var show = function(){
   console.log( '表达式方式' );
  }

표현식과 함수 선언은 컴파일 단계에서 해석 효과가 다르기 때문입니다.

show();
  function show(){
   console.log( a );
   var a = 'ghostwu';
  }

컴파일 단계에서 위 코드를 어떻게 설명하나요? 다음 문장만 기억하세요.

함수 선언이 승격됩니다

그래서 위 코드를 컴파일하면 다음과 같이 됩니다.

function show(){ //函数声明被提升到 当前作用域的最前面
   var a; //var声明被提升到当前作用域的最前面, 注意，他不会提升到函数的外面, 因为当前的作用域是在函数中
   console.log( a );
   a = 'ghostwu';
  }
  show();

그래서 위의 결과는 정의되지 않습니다.

함수에 대해 다음 예를 참조하세요.

show(); //报错,show is not a function
var show = function(){
 console.log( 'ghostwu' );
}
//对于上面这段表达式代码，经过编译之后:
var show;
show(); //执行之后就是 undefined(), 所以在表达式定义之前，调用函数报错了
show = function(){
 console.log( 'ghostwu' ); 
}

show(); //你好
  var show;
  function show(){
   console.log( '你好' );
  }
  show = function(){
   console.log( 'hello' );
  }

위 코드의 결과가 "Hello"인 이유는 무엇입니까?

이유: 동일한 이름을 가진 함수 선언이 있을 때 나타나고 변수가 선언되면 함수 선언이 먼저 승격되고 변수 선언은 무시됩니다. 따라서 컴파일 후에는 다음과 같습니다.

function show(){
   console.log( '你好' );
  }
  show(); //你好
  show = function(){
   console.log( 'hello' );
  }
  show();//如果这里在调用一次，就是hello, 因为show函数体在执行阶段 被 重新赋值了

동일한 이름을 가진 함수 선언이 있으면 후자는 다음과 같이 이전 선언을 덮어씁니다.

show(); //how are you
  var show;
  function show(){
   console.log( 'hello' );
  } 
  show = function(){
   console.log( '你好' );
  }
  function show(){
   console.log( 'how are you!' );
  }
//上面的代码经过编译之后，变成如下形式:
  function show(){
   console.log( 'how are you!' );
  }
  show(); //how are you
  show = function(){
   console.log( '你好' );
  }
  show(); //如果在这里再执行一次，结果：你好

//思考题： 请问下面的结果是什么？ 为什么？ 写下你的答案
   show();
   var a = true;
   if( a ){
    function show(){
     console.log( 1 );
    }
   }else {
    function show(){
     console.log( 2 );
   }
   }

위 내용은 JavaScript의 변수 승격 예에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!