詞法作用域
定義在詞法階段的作用域更啄。簡(jiǎn)單來(lái)說(shuō)就是函數(shù)祭务，對(duì)象在定義時(shí)就決定好的執(zhí)行范圍,由代碼書(shū)寫(xiě)的地方?jīng)Q定一切。
詞法欺騙
但是柳沙，也可以通過(guò)一定的語(yǔ)法來(lái)改寫(xiě)這個(gè)先天決定的作用域赂鲤。
-
eval
接受的字符串參數(shù)就好像是書(shū)寫(xiě)在eval位置上的代碼一樣
function foo(str, a) {
eval( str ); // 欺騙！
console.log( a, b );
}
var b = 2;
foo( "var b = 3;", 1 ); // 1, 3
-
with
會(huì)首先在with傳入對(duì)象里面查詢同名屬性
var obj = {
a: 1,
b: 2,
c: 3
};
// 單調(diào)乏味的重復(fù)"obj"
obj.a = 2;
obj.b = 3;
obj.c = 4;
// 簡(jiǎn)單的快捷方式
with (obj) {
a = 3;
b = 4;
c = 5;
}
注意：如果代碼中大量使用eval(..)或with柱恤，那么運(yùn)行起來(lái)一定會(huì)變得非常慢数初。無(wú)論引擎多聰明，試圖將
這些悲觀情況的副作用限制在最小范圍內(nèi)梗顺，也無(wú)法避免如果沒(méi)有這些優(yōu)化妙真，代碼會(huì)運(yùn)行得更慢這個(gè)事實(shí)。
函數(shù)作用域
函數(shù)聲明時(shí)就已決定的作用域荚守。
作用域圖
- 氣泡1包含著整個(gè)全局作用域珍德，其中只有一個(gè)標(biāo)識(shí)符：foo。
- 氣泡2包含著foo所創(chuàng)建的作用域锈候，其中有三個(gè)標(biāo)識(shí)符：a、bar和b敞贡。
- 氣泡3包含著bar所創(chuàng)建的作用域泵琳，其中只有一個(gè)標(biāo)識(shí)符：c。
如果函數(shù)有嵌套誊役，那被嵌套的函數(shù)可以引用上層函數(shù)作用域里的屬性获列，反之不行
這個(gè)建筑代表程序中的嵌套作用域鏈。第一層樓代表當(dāng)前的執(zhí)行作用域蛔垢，也就是你所處的位置击孩。建筑的頂層代表全局作用域。
LHS和RHS引用都會(huì)在當(dāng)前樓層進(jìn)行查找鹏漆，如果沒(méi)有找到巩梢，就會(huì)坐電梯前往上一層樓，如果還是沒(méi)
有找到就繼續(xù)向上艺玲，以此類推括蝠。一旦抵達(dá)頂層（全局作用域），可能找到了你所需的變量饭聚，也可能沒(méi)找到忌警，但無(wú)論如何查找過(guò)程都將停止。
注意：LHS在編譯階段秒梳，RHS在執(zhí)行階段
塊作用域
很多語(yǔ)言（例如Java,C,C++）都有塊作用域,但是JavaScript沒(méi)有這個(gè)作用域模式
function a() {
var i = 5;
for(var i = 0; i < 1; i++) {
console.log(i);
}
}
var b = a(); // 1
console.log(b.i) // 1
如果按塊作用域來(lái)看法绵，最后一段代碼應(yīng)該輸出5，但是結(jié)果卻是1端幼，這是因?yàn)閒or循環(huán)的的 i 污染了全局里面的 i 然后讓他重新賦值為0礼烈，最后循環(huán)結(jié)束就變?yōu)榱?
模擬塊作用域(ES5以前)
-
with
用with從對(duì)象中創(chuàng)建出的作用域僅在with聲明中而非外部作用域中有效。
try/catch
try {
undefined(); // 執(zhí)行一個(gè)非法操作來(lái)強(qiáng)制制造一個(gè)異常
}
catch (err) {
console.log( err ); // 能夠正常執(zhí)行婆跑！
}
console.log( err ); // ReferenceError: err not found
外部無(wú)法訪問(wèn)內(nèi)部定義的err
ES6
-
let
let關(guān)鍵字可以將變量綁定到所在的任意作用域中（通常是{ .. }內(nèi)部）此熬。換句話說(shuō)，let為其聲明的
變量隱式地了所在的塊作用域滑进。
var foo = true;
if (foo) {
let bar = foo * 2;
bar = something( bar );
console.log( bar );
}
console.log( bar ); // ReferenceError
-
const
除了let以外犀忱，ES6還引入了const，同樣可以用來(lái)創(chuàng)建塊作用域變量扶关，但其值是固定的（常量）阴汇。之后
任何試圖修改值的操作都會(huì)引起錯(cuò)誤。
var foo = true;
if (foo) {
var a = 2;
const b = 3; // 包含在if中的塊作用域常
a = 3; // 正常!
b = 4; // 錯(cuò)誤!
}
console.log( a ); // 3
console.log( b ); // ReferenceError!
動(dòng)態(tài)作用域
什么是動(dòng)態(tài)作用域节槐？
動(dòng)態(tài)作用域就如你所想的就是下面這段代碼發(fā)生的情況一樣
function foo() {
console.log( a ); // 2
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
但是結(jié)果并不是這樣
function foo() {
console.log( a ); // 3（ 不是2２笫）
}
function bar() {
var a = 3;
foo();
}
var a = 2;
bar();
詞法作用域關(guān)注函數(shù)在何處聲明拐纱，而動(dòng)態(tài)作用域關(guān)注函數(shù)從何處調(diào)用。
實(shí)際上JavaScript不具有動(dòng)態(tài)作用域哥倔，他只有詞法作用域秸架。但是this機(jī)制從某種程度上很像動(dòng)態(tài)作用域。
This
this既不指向函數(shù)自身也不指向函數(shù)的詞法作用域
this實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定咆蒿，它指向什么完全取決于函數(shù)在哪里被調(diào)用
歸納來(lái)說(shuō)this有四種綁定方式
-
默認(rèn)綁定
在沒(méi)有其他任何修飾的函數(shù)引用進(jìn)行調(diào)用
function foo() {
console.log( this.a );
}
var a = 2;
foo(); // 2
this綁定了window
-
隱式綁定
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
this綁定了obj
而且對(duì)象屬性引用鏈中只有最頂層或者說(shuō)最后一層會(huì)影響調(diào)用位置东抹。舉例來(lái)說(shuō)：
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
this 綁定了obj2
但如果將屬性引用傳給一個(gè)變量后再調(diào)用，就會(huì)出現(xiàn)隱式丟失沃测，變成默認(rèn)綁定缭黔，例如：
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 函數(shù)別名！
var a = "oops, global"; // a是全局對(duì)象的屬性
bar(); // "oops, global"
this綁定了window
-
顯示綁定
從this綁定的角度來(lái)說(shuō)蒂破，call(..)和apply(..)是一樣的馏谨，它們的區(qū)別體現(xiàn)在其他的參數(shù)上
- call()
- apply()
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
foo.call( obj ); // 2
this綁定了obj
注意:顯示綁定會(huì)出現(xiàn)丟失綁定問(wèn)題，也就是以后可以通過(guò)call,apply等再次修改this的綁定對(duì)象
- 硬綁定
function foo() {
console.log( this.a );
}
var obj = {
a:2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬綁定的bar不可能再修改它的this
bar.call( window ); // 2
通過(guò)對(duì)調(diào)用函數(shù)顯示綁定的封裝寞蚌，使得bar.call實(shí)際上是綁定封裝匿名函數(shù)的this田巴，完全沒(méi)影響到里面的foo綁定
- bind
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a:2
};
var bar = foo.bind( obj );
var b = bar( 3 ); // 2
console.log( b ); // 5
bind(..)會(huì)返回一個(gè)硬編碼的新函數(shù)，它會(huì)把參數(shù)設(shè)置為this的上下文并調(diào)用原始函數(shù)
-
new綁定
function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log( bar.a ); // 2
this綁定當(dāng)前函數(shù)對(duì)象
四種綁定優(yōu)先級(jí)（前高后低）
- new綁定
- 顯示綁定
- 隱式綁定
- 默認(rèn)綁定
綁定例外
-
被忽略的this
當(dāng)call,apply,bind傳入綁定參數(shù)為null,undefined時(shí)會(huì)被忽略挟秤，實(shí)際應(yīng)用的是默認(rèn)綁定
function foo() {
console.log( this.a );
}
var a = 2;
foo.call( null ); // 2
this綁定window
- Object.create(null)
> 不會(huì)創(chuàng)建Object.prototype委托壹哺，比{}更空,應(yīng)該把Object.create(null)作為參數(shù)傳入，避免傳入null時(shí)艘刚，無(wú)意中使用默認(rèn)綁定規(guī)則管宵，導(dǎo)致的不可預(yù)計(jì)的后果
- 間接引用
function foo() {
console.log( this.a );
}
var a = 2;
var o = { a: 3, foo: foo };
var p = { a: 4 };
o.foo(); // 3
(p.foo = o.foo)(); // 2
this綁定了window,這里就好像把對(duì)象函數(shù)引用傳過(guò)來(lái)在全局調(diào)用一樣
- 軟綁定
可以不顧優(yōu)先級(jí)，任意進(jìn)行綁定轉(zhuǎn)換 - this詞法
箭頭函數(shù)
參考資料
-
《你不知道的JS》(真的寫(xiě)的很好)
