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也就是全局中,这样构成一环扣一环的锁链,称为作用域链,关于作用域链的详解,请看下篇。
个人笔记,如有雷同,纯属巧合。