>  기사  >  웹 프론트엔드  >  ghostwu 간단하고 이해하기 쉬운 자바스크립트 변수 승격

ghostwu 간단하고 이해하기 쉬운 자바스크립트 변수 승격

巴扎黑
巴扎黑원래의
2017-08-05 13:29:101283검색


1 a = 'ghostwu';2 var a;3 console.log( a );

위의 예에서는 두 번째 줄이 변수를 선언하지만 값을 할당하지 않는 var a;이므로 세 번째 코드 줄의 출력 결과가 정의되지 않아야 한다고 생각할 수 있습니다. a는 정의되지 않았지만 정확합니다. 결과는 ghostwu입니다. 이유는 계속 읽어주세요!


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

위의 예에서는 첫 번째 코드 줄을 출력하기 전에 오류가 보고되었다고 생각할 수 있습니다. a, a 변수는 정의되지 않았지만 올바른 결과는 정의되지 않았습니다. 글쎄, 조금 이상한 것 같습니다.

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

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

  • javascript 실행은 2단계로 나뉩니다.

    • 컴파일(어휘 설명) /사전설명)

    • Execution

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


1 a = 'ghostwu';2 var a;3 console.log( a );4 5 //上面这段代码经过编译之后,变成下面这样6 7 var a;  //被提升到当前作用域的最前面8 a = 'ghostwu'; //留在原地,等待执行9 console.log( a );


1 console.log( a ); 
2 var a = 'ghostwu';3 4 //上面这段代码,经过编译之后,变成下面这样5 6 var a;7 console.log( a );8 a = 'ghostwu';

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

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


1         //函数声明, 形如:2         function show(){3             console.log( '函数声明方式' );4         }5 6         //函数表达式, 形如:7         var show = function(){8             console.log( '表达式方式' );9         }

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


1         show();2         function show(){3             console.log( a );4             var a = 'ghostwu';5         }

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

함수 선언이 승격됩니다

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


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

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

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


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


1         show(); //你好2         var show;3         function show(){4             console.log( '你好' );5         }6         show = function(){7             console.log( 'hello' );8         }

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

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


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

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


         show();                                console.log( 'hello'          show =              console.log( '你好'                       console.log( 'how are you!'                        console.log( 'how are you!'          show();          show =              console.log( '你好'          show();


 1 //思考题: 请问下面的结果是什么? 为什么? 写下你的答案 2          show(); 3           var a = true; 4           if( a ){ 5               function show(){ 6                   console.log( 1 ); 7               } 8           }else { 9               function show(){10                  console.log( 2 );11             }12          }

위 내용은 ghostwu 간단하고 이해하기 쉬운 자바스크립트 변수 승격의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.