JavaScript中你所不知道的"变量提升"

jinchanchan

我们所知的"变量提升"

· 经典案例与吐槽

这是每一个js的初学者都接触过的经典案例：

//我们眼中的代码

console.log(a); //输出为undefinedvar

a=1;

先打印，后执行？！

居然没有报错！！Σ(ﾟдﾟ;)

这反直觉的语言究竟是谁设计的!!!("▔□▔)/

· 出现了！是“变量提升”！太好了，我们有救了！

网课的老师或是教科书会告诉我们，这是因为发生了“变量提升”，变量的声明被提高到当前作用域的顶部了。实际的代码执行逻辑如下：

//实际上的代码执行逻辑

var a;

console.log(a);

a=1;

于是我们便骂骂咧咧的接受了这个概念，并在脑海里为它添加上一个名为“特殊情况，特殊处理”的标签。

但是，真的这样就好了么？这与在米共代码里写上一万个if分支有什么区别！这是对主包脑容量可耻的浪费！

· 反叛的号角已然吹响！

这是一个仅靠“变量提升”的思维所解决不了的例子：

//我们眼中的代码

console.log(a);//输出为函数 a()

var a = 1;

function a() { };

按照“变量提升”的思维，代码的执行逻辑如下

//“变量提升”思维下，代码执行的逻辑

var a;console.log(a);//输出为 undefined

a=1;

function a(){};

这是经典的错误，标准的零分！

要解决这个疑问，同学们需要知道究竟是怎样的机制存在，才能知道“变量提升”在这里不管用的原因。

我们所不知的背后机制

· JaveScript的预编译机制

众所周知，在js代码解释执行前，需要先对代码进行预编译。而js特殊的预编译机制就是导致“变量提升”现象出现的原因。

· 全局预编译

全局预编译的三个步骤

1.创建全局执行上下文 GO对象（Global Object）

2.在全局作用域中寻找声明对象的段落，以键值对{对象名：undefined}的形式添加进GO对象中。

3.在全局作用域中寻找声明函数的段落，以键值对{函数名：函数体}的形式也添加进GO对象中

在完成以上三个步骤之后才开始解释执行js代码，执行时在全局作用域下调用函数与变量时以GO对象中对应的值为准。

示例：

//原来的代码

console.log(a);

console.log(b);

var a;function b(){};

经过预编译后的代码逻辑：

// 事实上的代码逻辑

GO = {   

a: undefined,

b: function () { }

}

console.log(GO.a);

console.log(GO.b);

同理对上一部分疑问的解答：

//我们眼中的js代码

console.log(a);

var a = 1;

function a() { };

——————————————————————————

//实际上的执行逻辑：

GO=

{   

a:function (){},   

//函数a加入GO时，函数名与对象名相同，所以将属性名a对应的属性值修改了。

}

console.log(GO.a)//输出为函数 a()

于是我们用全局预编译的过程，成功解释了“变量提升”现象发生的原因，以及该说法的局限性。(=・ω・=)

新人报道

· 关于文章

本文仅适用于新手，更多是用来记录与分享up的学习历程，如果对初入js编程您很有所帮助，不放给up点上一个小小的赞啦(°▽°)八(°▽°)♪

· 关于文章可能存在的错误与不严谨处

还望大佬轻喷，如若您在百忙之中指出错误之处，up( ´(00)ˋ )顶礼膜拜

· 本文对js预编译的过程仅作部分阐述，欲知全貌如何，且听下回分解

· 关于up

是学生，前端在学，初学者，初踏入前端界(;¬_¬)

最后 合理利用自己每一分每一秒的时间来学习提升自己，不要再用 “没有时间” 来掩饰自己思想上的懒惰！趁年轻，使劲拼，给未来的自己一个交代！ 这里有内 u 测职位通道哦https://jsj.top/f/o38ijj！

作者：soda_yo

来源：稀土掘金