JavaScript拾遗 · 变量提升(声)

ES6之前，JavaScript的变量提升机制会将var与function定义的变量提升到它所在的作用域最开始的部分，且var所定义的变量只会被提前声明，而function所定义的方法既会被提前声明，也会被提前定义。下面依次举例说明。

0x01.var 关键字

使用var所定义的变量会被提前到当前作用域的开始部分进行声明，而赋值操作则留在原来的位置。下面例子说明了使用var定义的变量在不同的作用域下变量提升的结果。

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

function test(){
    console.log(b); // undefined
    var b = 2;
    console.log(b); // 2
}

test();

上面这一段代码中，第一个console.log(a)会输出undefined而不会直接抛出Error：a is not defined，第二个console.log(a)则正确输出a的值。执行test方法时，局部变量b的输出结果也与全局变量a相似，其原因就是JavaScript的解释器在执行代码时会将变量a与局部变量b的声明语句自动提升到该变量所处的作用域的最前端，按照下面的逻辑顺序执行：

var a;
console.log(a); // 此时a仅仅被定义而未被赋值，所以输出undefined
a = 1;
console.log(a); // 此时的a已经有值

function test(){
    var b;
    console.log(b); // 此时b仅仅被定义而未被赋值，所以输出undefined
    b = 2;
    console.log(b); // 此时的b已经有值
}

test();

0x02.function 关键字

使用function所定义的方法会被整个提升到当前作用域的最前端，下面举例说明：

console.log(test); // function test(){ console.log('test'); }

function test(){
    console.log('test');
}

上面这一段代码控制台打印出了整个方法体的字符串，其原因就是使用function所定义的方法在JavaScript的解释器执行过程中将会提升到当前作用域的最前端来声明和定义，这里和使用var关键字有不同，var关键字仅仅只会提升变量的声明，下面的代码是真实的执行顺序：

function test(){
    console.log('test');
}

console.log(test); // function关键字将整个函数体的声明与定义提升到了当前作用域的最前端，故控制台输出了整个函数体字符串。

0x03.使用function与var定义函数的对比

在之前使用JavaScript中我们通常有两种定义函数的方式，如下：

function test1(){}

var test2 = function(){}

按照之前所说var与function在对所定义的变量和方法进行提升时有些许不一样的地方，所以根据变量提升原则，两种定义方式的方式所带来的结果也是不一样的，使用function定义的方法在定义之前调用不会受到影响，而使用var定义的方法在定义之前进行调用则解释器会报错，如下：

test1(); // 可以顺利执行并打印出use keyword function

test2(); // 控制台抛出错误信息test2 is not a function

function test1(){
    console.log('use keyword function');
}

var test2 = function(){
    console.log('use keyword var');
}

 然后我们将代码还原为变量提升后的逻辑顺序再看，就能发现会造成结果不同的原因，正是因为使用function关键字定义的方法会被解释器整个提升到作用域最前端，而使用var定义的变量test2仅仅将定义部分提升到最前端，由于JavaScript弱类型的语言特性，此时的test2不是函数类型，故调用test2解释器会给出test2 is not a function的错误信息，所以在我们的日常开发中，为了减少BUG出现的几率，应当少使用或不使用var关键字来定义方法。

function test1(){
    console.log('use keyword function');
}

var test2;

test1(); // 此时test1方法已经被声明且定义，可以顺利执行

test2(); // 此时test2被声明，但未被定义，test2此时为undefined，还不能够被执行

test2 = function(){
    console.log('use keyword var');
}

 0x04.来自MDN的解释

变量提升（Hoisting）被认为是， Javascript中执行上下文 （特别是创建和执行阶段）工作方式的一种认识。您在 ECMAScript® 2015 Language Specification 之前的JavaScript文档中找不到变量提升（Hoisting）这个词。

不过，需要注意的是，这个概念可能产生一点点误解 。

例如，从概念的字面意义上说，“变量提升”意味着变量和函数的声明会在物理层面移动到代码的最前面，但这么说并不准确。实际上变量和函数声明在代码里的位置是不会动的，而是在编译阶段被放入内存中。

从上面MDN对变量提升的官方解释来看，变量提升并不会改变代码的物理位置，而将这个过程放在编译阶段放入内存，所以我们在开发者工具中看JavaScript代码是无法看到变量提升后的代码的。

0x05.参考资料

MDN web docs——变量提升