思维导图

image.png

回顾作用域

在编译的代码生成阶段，编译器会创建在对应作用域创建变量，将2者关联起来。

先声明后赋值

讲到var声明的变量会进行“变量提升”，大家可能都觉得不稀奇，但是我这里还是写出来。

a = 2;
var a;
console.log(a); // 2

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

var声明的变量会进行“变量提升”

上面的代码会变成这样

var a;
a = 2;
console.log(a); // 2

var a; // 声明未赋值默认值是undefined
console.log( a ); // undefined
a = 2;

编译器先“动手”

总结： 变量和函数在内的所有声明都会在任何代码被执行前首先被处理。

var a = 2;
console.log( a ); // 2

上面代码可以看出

var a; // 编译器声明（先，不管在源代码的哪个位置）
a = 2;// 代码执行赋值
console.log( a ); // 2

函数提升

总结： 函数声明会被提升，但是函数表达式却不会被提升。

foo();
function foo() {
    console.log(a); // undefined
    var a = 2;
}

上面代码可以写成下面这样

function foo() {
    var a;
    console.log(a); // undefined
    a = 2;
}
foo();

函数表达式不用提升，函数表达式就是把一个函数赋值给一个变量，既然都是赋值，那么自然不会提升，只有声明才会提升。即使是具名的函数表达式，名称标识符在赋值之前也无法在所在作用域中使用。

foo(); // TypeError 这里foo是默认值undefined（var的原因）
bar(); // ReferenceError
var foo = function bar() {
    console.log(a); // undefined
    var a = 2;
}

函数优先

函数声明和变量声明都会被提升。但是函数会首先被提升，然后才是变量

foo(); // 1
var foo;
function foo() {
    console.log(1);
}
foo = function () {
    console.log(2);
};

上面代码foo()是1不是TypeError。所以函数声明是比变量声明更优先。

foo(); // TypeError: foo is not a function

function foo() {
    console.log(2);
};
var foo; // 被忽略

函数声明还是可以覆盖

foo(); // 3
function foo() {
    console.log(1);
}
var foo = function () {
    console.log(2);
};
function foo() {
    console.log(3);
}

总结 声明本身会被提升，而包括函数表达式的赋值在内的赋值操作并不会提升。