JavaScript 作用域相关

随手刷SF，看到一篇译文《你想知道的关于 JavaScript 作用域的一切》，着实写得不错，推荐给各位小伙伴看看。

现在组内的很多Presenter是通过这种私有作用域+公开接口的方式实现的，读过此文应该能够有进一步的了解。

不过，有一点点小细节需要补充，那就是JS的变量提升和函数提升。

这篇在函数作用域一节中提及：

JavaScript中所有的作用域在创建的时候都只伴随着函数作用域，循环语句像for或者while、条件语句像if或者switch都不能够产生新的作用域。新的函数 = 新的作用域 这就是规则。

试试看执行这段代码：

for (var i = 0; i < 5; i++) { }
console.log(i);

如果在C++、 Java等语言中，这里连编译都通不过，因为这里构造了一个块作用域，变量i仅在这个for循环中生效。
但在JS中，却可以得到i的值，这是为什么呢？

变量声明提升

实际上，在JS中，声明语句会被自动提升到该函数或变量所在区域的最顶部。例如：

console.log(x); // undefined
var x = 3;
console.log(x); // 3

在执行的时候，它实际上被解释成了：

var x;
console.log(x); // undefined
x = 3;
console.log(x); // 3

x变量的声明被提升了，赋值语句仍停留在原处，因此第一次能够打印出x是个undefined，第二次才会打出x的值。

因此，如果需要重复初始化变量，一定要显式声明它的初始值，而不能只靠var语句，否则就会出现问题：

var x;
x = 3;
console.log(x); // 3
var x;
console.log(x); // 3

这段代码执行时，两句x的声明都被提到了最前，因此第二次依然能够打印出原先的值：

var x;
var x;
x = 3;
console.log(x); // 3
console.log(x); // 3

函数声明提升

对于函数的声明，JS也会进行提前，但这仅限于以function funName()方式声明的函数。例如：

console.log(typeof fun); // undefined
fun(); // TypeError: undefined is not a function
var fun = function() { console.log("success"); };
console.log(typeof fun); // function
fun(); // success;

console.log(typeof fun2); // function
fun2();  // success
function fun2() { console.log("success"); }

console.log(typeof fun3); // undefined
fun3(); // TypeError: undefined is not a function
console.log(typeof fun4); // undefined
fun4(); // TypeError: undefined is not a function
var fun3 = function fun4() { console.log("success"); };
console.log(typeof fun3); // function
fun3(); // success
console.log(typeof fun4); // undefined
fun4(); // TypeError: undefined is not a function

声明的优先级

JS中变量是动态类型的，那如果一个变量名先后被声明为函数或对象时，哪个更优先呢？

var x, y, z;
console.log(typeof x); // function
console.log(typeof y); // function
console.log(typeof z); // function

function x() {};
x = 3;
console.log(typeof x); // number

y = 5;
console.log(typeof y); // number
function y() {};

z = {};
console.log(typeof z); // object
function z() {};

运行上述代码可以发现，函数的声明优先级总是高于变量的声明，不论代码中的顺序如何。这可能引发一个有趣的现象：

var x = 10;
function x() {};
x(); // TypeError: number is not a function

因为执行时变成了这样：

function x() {};
var x;
x = 10;
x(); 

函数声明和变量声明都提前了，初始化的位置却没有变！是不是很神奇……请大家好好遵循命名规范，不要写出这样纠结的代码喔……

变量的优先级

说完了声明，我们来说说取值的优先级。直接跑代码吧：

var a = 3, b = 5, c = 8, d = 9;
console.log(typeof a, b, c, d); // number 5 8 9
function fn(a, b, c){
    console.log(typeof a, b, c, d); // function 2 undefined 9
    function a(){};
    var b = 10;
}
fn(1, 2);

高下立见：函数局域变量>形参>全局变量。

以上，仅作为一点小小的补充，希望大家在开发过程中多多留意，不要掉到坑里去喔……