写在最前面
JS运行三部曲
- 第一步：语法分析
- 第二部：预编译
- 第三部：解释执行
预编译
语法分析也叫语义分析，语法分析他是通篇执行的一个过程，比如我写了好多行代码，这些代码在执行的时候他是解释一行执行一行，但是在执行之前系统执行的第一步它会扫描一遍，看看有没有低级的语法错误，比如少些个括号，带个中文之类的，它会通篇扫描一遍，但是不执行，这个通篇扫描的过程叫语法分析，通篇扫描之后它会预编译，然后在解释一行执行一行，也就是解释执行
预编译前奏
- imply global 暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
- eg : a = 123;
- eg : var a = b = 123;
- 一切声明的全局变量,全是window的属性
- 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是打印出undefined;
注意,这两句话不是万能的
比如
function a(a){
var a = 123;
var a = function(){
}
a();
}
var a = 123;
这个就不是那两句话可以解决的
在解释上面的之前,要先用弄什么是impiy global
- imply globa:暗示全局变量: 即任何变量,如果变量未经声明就赋值,自变量就位全局对象所有
- eg : a = 123;
- eg : var a = b = 123;
a = 10;
console.log(a);//打印10
然后在window属性上有了a
window.a//10
var b = 20;
//你声明了window也有b
window就是全局的域
预编译正式
- 创建AO对象
- 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
- 将实参值和形参统一
- 在函数体里面找函数声明,值赋予函数体
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 object 也就是作用域,也叫执行期上下文
AO{
}
第二步 : 找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
AO{
a : undefined
b : undefined
}
第三步 : 将实参值和形参统一
AO{
a : 1;
b : undefined
}
第四步 : 在函数体里面找函数声明,值赋予函数体
AO{
a : 1,
b : undefined,
//b是是函数表达式,不是函数声明,所以不变
//然后有a了 有b了,然后将这个函数声明的名作为AO对象挂起来
d :
}
//然后值赋予函数体,也就是把a和b的属性值,变成函数体
//覆盖掉a 和b的的属性值
//也就变成下面的
//因为第四步的优先级最高
AO{
a : function a () {}
b : undefined,
//b是是函数表达式,不是函数声明,所以不变
d : function d () {}
}
至此预编译过程结束,开始执行代码,执行函数
然后我们在看上面的例子
//预编译结果
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 Global Object,其他一样
GO === window
那么问题来了是GO先还是AO先
答案是先执行GO
网友评论