前些日子在朋友的推薦下看了《你不知道的JavaScript（上）》扒寄，感覺真的獲益良多。文章內(nèi)容不多哪怔，才200頁(yè)不到宣蔚，可講的都是些在Js中的重難點(diǎn)，以及容易遇到的坑认境，完全理解后會(huì)讓你對(duì)Js有了新的認(rèn)識(shí)胚委，作為Js進(jìn)階書籍是非常不錯(cuò)的。
趁熱打鐵叉信，做些筆記記錄下亩冬，加深理解。
作用域
書的上半部分講了作用域和閉包，我也談?wù)勛约旱目捶ā?/p>
函數(shù)作用域
眾所周知硅急，ES5是沒有塊級(jí)作用域的覆享，只有全局作用域和函數(shù)作用域。而作用域之間可以互相嵌套营袜，內(nèi)層作用域可以訪問到外層作用域的變量（這其實(shí)也是閉包產(chǎn)生一個(gè)很重要條件）撒顿，舉個(gè)書中例子
var a = 3;
function foo(){
var b = a * 2;
function bar(c){
console.log(a , b ,c)
};
bar(b * 3);
}
foo();//3，6荚板，18
console.log(b);//Uncaught ReferenceError: b is not defined
在這個(gè)例子中可以看到凤壁，bar中其實(shí)并沒有a,b這兩個(gè)變量，但它會(huì)依次向上級(jí)作用域查找跪另，最終在foo中找到了b拧抖；在全局中找到了a，并將他們打印罚斗。相反徙鱼，我在全局中訪問b，則會(huì)報(bào)錯(cuò)针姿，因?yàn)橥鈱拥脑L問不了內(nèi)層的袱吆。
那么再看看這個(gè)例子
var a = 3;
function foo(){
b = a * 2;
function bar(c){
console.log(a , b ,c)
};
bar(b * 3);
}
foo();//3，6距淫，18
console.log(b);//6
這段代碼和第一段只有一點(diǎn)不同绞绒，就是b前面的var聲明沒有了。然而這時(shí)候我們?cè)L問b卻可以得到正確結(jié)果榕暇，是因?yàn)槲覀兛梢栽L問到內(nèi)部變量蓬衡？其實(shí)不是。
前面說過彤枢，內(nèi)層作用域可以訪問到外層作用域的變量狰晚，所以運(yùn)行foo時(shí)它會(huì)先自身里查找b，發(fā)現(xiàn)foo里沒有（因?yàn)闆]有聲明）缴啡，然后向上層壁晒，也就是全局作用域查找，也沒有业栅。這時(shí)秒咐，Js內(nèi)部會(huì)自動(dòng)在全局作用域中聲明b。（是的碘裕，是自動(dòng)聲明携取，也不會(huì)告訴你，這就坑的地方帮孔，會(huì)導(dǎo)致很多意想不到的結(jié)果）
所以雷滋，接下來就能夠成功給b賦值，并且在全局訪問到b，因?yàn)閎本來就在全局里惊豺。
PS：在嚴(yán)格模式下Js內(nèi)部是不會(huì)自動(dòng)聲明的,如果在剛才那段代碼前面加上
'use strict'燎孟，下面這句就會(huì)報(bào)錯(cuò),因?yàn)閒oo中有沒聲明的變量b
foo(b);//Uncaught ReferenceError: b is not defined
塊級(jí)作用域
語(yǔ)法上來說，塊級(jí)作用域就是指if/else/for/while語(yǔ)句里2個(gè)大括號(hào)之間的部分尸昧，前面說了ES5沒有塊級(jí)作用域揩页，這會(huì)導(dǎo)致很多莫名其妙的坑
function foo(){
for(var i = 0; i < 10;i++){
console.log(i); //0, 1, ..., 9
}
console.log(i); //10
}
foo();
如上面所示，你可能會(huì)以為第二句console.log(i)會(huì)報(bào)錯(cuò)烹俗，因?yàn)?code>i已經(jīng)不在for循環(huán)里面訪問了爆侣。其實(shí)不然，上面的代碼和下面的是等價(jià)的幢妄。
function foo(){
var i;
for(i = 0; i < 10;i++){
console.log(i); //0, 1, ..., 9
}
console.log(i); //10
}
foo();
也就是說兔仰，在for括號(hào)中聲明變量其實(shí)會(huì)先提升到當(dāng)前作用域中聲明，而不是屬于這個(gè)語(yǔ)法中的'塊'蕉鸳。
時(shí)代總是在進(jìn)步的乎赴，在ES6中已經(jīng)解決了這個(gè)問題。ES6中可以使用let,const來聲明具有塊級(jí)作用域的變量潮尝，并且不存在變量提升（下面會(huì)提到）
function foo(){
for(let i = 0; i < 10;i++){
console.log(i); //0, 1, ..., 9
}
console.log(i); //Uncaught ReferenceError: i is not defined
}
foo();
就是這樣榕吼，用let代替var之后，就只能在for循環(huán)代碼塊中訪問到i（也就是兩個(gè)大括號(hào)包裹的部分）勉失，在外面訪問則會(huì)報(bào)錯(cuò)羹蚣。
變量提升
不得不說，變量提升如果稍不注意的話也會(huì)引起很多坑乱凿。想起我之前做的那道筆試顽素，滿眼都是淚！徒蟆！
看個(gè)例子
var a = 1;
function foo(){
console.log(a);
a = 2;
console.log(this.a);
var b = 3;
console.log(b);
var a;
console.log(a);
}
foo();
大家覺得上面會(huì)依次打印出什么胁出？1, 2 ,3 ,undefined?
其實(shí)正確的打印結(jié)果是undefined, 1, 3, 2
在Js中，var聲明的變量會(huì)被提升到當(dāng)前作用域的最頂部執(zhí)行（函數(shù)聲明也是如此段审，并且優(yōu)先權(quán)大于變量聲明）划鸽。也就是說，上面這段代碼等價(jià)于
var a = 1;
function foo(){
var a,b;
console.log(a);
a = 2;
console.log(window.a);
b = 3;
console.log(b);
console.log(a);
}
foo();
- 所以第一個(gè)會(huì)打印出
undefined,因?yàn)?code>a聲明了卻沒有賦值戚哎； - 第二打印出來的
this.a跟this的綁定有關(guān)，在這里this是指window嫂用，所以打印出來的結(jié)果是全局變量a(書中第二部分會(huì)詳細(xì)說明this的綁定機(jī)制型凳，到時(shí)我也會(huì)寫篇筆記)； - 第三個(gè)最簡(jiǎn)單了嘱函，沒什么好講的甘畅；
- 第四個(gè)因?yàn)?code>a在前面被賦值成了
2，所以會(huì)打印出2。
書中關(guān)于作用域的部分還講了eval,with,try/catch,IIFE（立即執(zhí)行函數(shù)表達(dá)式）等內(nèi)容疏唾，這里就不寫那么多了蓄氧。
