js函数预编译的具体步骤,很详细
程序员文章站
2022-07-02 13:26:53
预编译的四个步骤预编译四步曲1、创建AO对象(Activation Object)(执行期上下文:函数产生的存储空间库)2、找形参和变量声明,将变量和形参名作为AO属性名,值为undefined3、将实参值和形参统一4、在函数体里面找函数声明,值赋予函数体这里有个小细节:函数声明与函数表达式区别:function a(){} //这是函数声明var a=function a(){} //这是函数表达式具体的过程是这样://不同地方的 console.log(a);...
预编译的四个步骤
预编译四步曲
1、创建AO对象(Activation Object)(执行期上下文:函数产生的存储空间库)
2、找形参和变量声明,将变量和形参名作为AO属性名,值为undefined
3、将实参值和形参统一
4、在函数体里面找函数声明,值赋予函数体
这里有个小细节:函数声明与函数表达式区别:
function a(){} //这是函数声明
var a=function a(){} //这是函数表达式
具体的过程是这样:
//不同地方的 console.log(a); 输出结果是什么?
function fn(a){
console.log(a); //在AO里找值--->输出 function a() {}
var a = 123; //预编译将 var a;提升上去了,执行 a = 123;修改AO中a的值
console.log(a); //输出 123
function a() {} //预编译读过,不再读
console.log(a); //输出 123
var b = function() {} //将函数表达式赋给AO中的b,b的值改为function () {}
console.log(b); //输出funtion () {}
function d() {}//AO中已读不再读
}
fn(1);
//预编译发生在函数执行的前一刻;预编译也发生在全局,第一步为创建GO对象;
GO(Global Object) === window
执行结果为:
第一步:创建AO对象:我们隐式的在函数中创建了一个AO的对象来盛放函数中的变量,此时对象中并没有值;
第二步:找形参和变量声明,将变量和形参名作为AO属性名,重复的只写一个即可,值为undefined;
第三步:将实参值和形参统一,实参1传给a,更改a的值为1
第四步:在函数体里面找函数声明,值赋予函数体,这里函数声明有function a() {} 、 function d() {},注意: var b = function() {}是函数表达式,不是函数声明。
最后:在进行完预编译后此时若执行函数则会以AO为基础对函数中的变量进行赋值,预编译读过的语句,就不用再次读,执行的时候直接从AO里取值。读取赋值语句,配合AO完成赋值过程。
想了一下,还是追加几个练习比较妥当~
练习一:
function test(a,b) {
console.log(a); //1
c = 0; //将c=0赋给AO中的c
var c ;
a = 3 ; //将a=3赋给AO中的a
b = 2 ; //将b=2赋给AO中的b
console.log(b); //2
function b(){ }//预编译已读不再读
function d(){ }//预编译已读不再读
console.log(b); //2
}
test(1);
预编译过程:
第一步:创建AO对象
第二步:AO{
a:undefined
b:undefined
c:undefined
}
第三步:AO{
a:1
b:undefined
c:undefined
}
第四步:AO{
a:1
b:b(){ }
c:undefined
d:d(){ }
}
执行结果为:
2.练习二:
function test(a,b){
console.log(a); // function a(){}
console.log(b); //undefined
var b =234; //将b=234赋给AO中的b
console.log(b); //234
a=123; //将a=123赋给AO中的a
console.log(a); //123
function a(){} //预编译已读不再读
var a;
b=234; //将b=234赋给AO中的b
var b = function(){}//将函数表达式赋给AO中的b
console.log(a); //123
console.log(b); //function(){}
}
test(1);
预编译过程:
第一步:AO{}
第二步:AO{
a:undefined
b:undefined
}
第三步:AO{
a:1
b:undefined
}
第四步:AO{
a:function a(){}
b:undefined
}
执行结果:
练习到这里,大家肯定对js函数预编译过程比较清楚了,希望我的分析能够帮助到大家,欢迎大家指正。
本文地址:https://blog.csdn.net/weixin_44164982/article/details/107314659