JavaScript 기본 지식 요약 (8) 사전 컴파일 실행 과정

이번에는 기본 JavaScript 지식 요약을 가져오겠습니다. 총 11개의 지식 포인트가 있습니다. (8) 사전 컴파일 실행 과정을 살펴보겠습니다.

JS running trilogy

1단계: 구문 분석

2부: 사전 컴파일

3부: 해석 및 실행

사전 컴파일

구문 분석은 의미 분석이라고도 하며 구문 분석은 기사 전체입니다. 예를 들어, 여러 줄의 코드를 작성했는데, 이러한 코드가 실행되면 한 줄씩 해석되어 실행됩니다. 그러나 실행 전에 시스템은 실행 첫 번째 단계에서 해당 코드를 스캔하여 해당 코드가 있는지 확인합니다. 예를 들어 대괄호, 한자 등이 적은 경우 전체 텍스트를 스캔하지만 실행하지 않습니다. 이 프로세스를 스캔 후 구문 분석이라고 합니다. 전체 텍스트를 미리 컴파일한 후 한 줄 해석한 후 실행합니다. 한 줄, 즉 설명과 실행입니다.

사전 컴파일 전주곡

imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
eg : a = 123;
eg : var a = b = 123;

선언된 모든 전역 변수는 모두

윈도우의 속성

  eg:var a = 123;===> window.a = 123;
//例子:
   function test (){        console.log("a");
   }  
   test();//成功打印出a,
   box();//写在方法之前也成功打印出a,为什么能执行就是有预编译的过程
   function box (){        console.log("a");
   }    
   var a =123;    console.log(a);//输出123
   console.log(a);//输出undefined,不报错;
    var a = 123;    
    //但是如果直接打印会报错;
    console.log(b)//报错
    //也是预编译的效果
    
    //如果想偷懒记住两句话
    //函数声明整体提升
    //变量 声明提升

개선 사항을 설명합니다. 함수 선언: 함수 선언을 작성하면 어디에 작성하든 시스템은 항상 이 함수를 로직 맨 앞으로 가져옵니다. 따라서 어디에서 호출하든 위 또는 아래에서 호출되든 본질적으로 함수 아래에서 호출되며 항상 함수 선언을 승격합니다. 논리 앞쪽으로 이동

변수 선언이 개선되었습니다. 예를 들어

var a = 123;//사실 이는 다음의 두 부분입니다. var a;//변수를 먼저 선언

a = 123;//변수에 값을 할당

그래서 시스템이 개선되었습니다. 변수 대신 변수가 값과 함께 제기되므로 예제에서는 a가 출력됩니다. 정의되지 않음;

이 두 문장은 전능하지 않습니다

예를 들어

function a(a){    var a = 123;    var a = function(){        
    }
    a();
}var a = 123;

이 두 문장으로는 해결할 수 없습니다

위를 설명하기 전에 먼저 impiy global이 무엇인지 이해해야 합니다

imply globala: Imply global 변수: 즉, 변수에 선언되지 않고 값이 할당되면 독립 변수가 모든 전역 개체를 대신하게 됩니다.

eg: a = 123

eg: var a = b = 123;

a = 10; console.log(a); // 10을 인쇄한 다음 window 속성에 10을 갖습니다. var b = 20; // Window에도 전역 도메인인 bwindow가 있다고 선언했습니다.

공식적으로 사전 컴파일됨

AO 객체 생성

형식 매개변수 및 변수 선언을 찾고, 변수 및 형식 매개변수 이름을 AO 속성 이름으로 사용하며, 값은 정의되지 않습니다.

실제 매개변수 값과 형식 매개변수 변경 Unify

Look 함수 본문에 함수 선언을 하고 함수 본문에 값을 할당합니다

function fn (a){    console.log(a);    
    var a = 123;    console.log(a);    
    function a (){};    console.log(a);    
    var b = function (){        
    }    console.log(b);        
}
fn(1);

이 예에서는 매개변수, 변수, 함수 이름을 모두 a라고 합니다. 일단 덮어쓰기 현상이 확실합니다. 이는 이전과 매우 모순됩니다. 함수가 실행되기 직전에 사전 컴파일을 수행한다고 합니다.

먼저, 사전 컴파일

입니다. 첫 번째 단계: AO 객체 생성, 전체 이름은 Activation 객체가 범위이며 실행 컨텍스트라고도 함

AO{    
}

2단계: 형식 매개변수 및 변수 선언 찾기, 변수 및 형식 매개변수 이름을 AO 속성 이름으로 사용 값이 정의되지 않았습니다

AO{    a : undefined
    b : undefined
}

3단계: 실제 매개변수 값 변경 형식 매개변수로 통합

AO{    a : 1;    b : undefined
}

4단계: 함수 본문에서 함수 선언을 찾아 함수 본문에 값을 할당합니다

AO{    a : 1,    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    //然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
    d : 
}//然后值赋予函数体,也就是把a和b的属性值,变成函数体//覆盖掉a 和b的的属性值//也就变成下面的//因为第四步的优先级最高AO{    a : function a () {}
    b : undefined,    //b是是函数表达式,不是函数声明,所以不变
    d : function d () {}
}

이 시점에서 pre -컴파일 과정이 끝나면 코드 실행을 시작하고 함수를 실행합니다

그런 다음 위의 예를 살펴보겠습니다

//预编译结果AO{    a : function a () {}
    b : undefined,    d : function d () {}
}//开始执行代码function fn (a){    //第一步开始打印a
    //根据上面预编译的结果,
    //所以打印结果是function a () {}
    console.log(a);    
    //第二步执行 var a = 123;
    //因为在预编译的第二步里面,变量已经提升了
    //所以第二步只执行的赋值
    //a = 123;去AO对象里面去找a
    //也就变成
    //AO{
        //a : 123   这个才是a的存储值
        //b : undefined,
        //d : function d () {}
    //}
    var a = 123;    //所以打印出123
    console.log(a);    //因为这句在话在预编译的时候系统已经看了
    //所以不在看这句话
    function a (){};    //所以下面的console.log(a)
    //还是打印123;
    console.log(a);    //一样下面的var b这句话在预编译的时候已经看了,所以不在看
    //AO{
        //a : 123   
        //所以b的值变成function(){}
        //b : function(){}
        //d : function d () {}
    //}
    var b = function (){
        
    }    //所以打印出function(){}
    console.log(b);
        
}

fn(1);

예제를 살펴봅니다

function test(a , b){    console.log(a);
    c = 0;    var c;
    a = 3;
    b = 2;    console.log(b);    function b () {}    console.log(b);
}//这下我们就很快的得出打印的东西//a-->1//b-->2//b-->2

사전 컴파일은 뿐만 아니라 함수 본문에서도 발생하지만 전역 컨텍스트에서도 발생합니다.

글로벌 컨텍스트의 첫 번째 단계는 GO 전역 개체를 먼저 생성하는 것이며 나머지는 동일합니다.

GO === window

그런 다음 질문은 GO 여부입니다. AO가 먼저 오거나 AO가 먼저 옵니다

GO를 먼저 실행하는 것이 정답입니다

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

JavaScript 기본 지식 요약(6) 함수, 초기 범위(1부)

JavaScript 기본 지식 요약(6) 함수, 초기 범위(2부)

기본 JavaScript 지식 요약(7) Recursion

위 내용은 JavaScript 기본 지식 요약 (8) 사전 컴파일 실행 과정의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!