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

我们所知的"变量提升"

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

js 复制代码

//我们眼中的代码

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

先打印，后执行？！

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

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

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

js 复制代码

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

var a;
console.log(a);
a=1;

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

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

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

js 复制代码

//我们眼中的代码

console.log(a);//输出为函数 a()
var a = 1;
function a() { };

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

js 复制代码

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

var a;
console.log(a);//输出为 undefined
a=1;
function a(){};

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

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

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

全局预编译的三个步骤

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

示例：

js 复制代码

//原来的代码

console.log(a);
console.log(b);
var a;
function b(){};

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

js 复制代码

// 事实上的代码逻辑

GO = {
    a: undefined,
    b: function () { }
}
console.log(GO.a);
console.log(GO.b);

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

js 复制代码

//我们眼中的js代码

console.log(a);
var a = 1;
function a() { };

js 复制代码

//实际上的执行逻辑：

GO=
{
    a:function (){},
    //函数a加入GO时，函数名与对象名相同，所以将属性名a对应的属性值修改了。
}

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

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

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

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

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