Willdark

每一个不曾起舞的日子,都是对生命的辜负

JavaScript预编译,看这一篇就够了

<前言>在做前端的笔试题的时候,遇到了不少对预编译方面的考点,所以看了渡一教育的视频,把一些知识点记下来,也分享给大家。

深入浅出预编译
首先来看js执行过程
1)语法分析(通篇扫描看有没有语法错误,不执行)
2)预编译(函数声明整体提升,变量只是声明提升)

一 、预编译四部曲(函数里面的预编译)

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(){}
}
fn(1);

用以上例子演示预编译过程
(1)创建AO对象 Activity Object (执行期上下文)
AO{}

(2)找函数里面的形参和变量声明,把变量和形参名作文AO属性名,值为undefined
2.1)先找到形参a
AO{a:}
2.2)再找到变量声明a,a已存在AO对象中,不再写入
2.3)找到变量声明b,写入AO对象
AO{a:b:}
2.4)值为undefined
AO{a:undefined,b:undefined}

(3)将实参值和形参统一
3.1)找到实参fn(1),把a的值赋值为1
AO{a:1,b:undefined}

(4)在函数体里面找函数声明,值赋予函数体
4.1)找到函数声明,把函数声明的名作为AO对象的属性名,照样挂起来
4.2)找到函数声明a,a已存在AO对象中,不再写入
4.3)找到函数声明d,写入AO对象
AO{a:1,b:undefined,d:undefined}
4.4)把函数体整体作为值,赋予相对应的属性名里面
AO{a:function a(){},b:undefined,d:function d(){}}
–到此AO对象创建完成

3)执行语句
(1)cosole.log(a);//从AO对象查找并输出a –>function a(){}
(2)var a = 123;//因为在预编译的第二步里var a;已经变量声明了,所以不再执行
2.1)执行赋值语句a=123;写入到AO对象中
AO{a:123,b:undefined,d:function d(){}}
(3)console.log(a);//从AO对象查找并输出a –>123
(4)function a(){}在预编译时已经被提升,不再执行
(5)console.log(a);//从AO对象查找并输出a –>123
(6)var b = function(){};//变量已经声明完成,把b的值写入OA对象中
AO{a:123,b:function(){},d:function d(){}}
(7)console.log(b);///从AO对象查找并输出b –>function(){}
(8)function d(){}在预编译时已经被提升,不再执行
–以上是一个函数完成的预编译执行句子的演示

二、在全局范围内的预编译
(1)创建GO对象 Global Object === window
(2)找变量声明,把变量作为GO属性名,值为undefined
(3)找函数声明,声明的函数名作为GO的属性名,函数整体赋予属性名
–全局范围和函数范围的预编译过程

console.log(test);
function test(test){
console.log(test);
var test = 234;
console.log(test);
function test(){}
}

test(1);
var test = 123;

1)创建GO对象–>找变量声明
GO{test:undefined,}

2)找函数声明–>声明的函数名作为GO属性名–>函数体赋值
GO{test:function test(test){//…}}

3)执行语句console.log(test);//输出test函数整体。

4)执行test(1);创建AO对象
AO{test:function test(){},}

5)执行函数里的语句
console.log(test);//从AO里面找,输出function test(){},若AO没有往上一层查找
AO{test:234,}
console.log(test);//234

6)执行函数下的语句,更新GO对象
GO{test:123,}

–再看一个综合例子

function test(){
console.log(b);
if(a){
var b = 100;
}
console.log(b);
c = 234;
console.log(c);
}
var a;
test();
a = 10;
console.log(c);

(1)生成GO对象
GO{a:undefined,test:function test(){…}}

(2)生成AO对象
AO{b:undefined,}

(3)执行函数内语句,更新GO对象
GO{…,c:234}

(4)执行函数下的语句,更新GO对象
GO{a:10,test:…,c:234}

<尾声>至此预编译的内容笔记就写到这里了,写的不好的地方希望大家可以和我深入探讨,谢谢大家。

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注