집 > 기사 > 웹 프론트엔드 > 자바스크립트에서 프리컴파일이란 무엇인가요?

자바스크립트에서 프리컴파일이란 무엇인가요?

WBOY원래의: 2022-03-10 11:02:531956검색

JavaScript에서 사전 컴파일은 코드가 실행되기 전에 수행되는 작업으로, 변수 선언과 함수 선언을 미리 진행하고 이를 특정 규칙에 따라 생성된 객체에 배치합니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript의 사전 컴파일이란

JS running trilogy

1. 구문 분석: js 엔진은 js 코드를 구문 분석하기 전에 전체 텍스트를 스캔하여 잘못 작성된 중괄호 클래스와 같은 하위 수준 구문 오류를 찾습니다. .

2. 모든 구문과 명령문은 특정 규칙에 따라 GO(전역 개체), AO(활성 개체)로 변환됩니다. 한 줄의 컴파일 구문 분석에 문제가 없고 사전 컴파일 단계가 완료되면 코드 실행이 시작됩니다. 어떤 종류의 사전 컴파일이 시작됩니까?

사전 컴파일은 변수 선언 및 함수 선언을 진행하기 위해 JavaScript 코드 전에 수행되는 작업입니다. 이러한 코드는 특정 규칙에 따라 생성된 개체에 배치됩니다.

사전 컴파일 과정:

GO 창 사전 컴파일

1. 스크립트 태그 실행 시 GO 객체를 생성합니다

2. 변수 이름이 속성 이름으로 사용됩니다. GO 객체이며 값은 정의되지 않습니다.

3. 함수 선언을 찾습니다. 함수 이름은 GO 객체의 속성 이름으로 사용되며 값은 함수 이름과 동일할 경우

AO 함수를 직접 재정의합니다. precompilation

1. 함수가 실행되는 순간 AO를 생성합니다. Object

2, 실제 매개변수와 형식 매개변수를 찾아 해당 형식 매개변수를 AO 개체의 속성 이름으로 추가하고 값은 다음과 같습니다. 실제 매개변수는 함수 선언이 변수라고 불리지 않는다는 점에 주목할 가치가 있습니다. 실제 매개변수 값이 없으면 정의되지 않습니다.

3. 변수 선언을 찾습니다. 변수 이름은 AO 객체의 속성 이름으로 사용되며 값은 정의되지 않습니다. 변수 이름과 형식 매개변수 이름이 동일하더라도 걱정하지 마세요.

4. 함수 선언을 찾아보세요. 함수 이름은 AO 객체의 속성 이름으로 사용되며, 함수 이름이 변수 이름과 같으면 직접 덮어쓰세요. Yiha 함수 사전 컴파일 과정을 간략하게 소개하는 코드

function fun(a,b){
    console.log(a);
    var a = 10;
    console.log(a);
    function a(){}
    console.log(a)
    a = 1;
    var b;
    console.log(b);
    var b = function(){}
    console.log(b);
}
fun(1,2);

1 먼저 fun을 실행하기 전에 AO 객체를 생성합니다.

funAO{
}

2 실제 매개변수와 형식 매개변수를 찾아 형식 매개변수를 AO 객체의 속성 이름으로 객체에 추가하면 그 값이 실제 매개변수가 아니라는 점에 유의할 필요가 있습니다. . 실제 매개변수 값이 없으면 정의되지 않습니다.

funAO{
    a : 1,
    b : 2
}

3. 변수 선언을 찾습니다. 변수 이름은 AO 개체의 속성 이름으로 사용되며 값은 정의되지 않습니다. 변수 이름이 정식 매개변수 이름과 같더라도 걱정하지 마세요.

funAO{
    a : 1,
    b : 2
}

4. 함수 선언을 찾으세요. 함수 이름은 AO 개체의 속성 이름으로 사용되며 값은 함수 본문입니다. 함수 이름과 변수 이름이 같으면 직접 재정의

funAO{
    a : function a(){},
    b : 2
}

설명 및 실행

function fun(a,b){
    console.log(a);  //往上面的AO对象里面寻找，a的值是function a(){}。 这里就输出function a(){}
    var a = 10;
    console.log(a);//上面一行代码把a赋值10 ，所以这里输出10
    function a(){}
    console.log(a)//这里也是10，因为上面函数已经提前了
    a = 1;
    var b;
    console.log(b);//往上面的AO对象里面寻找，b的值是2。 这里就输出2
    var b = function(){}//这里的函数为啥不能提前，因为这里的是一个函数表达式，这个函数没有函数名所以不能提前。
    console.log(b);//这里把b赋值function(){},所以这里输出function(){}
}
fun(1,2);

또한 가능성이 있습니다

function add(){
//这里的话碰到if判断，for....除了function作用域之外的咱们都得正常分析，
//所以这里的值为undefined其实就是var a提前了赋值undefined
    console.log(a);//这里的输出结果为？undefined
    if(a){
        var a = 10;
    }
    //这里是把a的值传入判断里面undefined返回的是false所以进不去，值就不会改变这里还是undefined
    console.log(a);//undefined
}
add();

이것이 미리 컴파일된 실행 과정입니다!

자바스크립트에서 프리컴파일이란 무엇인가요?

JavaScript의 사전 컴파일이란

관련 기사