You Don't Know JS: Scope & Closures (第4章: Hoisting)

时间：2018-10-04 09:48:41 阅读：185 评论：0 收藏：0 [点我收藏+]

标签：size com 函数表达式 closure width 一个 value block ccf

Chapter4: Hoisting

变量附加到哪个层次的scope，由它们在哪里和如何声明（let, var）来决定。

Function scope/Block scope都有相同的法则：任何变量在一个scope内声明，则这个变量附加到这个作用域上。

但有一个细节问题：当声明declarations出现在一个作用域中的不同的位置的时候，scope附加如何与declarations协作？

Chicken or The Egg?

temptation: a strong desire to have or do sth even thought you know you should not(邪念，诱惑人的事物)

当程序执行时，JS 代码被一行行，从上到下的顺序被解译。但有例外：

a = 2;

var a;

console.log( a );  输出2

可是：

console.log( a );

var a = 2;  

／／输出undefined

怎么回事？一个先有鸡还是先有蛋的问题。 the declaration是蛋， assignment是鸡。

The Compiler Strikes Again 编译器又罢工了

Engine实际是先编译JS code，在interprtes it之前。

编译器先声明变量，然后Engine在Scope中查询这个变量，如果发现就分配它。

技术分享图片

所以思考事情的最好的方式是：

所有的声明declarations，包括变量和函数，被首先处理processed。在你的代码被执行executed前。

var a = 2; 其实是2个statements: var a；和a = 2;

var a 是声明，在编译阶段被处理;

a = 2是assignment，会留在执行阶段execution phase处理。

所以，前2个例子就可以理解了：

//第一个例子：
var a;
a = 2;
console.log(a);   // 2

//第二个例子：
var a;
console.log(a);  ／／undefined
a = 2;

结论：先有蛋(declarations)，后有?? assignment.

只有声明自身会被hoisted!!
另外， hoisting是per-scope，只在声明所在的作用域内hoisting它。
函数表达式不是声明！！所以不会hoisting它！

foo(); // not ReferenceError, but TypeError!
var foo = function bar() {
    // ...
};
Uncaught TypeError: foo is not a function

解释：
var foo被提升hoisting，但它没有value。
使用foo()，就是认为foo的值是函数，用()执行函数。
typeof foo //undefined
所有，提示?，foo不是一个函数，不能使用()！
(表达式和声明的区分见第三章，Function as Scope)

另一个例子：

foo(); // TypeError ,foo is not a function
bar(); // ReferenceError, （bar是函数，但是）bar is not defined

var foo = function bar() {
    // ...
};

等同于：

var foo;

foo(); // TypeError
bar(); // ReferenceError

foo = function() {
	var bar = ...self...       
	// 证明作为表达式，bar 只在内部{ .. }被使用
}

Functions First

先函数声明hoisting，再变量声明hoisting。
多重／副本 var声明会被忽略。但可以重写函数声明。

foo(); // 3

function foo() {　　　　　　　　 　／／hoisting ,第一行
    console.log( 1 );
}

var foo = function() {　        ／／多重var声明，被忽略，不会hoisting。
    console.log( 2 );　　　　　　 ／／这里重写了foo函数。
};

function foo() {　　　　　　　　　 ／／hoisting，第二行　　　　
    console.log( 3 );
}
foo()   //输出2