JavaScript 사전 컴파일 원리 분석

黄舟

풀어 주다： 2017-02-28 14:28:42

원래의

1642명이 탐색했습니다.

오늘은 스코프, 프리컴파일 등을 검토하느라 시간을 많이 보냈습니다.

블로그 글도 많이 읽고 예전에 읽었던 책도 펼쳤습니다(말이 안 통하는 책이 많은 것 같아요) (precompilation에 대해) )
처음에는 확실히 배운 줄 알았는데, 사실 아직도 오해가 있는 부분이 있어요
(오해의 소지가 있는 블로그 글이 많음)
오늘 밤에 난잡한 생각 정리했습니다
먼저 미리 컴파일된 것들을 정리하고, 나중에 시간이 나면 범위에 대해 자세히 설명하겠습니다.

이 사전 컴파일은 기존 컴파일과 다르다는 점을 다들 이해하셔야 합니다. js 사전 컴파일은 특별한 컴파일 프로세스입니다.)
JavaScript는 인터프리트 언어입니다.
인터프리트 언어이므로 한 줄을 컴파일하고 한 줄을 실행한다는 의미입니다.
전통적인 컴파일은 여러 단계를 거칩니다. , 단어 분할, 구문 분석, 코드 생성 등
나중에 시간이 나면 더 많은 정보를 제공하겠습니다. 모두의 대중 과학
JS 사전 컴파일에 대해 제가 이해한 내용을 공유하겠습니다

자바스크립트 실행 3부작

스크립트 실행 js 엔진은 어떤 일을 하나요?

구문 분석
사전 컴파일
해석 및 실행

코드를 실행하기 전에 두 단계가 있습니다
구문 분석은 매우 간단합니다. 즉, 엔진은 코드에 하위 수준 구문 오류가 있는지 확인합니다.
이름에서 알 수 있듯이 설명과 실행은, 코드를 실행하는 것입니다
사전- 컴파일에 대한 간단한 이해는 메모리에 어떤 공간을 열고 일부 변수와 함수를 저장하는 것입니다
사전 컴파일을 이해하는 것도 모든 사람이 범위를 이해하는 데 도움이 됩니다

JS 사전 컴파일은 언제 진행되나요

저 원래 오해는 여기서도 발생했습니다
사전 컴파일은 언제 진행되나요?
위의 실행 과정으로 인해 오해가 생기지 않았으면 좋겠습니다. .
사전 컴파일은 스크립트의 코드 블록이 실행되기 전에만 발생한다고 잘못 생각하고 계십니다
틀린 것은 아닙니다
사전 컴파일은 스크립트 코드에서 실행 전에 발생합니다
그런데 대부분 함수 실행 전에 발생합니다

JS 사전 컴파일 예시

예를 들기 전에 다음 개념에 대해 생각해 보겠습니다.

변수 선언 var…
함수 선언 함수…

<script>
    var a = 1;// 变量声明
    function b(y){//函数声明
        var x = 1;
        console.log(&#39;so easy&#39;);
    };    var c = function(){//是变量声明而不是函数声明！！
        //...
    }
    b(100);</script><script>
    var d = 0;</script>

로그인 후 복사

이 코드로 엔진이 무엇을 하는지 살펴보겠습니다

페이지가 생성될 때 GO 전역 객체가 생성됩니다. (즉, 모두에게 친숙한 창 객체입니다.)
첫 번째 스크립트 파일이 로드됩니다
스크립트 로드 후 구문이 적합한지 분석
사전 컴파일 시작

변수 선언 찾기, GO 속성으로 값이 정의되지 않음
함수 선언 찾기, GO 속성으로 값이 함수 본문에 할당됨

//伪代码GO/window = {    //页面加载创建GO同时，创建了document、navigator、screen等等属性，此处省略
    a: undefined,
    c: undefined，
    b: function(y){
        var x = 1;
        console.log(&#39;so easy&#39;);
    }
}

로그인 후 복사

실행 코드 설명(함수 b가 실행될 때까지)

//伪代码
GO/window = {
    //变量随着执行流得到初始化
    a: 1,
    c: function(){
        //...
    },
    b: function(y){
        var x = 1;
        console.log(&#39;so easy&#39;);
    }
}

로그인 후 복사

함수 b 실행 전, 사전 컴파일 발생

AO 활성 객체(Active Object) 생성
보기 형식 매개변수 및 변수 선언의 경우 정의되지 않은 값을 할당
실제 매개변수 값을 형식 매개변수에 할당
함수 선언을 찾아 및 함수 본문에 값 할당

//伪代码AO = {    //创建AO同时，创建了arguments等等属性，此处省略
    y: 100,
    x: undefined}

로그인 후 복사

실행된 함수의 코드 설명
이후 첫 번째 스크립트 파일이 실행되면 두 번째 스크립트 파일이 로드됩니다.
두 번째 스크립트 파일이 로드되면 구문 분석이 수행됩니다.
구문 분석이 완료되면 사전 컴파일을 시작합니다

초기 사전 컴파일 단계를 반복합니다...

여러분
변수 선언 및 함수 선언은 사전 컴파일 단계에서 발생하며 초기화 동작(할당)이 없으며 익명 함수는 사전 컴파일에 참여하지 않습니다
해석 및 실행 단계에서만 변수가 생성됩니다. 초기화
흠~드디어 마무리

요약

사전 컴파일(함수 실행 전)※
1. AO 객체 생성(Active Object)
2. 함수 내에서 함수 형식 매개변수 및 변수 선언을 찾습니다. 형식 매개변수 이름과 변수 이름은 AO 개체의 속성으로 사용되며 값은 정의되지 않습니다. 🎜>3. 실제 매개변수와 형식 매개변수가 통일되어 실제 매개변수 값이 형식 매개변수에 할당됩니다
4. 함수 선언을 찾아 함수 이름을 AO 객체의 속성으로 사용하고, 값은 함수 참조

미리 컴파일됨(스크립트 코드 블록 스크립트가 실행되기 전)

1. 전역 변수 선언을 찾습니다(암시적 전역 변수 선언, 생략된 var 선언 포함). 전역 개체의 속성이고 값은 정의되지 않았습니다
3. 함수 선언을 찾습니다. 함수 이름은 전역 개체의 속성이고 값은 함수 참조입니다.

사전 컴파일 이해 동작 개선, 이 포인팅, 범위 및 성능 문제는 모두 매우 도움이 됩니다

이 문제는 앞으로 요약하겠습니다

위는 JavaScript 사전 컴파일 원칙 분석 내용입니다. 내용이 궁금하시다면 PHP 중국어 홈페이지(www.php.cn)를 주목해주세요!