JavaScript预编译环节

JS运行三部曲

1.语法分析

2.预编译

3.解释执行

 

预编译过程发生在函数执行的前一刻

预编译结果：函数声明整体提升，变量声明提升。

1.无论你的函数写在哪，系统在预编译完成后总是会把这些个函数提到逻辑的最前面。

2.变量声明提升，这里需要注意，是变量的声明提升。

eg：var a = 123；  //这叫变量声明+变量赋值

预编译只会把var a 提升至最前面。

故 console.log(a)

var a = 123;

这段代码只会输出undefined

 

一.imply global （暗示全局变量）

即任何变量，未经声明就赋值，此变量即为全局所有（归window所有）

 

二.一切声明的全局变量，全是window'的属性。

即 var a = 123；--> window.a=123；

window就是全局的域。

接下来详细讲解预编译过程:

1.创建AO对象（执行期上下文）-->Activation Object

2.找到形参和变量声明，将形参名和变量名作为AO的属性名，值为undefined

3.将实参值与形参统一

4.在函数体里找到函数声明，将函数名作为AO对象的属性名，值为函数体。

例子：

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

fn(1);

 

第一步：AO{

a：undefined,

b:undefined,

}

第二步：实参值与形参统一

AO{

a:1,

b:undefined,

}

第三步：找到函数声明，并将其作为AO对象的属性名，值为函数体。

AO{

a：function a(){},

b:undefined,

d:function d(){},

}       //注意，b叫函数表达式，不叫函数声明

至此预编译过程结束。

接下来我们开始执行函数，函数执行的变量都是从AO对象中去寻找的，而非表面看上去那么简单，所以，第一条

console.log（a）并不是打印123，时刻切记JavaScript是单线程解释性语言，解释一句执行一句。

为了方便读者我把代码再复制下来打上注释更方便读者能看懂。

function fn(a) {
    console.log(a);         //系统从AO对象里寻找到a的值为function a(){},故打印function a(){}
    var a = 123;            //系统将123值赋给a，于是AO对象中原本的a是function a(){},现在被123覆盖
    console.log(a);        //故这条语句打印123
    function a() {}         //这块需要看吗，不需要，预编译已经将函数声明整体提升了，跳过
    console.log(a);       //依旧打印123，因为AO对象中的a并没有改变
    var b = function() {}  //原来的AO中b是undefined，现在将函数声明赋给b
    console.log(b);    // 毫无疑问，肯定打印function(){}
    function d() {}    //同function a(){}
}
fn(1);

除此之外，预编译不止发生在函数里，他还发生在全局噢。

由于全局没有参数，故与函数的预编译环节少了一些

所以全局的预编译环节：

1.创建GO对象（执行期上下文）-->Global Object

2.找到变量声明，将变量名作为GO的属性名，值为undefined

3.在全局里找到函数声明，将函数名作为GO对象的属性名，值为函数体。

可以看到全局生成的并不是AO，而是GO，而GO==window

例：

var a = 123 ;
function a(){}
console.log(a);//   123

当全局变量和函数体同时存在时，先生成GO，然后在函数执行前一刻生成AO，函数执行时寻找变量先从自己的AO中寻找，如若没有，那么便从自己的父级AO寻找，一直寻找到GO也就是全局中，这样构成一环扣一环的锁链，称为作用域链，关于作用域链的详解，请看下篇。

 

个人笔记，如有雷同，纯属巧合。