찾다

집  >  기사  >  웹 프론트엔드  >  JavaScript 사전 컴파일 프로세스를 완전히 마스터하세요.

JavaScript 사전 컴파일 프로세스를 완전히 마스터하세요.

WBOY
WBOY앞으로
2022-02-10 17:57:231870검색

이 글은 javascript의 사전 컴파일 관련 지식을 주로 예제를 통해 소개합니다.

JavaScript 사전 컴파일 프로세스를 완전히 마스터하세요.

단계(3개)

  1. 어휘 및 구문 분석: 어휘 및 구문 분석은 JavaScript 코드에 하위 수준 구문 오류가 있는지 확인하는 것입니다.
  2. 사전 컴파일: 이 문서에서는
  3. 실행 코드에 중점을 둡니다. 실행 코드는 js 엔진 파싱 코드로, 한 줄을 파싱하고 한 줄을 실행합니다

이 장에서는 주로 사전 컴파일 프로세스

사전 컴파일 프로세스

사전 컴파일도 2개 지점으로 나누어집니다. time:

  1. 첫 번째는 JavaScript 코드가 실행되기 전입니다.
  2. 두 번째는 함수가 실행되기 전입니다.

하지만 JavaScript 코드 이전에는 이전 사전 컴파일이 한 번만 발생하고 함수 실행 전 사전 컴파일은 여러 번 수행됩니다.

1. JavaScript 코드 실행 전 사전 컴파일

  1. JavaScript 코드가 실행되기 전에 window 개체 또는 window对象，也可以理解为GO（Global Object）对象，我们是看不到的(无法打印)
  2. 然后将所有声明的全局变量、未使用var和let声明的变量放到GO对象中，并且赋值为undefined(联想到“变量提升”)
  3. 分析**函数声明：**然后再将所有的函数声明也放到GO对象中，并且赋值为函数自身的函数体(函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖)

案例说明

<script>
    var a = 1;
    console.log(a);
    console.log(b);
    var b = 10;
    function fun (a) {
        console.log(b);
        var a = b = 2;
        var c = 123;
        console.log(a);
        console.log(b);
    }
    var a2 = 20
    fun(1);
 
</script>

结合上面说的步骤：

  1. 首先，<script></script>中的代码执行之前会创建一个GO对象(window对象)

    GO = {
	//自带的属性都不写
}

  2. 将所有声明的全局变量、未使用var和let声明的变量放到GO对象中，并且赋值为undefined

    GO = {
	a : undefined,
	b : undefined,
	a2 : undefined
}

  3. 分析函数声明，函数名为属性名,值为函数体，如果函数名和变量名相同，则无情覆盖

    GO = {
	a : undefined,
	b : undefined,
	a2 : undefined,
	function fun (a) {
    var a = b = 2;
    var c = 123;
  }
}

  4. 此时完成了js代码执行之前的预编译过程，开始执行js代码，首先是给a进行赋值为1，在GO对象里边也会进行对应的改变：

    GO = {
	a : 1,
	b : undefined,
	a2 : undefined,
	function fun (a) {
    var a = b = 2;
    var c = 123;
  }
}

  5. 然后打印a，此时会在GO对象上去找变量a，然后此时的a的值为1，所以console.log(a) 是等于1的。接着打印b，也会去GO对象上找，找到了b的值为undefined，所以console.log(b)是等于undefined。

  6. 接着执行到赋值语句：b = 10; 此时GO对象里b的值变成了10

    GO = {
	a : 1,
	b : 10,
	a2 : undefined,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}

  7. 接着下一行代码是一个**fun函数，此时不会去执行该函数**，因为在前面的预编译过程中实际上是被放到了代码的最前端，就是传说中的声明提前，所以忽略掉了。接着给a2进行赋值操作：a2 = 20，GO对象也发生变化：

    GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}

  8. 接着是执行fun函数，如上面说到的另外一个时间点发生的预编译，就是执行函数之前，现在就来说一下函数执行前的预编译是怎么样的。

2. 函数执行前的预编译

  1. 函数调用,也是会生成自己的作用域(**AO：**Activetion Object,执行期上下文)AO活动对象。函数调用时候,执行前的一瞬间产生的,如果有多个函数的调用,会产生多个AO

    1. 生成AO对象：函数执行前的一瞬间，生成AO活动对象
    2. 分析生成AO属性：查找形参和变量声明放到AO对象，赋值为undefined
    3. 分析函数声明：查找函数声明放到AO对象并赋值为函数体。函数名为属性名,值为函数体；

    如果遇到AO对象上属性同名，则无情覆盖

  2. 逐行执行。

案例说明

拿的是上文中的代码示例。

  1. 第一步创建AO对象

    AO{

}

  2. 查找形参和变量声明放到AO对象并赋值为undefined；

    注意：fun函数里边的b是未经var声明的，所以是全局变量，不会被放在funGO

    ( 전역 개체) 개체를 볼 수 없습니다(인쇄할 수 없음)
    3. 그런 다음 선언된 모든
  3. 전역 변수

    , 사용되지 않은 var 및 let 변수가 선언되었습니다. by code>는 GO 개체에 배치되고 값은 <code>정의되지 않음입니다("변수 승격"을 연상시킵니다). ** 함수 선언을 분석합니다. ** 그런 다음 모든 함수 선언도 GO 객체에 값을 할당하고 함수 자체의 함수 몸체에 값을 할당합니다. (함수 이름은 속성 이름이고 값은 함수 몸체입니다. 함수 이름과 변수 이름이 같으면 무자비하게 덮어쓰게 됩니다.

    )

  4. 사례 설명

    AO{
	a: undefined,//形参a与局部变量a同名
	c: undefined
}

    위에서 언급한 단계와 결합:

    🎜🎜🎜먼저 <script></script>의 코드가 실행되기 전 , GO 개체(창 개체)가 생성됩니다. 🎜
    AO{
	a: 1,
	c: undefined,
}
    🎜🎜🎜 선언된 전역 변수와 var 및 let를 사용하여 선언되지 않은 변수는 모두 GO 개체에 배치됩니다. undefine🎜
    GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}
    🎜🎜🎜analytic 🎜Functiondeclaration🎜에 값이 할당되면 함수 이름은 속성 이름, 값은 함수 본문이 됩니다. 마찬가지로 무자비하게 덮어쓰게 됩니다🎜
    AO{
	a: 2,
	c: undefined,
}
    🎜🎜🎜 이때 js 코드 실행 전의 사전 컴파일 과정이 완료되고, js 코드의 실행이 먼저 🎜a에 1로 할당됩니다. 🎜, 해당 변경 사항이 GO 개체에 적용됩니다. 🎜
    AO{
	a: 2,
	c: 123,
}
    🎜🎜🎜 그러면 a가 인쇄됩니다. 이때 변수 a는 GO 개체에서 발견되며 이때 a의 값은 1입니다. 따라서 console.log(a)는 1과 같습니다. 그런 다음 b가 인쇄되면 GO 객체에서도 검색되며 b의 값은 undefine이므로 console.log(b)는 undefine과 같습니다. 코드>. 🎜🎜🎜🎜그러면 할당문이 실행됩니다: <code>b = 10; 이때 GO 개체의 🎜b 값은 10🎜🎜rrreee🎜🎜🎜이 됩니다. 그러면 다음 코드 줄은 다음과 같습니다. **fun 함수, 이 함수는 지금은 실행되지 않습니다**, 이전 사전 컴파일 과정에서 실제로 전설적인 코드의 앞부분에 배치되었기 때문입니다. 미리 선언하므로 무시하세요. 그런 다음 🎜a2에 할당 작업🎜을 수행합니다: a2 = 20. 그러면 GO 개체도 변경됩니다. 🎜rrreee🎜🎜🎜그런 다음 위에서 언급한 대로 fun 함수가 실행됩니다. . 특정 시점에 발생하는 사전 컴파일은 함수가 실행되기 전입니다. 이제 함수 실행 전 사전 컴파일에 대해 알아보겠습니다. 🎜🎜🎜🎜2. 함수 실행 전 사전 컴파일🎜🎜🎜🎜함수 호출도 자체 범위(**AO: **Activetion 개체, 실행 컨텍스트)🎜AO🎜activity 개체를 생성합니다. 🎜함수가 호출되면 실행 직전에 생성됩니다. 함수 호출이 여러 개인 경우 여러 개의 AO가 생성됩니다.🎜🎜🎜🎜🎜AO 개체 생성🎜: 함수가 실행되기 직전에 AO 활성 개체가 생성됩니다. 생성됨🎜🎜🎜 AO 속성 분석 및 생성 🎜: 🎜 형식 매개변수 🎜 및 🎜 변수 선언 🎜을 찾아 AO 객체에 넣고 해당 값을 정의되지 않은 🎜🎜🎜 함수 선언 분석 🎜: 찾기 함수 선언을 AO 객체에 넣고 함수 본문으로 할당합니다. 함수 이름은 속성 이름이고 값은 함수 본문입니다. 🎜🎜🎜🎜AO 객체에서 동일한 이름을 가진 속성이 발견되면 무자비하게 덮어쓰여🎜🎜🎜🎜🎜 한 줄씩 실행됩니다. 🎜🎜🎜

    케이스 설명

    🎜위의 코드 예를 사용했습니다. 🎜🎜🎜🎜🎜첫 번째 단계는 AO 개체를 생성하는 것입니다🎜rrreee🎜🎜🎜 🎜형식 매개변수🎜 및 🎜변수 선언🎜을 찾아 AO 개체에 값을 할당합니다. 🎜🎜참고: 코드>fun
    함수의 fun의 AO에 배치되지 않습니다. 🎜🎜rrreee🎜🎜🎜🎜actual 매개변수🎜를 🎜formal 매개변수🎜🎜rrreee🎜🎜🎜에 할당합니다. 함수 선언을 찾아 AO 객체에 넣고 함수 본문으로 할당합니다. 따라서 이 단계는 무시하세요. 🎜

  5. 函数执行之前的预编译完成，开始执行语句

  6. 执行代码

    1. 首先执行打印变量b，而此时fun的AO里边并没有变量b，所以会去GO对象里边找，此时的GO对象b的值为10，所以第一行代码打印出10；

    2. 第二行代码首先要看的是b = 2，然后GO对象里边b的值就被改为2了。

      GO = {
	a : 1,
	b : 10,
	a2 : 20,
	function fun (a) {
		var a = b = 2;
		var c = 123;
	}
}

    3. 然后b再赋值给a，变量a是属于局部变量a，所以fun的AO对象里边a的值被改为2。

      AO{
	a: 2,
	c: undefined,
}

    4. 接着下一个赋值语句是c = 123，所以AO对象中c的值被改为了123

      AO{
	a: 2,
	c: 123,
}

    5. 此时再执行console.log(a)的值就是AO对象里边a的值 2；执行console.log(b)的值就是GO对象b的值 2，至此函数fun执行完毕，紧跟着fun的AO也会被销毁。

  7. 综上所述，依次打印出来的值为：1，undefined，10，2，2。

总结

预编译两个小规则：

  1. 函数声明整体提升(无论函数调用和声明的位置是前是后，系统总会把函数声明移到调用前面）
  2. 变量声明提升(无论变量调用和声明的位置是前是后，系统总会把声明移到调用前，注意仅仅只是声明，所以值是undefined）

预编译前奏

  1. imply global(暗示全局变量-专业术语) 即：任何变量，如果未经声明就赋值，则此变量就位全局变量所有。(全局域就是window，这里再一次说明了JavaScript是基于对象的语言，base on window)
  2. 一切声明的全局变量，全是window的属性；var a=12;等同于window.a = 12;(会造成window这个对象特别臃肿)
  3. 函数预编译发生在函数执行前一刻(懒加载机制)

相关推荐：javascript学习教程、web前端开发视频教程

위 내용은 JavaScript 사전 컴파일 프로세스를 완전히 마스터하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript Object 局部变量 全局变量 var 形参 实参 JS console undefined 对象 作用域 变量提升
성명：
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
이전 기사：require 함수에 후크를 추가하는 방법을 심층적으로 학습하는 Node.js에 대한 간략한 분석다음 기사：require 함수에 후크를 추가하는 방법을 심층적으로 학습하는 Node.js에 대한 간략한 분석

관련 기사

더보기