你不知道的js变量提升

所谓的js变量提升，笔者理解为就是执行上下文所引出的概念。那么我们需要着重来理解执行上下文，执行上下文理解了，所谓的js变量提升也就无师自通了。

执行上下文

首先我们先看一段代码：

console.log(a); //Uncaught ReferenceError: a is not defined

console.log(a);// undefined
var a ; 

console.log(a); // undefined
var a = 10;

第一段报错，a未定义，很正常，第二段和第三段代码输出undefined，说明已经知道了a 的存在。

在一段js代码真正运行之前， 运行环境会做一些准备工作，其中就包括对所有变量的声明提前，而赋值是在执行赋值语句的时候执行的。

函数声明赋值

console.log(aa) // ƒ aa () {console.log("a")}
function aa () {
    console.log("a")
}

以这种方式定义函数时，在代码执行前，函数声明和函数体都会提升。

请看这段代码，函数的声明定义是通过函数表达式的方式进行的

console.log(aa) // undefined
var aa = function () {
    console.log("a")
}

此时aa只是一个普通的变量，赋值是在执行赋值语句的时候执行的。

function aa () {
    console.log("a")
}
var aa = 'cc'
console.log(aa) // cc  

以上代码这种情况，同名函数变量被同名普通变量赋值覆盖，这个没有什么可说的。

this赋值

在浏览器环境下，一段代码执行前（全局作用域下），准备工作会将this赋值为window

console.log(this)//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

因此我们总结一下：

在执行一段js代码之前,执行环境在准备工作中需要完成下列任务：

• 变量声明，函数表达式声明提前，默认值为undefined
• this 直接赋值为window(浏览器)
• 函数声明和函数体都提前

以上这3种准备情况，我们称为代码执行前的执行上下文或执行上下文环境。

一段代码分为三种情况，全局代码，函数体，eval(可以直接忽略，不建议使用，具体原因请自行google)

通过以上的学习理解，js变量提升，应该引刃而解了。