变量提升例子详解★★★★★
声明
该文部分代码和内容节选自菜鸟教程,仅用作个人学习,特此声明
一篇笔记理解变量提升
function jsFun6(){ //函数声明和函数表达式的区别
test1();//函数声明提升,在执行代码之前会先读取函数声明,不会报错
function test1(){//函数声明方式创建函数
alert("测试1");
}
//test2();报错,函数还不存在
console.log(test2)//不会报错,变量提升只是提升变量的声明,并不会把赋值也提升上来,输出undefined
var test2=function(){
alert("测试2");
};//使用函数表达式创建一个匿名函数(实际是以变量test3命名的函数)
test2();//不会报错,以创建函数
var test3=function(){
alert("测试3");
}();//加了括号立即执行
var test4 = 12;// !注意看,一旦变量被赋值后,将会输出变量
//函数提升优先级高于变量提升,所以函数先提升,然后变量提升覆盖之前的函数声明,表 现为变量
function test4() {
alert("测试4");
}
console.log(test4); //12
var test5="test5_1";
(function(){
//js中的变量搜索顺序:找变量时,先找局部变量,如果没有局部变量;再找全局变量。
alert(test5);//此时的test5为局部变量的提升,undefined
var test5="test5_2";
})();
}
首先 JS 在执行之前会有一个预编译过程,变量提升和函数提升就是发生在这里。
在执行 jsFun6 函数时首先会创建一个 AO 对象(Activetion Object 执行期上下文)。
AO{
}
然后会将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。
我们可以看到 jsFun6 函数里没有形参,但是有以下变量声明:
第10行的 var test2
第15行的 var test3
第19行的 var test4
第27行的 var test5
所以 AO 对象现在是这样:
AO{
test2:undefined
test3:undefined
test4:undefined
test5:undefined
}
然后会将实参的值传递给形参(当前没有形参所以略过)。
再找到函数声明作为AO的属性名,属性的值为函数声明的函数体(这里就是函数声明提升)。
我们可以看到 jsFun6 函数里有以下的函数声明:
第4行 function test1(){}
第22行 function test4(){}
这里的第 10 行和第 15 行是函数表达式不是函数声明。
所以 AO 对象现在是这样:
AO{
test2:undefined,
test3:undefined,
test4:function test4(){alert("测试4");},
test5:undefined,
test1:function test1(){alert("测试1");}
}
这里需要注意因为之前 AO 对象里已经有 test4 属性了所以 AO 对象里原来由变量声明时得到的 test4 属性会被现在函数声明的 test4 覆盖。
到这里预编译就完成了开始执行。
执行时会先去查找 AO 对象,如果没找到就会去 GO(Global Object)对象里查找(AO 对象相当于局部变量,GO 对象相当于全局变量)。
当执行第 3 行时在 AO 里找到 test1 执行,弹出提示框显示提示信息“测试1”。
第 4 行已经提升了所以可以略过,下面其他的类似行与此相同。
执行第 8 行时, 在 AO 里找到 test2,并作为函数运行,由于 AO 里的 test2 的值是 undefined 所以执行会报错。
第 9 行输出 test2 所以输出的是 undefined。
第 10 行将函数体赋值给 test2,当前 AO 变成:
AO{
test2:function(){alert("测试2");},
test3:undefined,
test4:function test4(){alert("测试4");},
test5:undefined,
test1:function test1(){alert("测试1");}
}
所以第 13 行执行时在 AO 里能找到 test2 并作为函数运行,弹出提示框显示提示信息“测试2”。
第 15 行由于用于赋值的函数体后面加了 () 变成立即执行函数所以函数会立即运行(这里会弹出提示框显示提示信息“测试3”)然后将返回值赋值给 test3,由于函数没有返回值所以是 undefined,也就导致了 AO 里的 test3 的属性值还是 undefined(大家可以在第18行输出一下 test3,会发现还是输出 undefined)。
第 19 行将 12 赋值给 test4,将原来 test4 的属性值覆盖了,AO 对象变为:
AO{
test2:function(){alert("测试2");},
test3:undefined,
test4:12,
test5:undefined,
test1:function test1(){alert("测试1");}
}
所以在第 25 行会输出 12(如果在这里再把 test4 作为函数去运行就会报错)。
第 27 行将 test5_1 赋值给 test5。
第 28 行是立即执行函数,会立即执行。
在执行之前会进行预编译所以这个函数又会创建一个 属于他自己的 AO 对象,为了区分我们将他标识为 AO2。
AO2{
}
然后将形参和变量声明作为 AO 对象的属性名,属性的值为 undefined。
AO2{
test5:undefined
}
然后进行实参形参统一,以及函数声明提升(由于没有所以略过)。
执行第 30 行时在 AO2 里找到了 test5,属性值为 undefined。
所以会弹出提示框显示提示信息 “undefined”。
执行第 31 行是将 test5_2 赋值给 test5。
所以 AO2 变成了:
AO2{
test5:test5_2
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!