js变量提升

例1

var a = 100;
function f() {
    console.log(a);
    if (!a) {
        var a = 200;
    }
    console.log(a);
}
f()
// undefined
// 200

例2

var a = 100;
function f() {
    a = 200;
    return ;
    function a() {
        
    }
}
f();
console.log(a);
// 100

如果你习惯了强类型语言的编程方式，那么看到上述输出结果你肯定会大吃一惊。

js 作用域

我们来看一下 C++ 的一个例子：

#include <iostream>

using namespace std;

int main()
{
	int x = 100;
	cout << x << endl;
	if (1)
	{
		int x = 200;
		cout << x << endl;
	}
	cout << x << endl;
	return 0;
}
// 100
// 200
// 100

再来看一个 js 的例子：

var a = 100;
console.log(a);
if (true) {
    var a = 200;
    console.log(a);
}
console.log(a);
// 100
// 200
// 200

if 代码块中的变量覆盖了全局变量。那是因为 js 只有全局作用域和函数作用域，没有块作用域。块内的变量 x 影响到了全局变量 x 。

js 实现块级作用域效果

function f() {
    var x = 100;
    console.log(x);
    if (true) {
        (function() {
            var x = 200;
            console.log(x);
        }());
    }
    console.log(x);
}
// 100
// 200
// 100

其本质上利用了 js 的函数作用域来模拟实现块级作用域。

Hoisting in js

在 js 中，变量进入一个作用域有以下方式：

• 变量定义： var a
• 函数形参：函数的形参存在于作用域中—— function f(a, b) {}

在代码运行前，函数声明和变量定义通常会被解释器移动到其所在作用域的最顶部。如下：

function f() {
    test();
    var a = 100;
}

上面代码被解释器解释后，将会变成如下形式：

function f() {
    var a;
    test();
    a = 100;
}

hoisting 只是将变量的定义上升，但变量的赋值并不会上升。

再来看一个例子：

function f() {
    f1();
    f2();
    var f1 = function f1() {
        console.log("error");
    };
    function f2() {
        console.log("normal");
    }
}
f();
// TypeError: f1 is not a function
// normal

首先 var f1 会上升到函数顶部，但是此时 f1 为 undefined ，所以执行报错。但对于函数 f2 ，函数本身也是一种变量，存在变量上升的现象，也会上升到函数顶部，所以 f2() 能顺利进行。

回顾

例1等同于如下代码：

var a = 100;
function f() {
    var a;
    console.log(a);
    if (!a) {
       a = 200;
    }
    console.log(a);
}
f()
// undefined
// 200

例2等同于如下代码：

var a = 100;
function f() {
    function a() {
    }
    a = 200;
    return ;   
}
f();
console.log(a);
// 100

参考

• Javascript作用域和变量提升