>  기사  >  웹 프론트엔드  >  JavaScript의 리프팅 동작 및 원리 분석

JavaScript의 리프팅 동작 및 원리 분석

黄舟
黄舟원래의
2017-02-28 14:43:13941검색

JavaScript를 이제 막 배운 학생들에게는 일부 동작이 혼란스러울 수 있습니다

학교에서 배운 C/C++와는 매우 다릅니다
예를 들어 다음은 case

a = 1;var a;console.log(a);// 1

var a가 a에 다시 할당된 것처럼 보이기 때문에 일부 학생들은 정의되지 않아야 한다고 생각할 수 있습니다.
이 경우

console.log(a);// undefinedvar a = 1;

a는 선언되기 전에 인쇄됩니다. 오류를 보고하는 것이 맞는지, 아니면 위 브라우저의 동작을 참조하여 2를 출력해야 하는지
그러나 결과는 정의되지 않습니다

보이는 코드의 순서가 반드시 순서는 아닙니다. 실제로 js 엔진에 의해 실행됩니다
오늘 이야기하고 싶은 자바스크립트 개선 동작입니다
사실 이 글을 쓰는 것은 사전 컴파일 지식을 보충하기 위한 것입니다
사전 컴파일에 대해 모르신다면 컴파일을 읽기 전에 아래를 클릭하세요
JavaScript 사전 컴파일
JavaScript의 사전 컴파일은 프로모션 동작으로 직접 연결됩니다

프로모션 동작

사실 사전 컴파일을 이해하면 다음을 수행할 수 있습니다.
실행 전에 사전 컴파일이 발생하는 이유
를 명확하게 이해합니다. 따라서 이 두 코드 블록을 실행하는 것은 다음과 같은 코드를 실행하는 것과 같습니다

var a;a = 1;console.log(a);// 1
var a;console.log(a);// undefineda = 1;

이 승격 동작의 경우 다음 두 문장을 기억하세요
변수 선언 승격, 함수 선언 전반 승격
다시 한번 강조합니다.

function demo(){….}这才叫做函数声明 
var demo = function(){….}这不叫函数声明

사실 사전 컴파일 원리만 이해하면 승격 동작도 이해하기 쉽습니다

우리는 var a = 1를 명령문으로 처리하는 데 익숙합니다
그러나 js 엔진은 그렇게 생각하지 마십시오. var = a 선언과 a = 1 초기화
로 분할하고 첫 번째 작업은 컴파일 단계이고 두 번째는 실행 단계의 작업입니다
따라서 범위 내 Everywhere에 나타나는 선언은 실행 전에 미리 처리됩니다.
이는 변수 선언과 함수 선언을 컴파일 단계의 맨 위로 이동하는 것과 같습니다. 범위
이 프로세스를 승격

함수와 일반 변수를 같은 이름으로 선언하는 것은 물론, 프로그래밍 중에 반복되는 변수를 선언하면 안 됩니다
그런데, 스코프 상단에 var를 두고 변수를 선언하는 것이 좋은 습관입니다. (Single var 원칙)
이렇게 하면 개선 동작에 대해 걱정하지 않아도 됩니다

사례 분석

그럼에도 불구하고, 면접 질문의 핵심이기도 한 이 과정을 이해해야 합니다
예전 루틴의 예를 들어보겠습니다

function a(a, b){
    console.log(a);    console.log(c);
    c = 0;    console.log(b);
    var c;
    a = 3;
    b = 2;    console.log(a);    console.log(c);    console.log(b);    function b(){};
    console.log(b);
}
a(1);

헷갈리실지 모르겠지만, abc가 잔뜩 있어요
정답은

1   undefined    function b(){}    3    0    2    2

우선 사전 컴파일부터 분석해 보겠습니다. 그런데 리뷰는

  1. AO 객체 생성(Active Object)

  2. 함수 내에서 함수 형식 매개변수 및 변수 선언 찾기, 형식 매개변수 이름 및 변수 이름은 AO 객체의 속성으로 사용됩니다. 값이 정의되지 않음

  3. 실제 매개변수와 형식 매개변수가 통일되어 실제 매개변수 값이 형식 매개변수

  4. 에 할당됩니다. 함수 선언을 찾아보면 함수 이름은 AO 객체의 속성으로 사용되고 값은 함수 참조

마지막 함수 a가 실행되기 전에 생성된 AO 객체는 다음과 같습니다. 아마 이렇게

//伪代码AO->{
    a: 1
    b: function(){}
    c: undefined}

그러니까 이런 함수를 실행하는 건 꽤 그럴듯합니다
(함수 이름 a는 내부 변수와 충돌하지 않습니다)

function a(){    var a = 1;    var b = function(){};    var c;

    console.log(a);//1
    console.log(c);//undefined
    c = 0;
    console.log(b);//function(){}
    a = 3;
    b = 2;
    console.log(a);//3
    console.log(c);//0
    console.log(b);//2
    console.log(b);//2}

그러면 쉽게 답을 얻을 수 있습니다

변수 선언과 함수 선언이 있는 경우 이름이 중복됩니다
함수 선언이 변수 선언보다 우선해야 합니다(JavaScript 함수는 다양한 권한을 갖는 최초의 시민입니다)
변수 선언이 다음과 같은 경우 다른 변수 선언과 동일한 이름
또는 함수 선언이 다른 함수 선언과 동일한 이름을 갖습니다
문서 아래에 있는 사람이 우선권을 가집니다

요약

위는 오늘 공유해드리는 자바스크립트 승격 동작
두 문장으로 요약: 변수 선언 승격, 함수 선언의 전반적인 개선
은 사실 js 엔진 사전 컴파일로 인해 발생하는 불가피한 동작입니다

위 내용은 JavaScript의 개선 동작 및 원리에 대한 분석입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!


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