今天用了大量时间复习了作用域、预编译等等知识
看了非常多博文,翻了翻曾经看过的书(好像好多书都没有讲预编译)
发现当初认为自己学的非常明确,事实上还是存在一些思维误区
(非常多博文具有误导性)
今晚就整理了一下凌乱的思路
先整理一下预编译的知识吧,日后有时间再把作用域具体解说一下
大家要明确。这个预编译和传统的编译是不一样的(能够理解js预编译为特殊的编译过程)
javascript是解释型语言,
既然是解释型语言,就是编译一行。运行一行
传统的编译会经历非常多步骤,分词、解析、代码生成什么的
日后有时间再给大家科普
以下就给大家分享一下我所理解的JS预编译
JavaScript运行三部曲
脚本运行js引擎都做了什么呢?
- 语法分析
- 预编译
- 解释运行
在运行代码前。还有两个步骤
语法分析非常easy。就是引擎检查你的代码有没有什么低级的语法错误
解释运行顾名思义便是运行代码了
预编译简单理解就是在内存中开辟一些空间,存放一些变量与函数
理解了预编译对大家理解作用域相同有帮助
JS预编译什么时候发生
我当初思维误区也发生在这里
预编译究竟什么时候发生
希望大家不要让上面的运行过程让你产生误会,
误以为预编译只发生在script内代码块运行前
这倒并没有错
预编译确确实实在script代码内运行前发生了
可是它大部分会发生在函数运行前
JS预编译实例
举例前。先来思考一下这几个概念:
- 变量声明 var…
- 函数声明 function…
<script>
var a = 1;// 变量声明
function b(y){//函数声明
var x = 1;
console.log(‘so easy‘);
};
var c = function(){//是变量声明而不是函数声明!!
//...
}
b(100);
</script>
<script>
var d = 0;
</script>
让我们看看引擎对这段代码做了什么吧
- 页面产生便创建了GO全局对象(Global Object)(也就是大家熟悉的window对象)
- 第一个脚本文件载入
- 脚本载入完成后。分析语法是否合法
- 開始预编译
- 查找变量声明,作为GO属性。值赋予undefined
- 查找函数声明。作为GO属性,值赋予函数体
//伪代码
GO/window = {
//页面载入创建GO同一时候。创建了document、navigator、screen等等属性。此处省略
a: undefined,
c: undefined。
b: function(y){
var x = 1;
console.log(‘so easy‘);
}
}
- 解释运行代码(直到运行函数b)
//伪代码
GO/window = {
//变量随着运行流得到初始化
a: 1,
c: function(){
//...
},
b: function(y){
var x = 1;
console.log(‘so easy‘);
}
}
- 运行函数b之前。发生预编译
- 创建AO活动对象(Active Object)
- 查找形參和变量声明,值赋予undefined
- 实參值赋给形參
- 查找函数声明,值赋予函数体
//伪代码
AO = {
//创建AO同一时候。创建了arguments等等属性。此处省略
y: 100,
x: undefined
}
- 解释运行函数中代码
- 第一个脚本文件运行完成。载入第二个脚本文件
- 第二个脚本文件载入完成后,进行语法分析
- 语法分析完成。開始预编译
- 反复最開始的预编译步骤……
大家要注意,
预编译阶段发生变量声明和函数声明。没有初始化行为(赋值),匿名函数不參与预编译
唯独在解释运行阶段才会进行变量初始化
嗯~最后收一下尾
总结
预编译(函数运行前)※
1. 创建AO对象(Active Object)
2. 查找函数形參及函数内变量声明。形參名及变量名作为AO对象的属性,值为undefined
3. 实參形參相统一,实參值赋给形參
4. 查找函数声明,函数名作为AO对象的属性,值为函数引用
预编译(脚本代码块script运行前)
1. 查找全局变量声明(包含隐式全局变量声明。省略var声明),变量名作全局对象的属性,值为undefined
3. 查找函数声明。函数名作为全局对象的属性,值为函数引用
理解了预编译对理解提升行为,this指向,作用域及性能等问题都有非常大帮助
以后我也会总结这些问题