this
- ES6中的箭頭函數采用的是詞法作用域。
- 為什么要使用this：使API設計得更簡潔且易於復用。
- this即不指向自身，也不指向函數的詞法作用域。
- this的指向只取決於函數的調用方式
this綁定規則
- new > 顯示綁定 > 隱式綁定 > 默認綁定
默認綁定
- 當獨立函數調用時，不管是否在調用棧中，this都指向全局對象（瀏覽器中為window）
- 嚴格模式下，不能將全局對象用於默認綁定。
var a = 2;
function foo(){
console.log(this.a);
}
function bar(){
var a = 5;
foo();
}
bar(); // 2
隱式綁定
- 當函數引用有上下文對象時，隱式綁定規則會把函數調用中的this綁定到這個上下文對象。
- 對象屬性引用鏈中只有最后一層在調用位置中起作用。
- 要求：對象內部必須包含一個指向函數的屬性，該對象可通過這個屬性間接引用函數。
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); // 42
- 隱式丟失
function foo() {
console.log( this.a );
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; // 這里bar將引用foo函數本身，所以不帶有函數對象的上下文
var a = "oops, global"; // a是全局對象的屬性
bar(); // "oops, global"
和回調函數的情況下（參數傳遞時的隱式賦值）
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// 參數傳遞時，相當於fn = obj.foo，就和上個例子一樣了
fn(); // <-- call-site!
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global"; // `a` also property on global object
doFoo( obj.foo ); // "oops, global"
顯式綁定
- 采用call()和apply()，通過傳入一個對象（若為基本類型，會被封裝函數轉為對象—裝箱），將this綁定到該對象。
- 硬綁定
function foo() {
console.log( this.a );
}
var obj = {
a: 2
};
var bar = function() {
foo.call( obj );
};
bar(); // 2
setTimeout( bar, 100 ); // 2
// 硬綁定后bar無論怎么調用，都不會影響foo函數的this綁定
bar.call( window ); // 2
硬綁定的典型應用是如下的包裹函數：
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
var obj = {
a: 2
};
var bar = function() {
return foo.apply( obj, arguments ); // 將obj對象硬編碼進去
};
var b = bar( 3 ); // 2 3
console.log( b ); // 5
即將內部函數用apply硬綁定到某個對象，無論怎么調用這個包裹函數，都不會影響內部函數的this。
bind輔助函數如下：
function foo(something) {
console.log( this.a, something );
return this.a + something;
}
// simple `bind` helper
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments ); // 利用參數將obj傳入進去
};
}
var obj = {
a: 2
};
var bar = bind( foo, obj ); // bind( foo, obj )會返回一個包裹函數
var b = bar( 3 ); // 2 3
console.log( b ); // 5
總結：上述包裹函數，想要包裹其他函數，只能一個一個重復寫，硬編碼的方式導致不能被重用，當某種功能需要多次重復使用時，將其抽象出來，成為函數。
new綁定
- 任何函數都可能被用作構造函數，當函數被new操作符“構造調用”時，會執行下面操作：
1. 創建一個新對象（若該函數不是JS內置的，則創建一個新的Object對象）；
2. 將this綁定到這個對象；
3. 執行構造函數中的代碼（為這個新對象添加屬性）；
4. 若函數沒有返回其他對象，則自動返回這個新對象；若函數有return返回的是非對象，則還是自動返回這個新對象，即覆蓋那個非對象。
function foo(a) {
this.a = a;
}
var bar = new foo( 2 );
console.log( bar.a ); // 2
補充說明
- 間接引用
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，由於p.foo = o.foo的返回值是目標函數的引用，所以調用位置是foo()，而不是p.foo()或o.foo()
- 箭頭函數：不使用這四個this規則，根據詞法作用域來決定this。
function foo() {
// 返回一個箭頭函數
return (a) => {
// `this` here is lexically adopted from `foo()`
console.log( this.a );
};
}
var obj1 = {
a: 2
};
var obj2 = {
a: 3
};
// foo()不是箭頭函數，他的this被綁定到obj1
var bar = foo.call( obj1 ); // foo.call( obj1 )返回箭頭函數，所以bar為箭頭函數
bar.call( obj2 ); // 2! 箭頭函數的this無法被修改，new也不行
如下為和箭頭函數一樣的模式：
function foo() {
var self = this; // lexical capture of `this`
setTimeout( function(){
console.log( self.a );
}, 100 );
}
var obj = {
a: 2
};
foo.call( obj ); // 2