JS(八)预编译执行过程
2018-03-05 09:34
281 查看
写在最前面
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 }
第四步 : 在函数体里面找函数声明,
4000
值赋予函数体
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
相关文章推荐
- js 的执行过程
- js的解析与执行过程
- 浏览器命令行交互下js的执行过程
- 关于js的callback回调函数以及嵌套回调函数的执行过程理解
- js代码执行过程,js预编译,变量声明提升,函数体整体提升
- JavaScript运行过程中的“预编译阶段”和“执行阶段”
- js的执行过程
- JavaScript-深入理解JavaScript(一、预编译和执行过程)
- 记一次JS执行顺序引起的问题排查过程
- 看了Tomxu 的文章,特写下一个他的一个js程序的执行过程。
- jQuery.js执行过程分析
- js 的执行过程
- iOS学习笔记28-JS执行过程分析
- JS的预解析与执行过程详解
- JS的预编译和执行顺序 详析(及全局与局部变量)
- js中的this关键字,setTimeout(),setInterval()的执行过程
- JS运行过程,作用域和上下文的作用,自执行函数
- C C++ Java C# JS编译、执行过程的原理入门分析
- JS 的解析与执行过程
- JS的解析与执行过程