Variable Hosting 变量提高

为何要讲变量提高，首先看一个小测试，若是你答错了，那就说明你须要了解一下变量提高的机制

0 测试

看看下面分别输出多少？

console.log(x); // -> ?
var x = 5;
console.log(x); // -> ?
console.log(y); // -> ?

答案是：

第二个log为5，能够理解，第一个undefined也能够理解，为何最后的y是error呢？

由于Javascript engine 在运行代码前，会从新调整代码的结构，提高了变量x的声明，上面的代码在运行前结构大致变成了这样

var x;
console.log(x); // -> undefined
x = 5;
console.log(x); // -> 5
console.log(y); // -> Uncaught ReferenceError: y is not defined

 

1 变量提高

只有变量声明如var = x会被提高的代码的顶部，变量的赋值如var x = 10不会被提高；

没有使用变量声明关键字如var，let, const等的变量声明也不会被提高

console.log(x);
console.log(y);

var x = 'This will log "undefined"!';
y = 'This will throw an error :(';

 

2 函数提高

函数提高有点不一样，有两种定义函数的方式：函数表达式和函数声明

函数表达式： 相似变量提高，fn被提高到代码顶部，而且值为undefined，以后fn被赋值函数

var fn = function() {
    // do something...
}

 

函数声明:  整个代码块都会被提高，变量fn就是函数自己，会被提高到最顶部，甚至在变量声明以前

function fn() {
    // do something...
}

 

示例：

fnDeclaration(); // -> This works!
fnExpression(); // -> Uncaught TypeError: fnExpression is not a function

function fnDeclaration() {
    console.log('This works!');
}

var fnExpression = function() {
    console.log("This won't work :(");
}

 

3 示例

变量提高前的代码

var a = 123;
var b = 'abc';

var fnExpression = function() {
    var c = 456;
    var d = 'def';
}

function fnDeclaration() {
    var e = 789;
}

 

变量提高后的代码

function fnDeclaration() {
    var e;
  
    e = 789;
}

var a;
var b;
var fnExpression;

a = 123;
b = 'abc';

fnExpression = function() {
    var c;
    var d;
  
    c = 456;
    d = 'def';
}

 

 

总结：

先声明老是对的，函数提高有点意思，函数表达式和变量声明很像，函数声明才最靠前

 

参考资料：《Step Up Your JS: A Comprehensive Guide to Intermediate JavaScript》