[[315489]]

對于 JavaScript 新手來說，this 是非?；A(chǔ)同時也難以理解的知識點。

比如下面的代碼，this 指向就有三種方式。 

function foo() {  
  console.log(this.a);  
}  
var a = 1;  
var obj = { a: 2, foo: foo };  
foo(); // 1  
obj.foo(); // 2  
foo.call({ a: 3 }); // 3 

在《你不知道的 JavaScript》一書中，我總算比較清晰理解了 this。

this 就是函數(shù)運(yùn)行時所在的環(huán)境對象，它指向運(yùn)行時所在的位置，而不是定義時的位置。

根據(jù) this 綁定規(guī)則，分為下面四種：

1.  默認(rèn)綁定
2.  隱式綁定
3.  顯式綁定
4.  new 綁定

1. 默認(rèn)綁定

默認(rèn)情況下，this 指向全局對象。例如下面的代碼。 

var a = 2;  
console.log(this.a); // 2  
// 在函數(shù)中  
function foo() {  
  console.log(this.a);  
}  
foo(); // 2  
// 在回調(diào)函數(shù)中  
function doFoo() {  
  return function() {  
    console.log(this.a);  
  };  
}  
doFoo()(); // 2 

不過，函數(shù)在嚴(yán)格模式下，this 無法指向全局對象，因此this會綁定到undefined。 

function foo() {  
  "use strict";  
  console.log(this);  
}  
foo(); // undefined 

2. 隱式綁定

當(dāng)函數(shù)作為方法被調(diào)用，需考慮運(yùn)行時上下文環(huán)境。 

function foo() {  
  console.log(this.a);  
}  
var obj = { a: 2, foo: foo };  
obj.foo(); // 2 

代碼中，foo()前面添加了obj對象的修飾，因此，obj對象就是函數(shù)的上下文。

this 會綁定到這個對象上。

另外，需要注意下面三種情況，它們會出現(xiàn)綁定對象丟失，從而把this綁定到全局對象或undefined上。

情況一

這段代碼中，雖然obj.foo()和bar()都指向同一函數(shù)，但執(zhí)行結(jié)果并不一樣。

可以理解為，bar()是一個不帶任何修飾的函數(shù)調(diào)用，等價于直接調(diào)用foo()，因此應(yīng)用了默認(rèn)綁定。 

function foo() {  
  console.log(this.a);  
}  
var a = 3;  
var obj = { a: 2, foo: foo };  
var bar = obj.foo;  
obj.foo(); // 2  
bar(); // 3 

情況二

另一種情況，發(fā)生在回調(diào)函數(shù)中。原理和上面的情況一樣。

修改上面的代碼，obj.foo作為參數(shù)傳入doFoo()函數(shù)中，實際上，引用的是foo()函數(shù)本身，因此應(yīng)用了默認(rèn)綁定。 

function foo() {  
  console.log(this.a);  
}  
var a = 3;  
var obj = { a: 2, foo: foo };  
function doFoo(fn) {  
  return fn();  
}  
doFoo(obj.foo);  // 3 

情況三

在一些流行的 JavaScript 庫，進(jìn)行事件處理操作時，回調(diào)函數(shù)的 this 可能會強(qiáng)制綁定到 DOM 元素上。

這種情況也值得注意。

3. 顯式綁定

JavaScript 提供了call()、apply()和bind()方法，可以強(qiáng)制綁定函數(shù)的this對象。 

function fn() {  
  console.log(this.a);  
}  
fn.call({ a: 3 }); // 3 

通過fn.call(obj)，我們將函數(shù)運(yùn)行時，this強(qiáng)制綁定到obj上。

call apply和bind的區(qū)別

call 和 apply 改變了函數(shù)的 this 上下文后，便執(zhí)行該函數(shù)，而 bind 則是將該函數(shù)返回。 

function fn() {  
    console.log(this.a);  
}  
fn.call({ a: 3 }); // 3  
fn.bind({ a: 4 })(); // 4 

call和apply的區(qū)別

call 和 apply 的區(qū)別在于傳入?yún)?shù)不同。

call 方法接收若干個參數(shù)列表。

apply 第一個參數(shù)和 call 一樣，第二個參數(shù)接收一個包含多個參數(shù)的數(shù)組。 

let arr = [2, 5, 9]  
console.log(Math.max.call(3, 2, 5, 9))  // 9  
console.log(Math.max.call(3, arr))  // NaN  
console.log(Math.max.apply(3, arr))  // 9 

4. new 綁定

如果使用 new 構(gòu)造函數(shù)，在函數(shù)內(nèi)部，this 指向新創(chuàng)建的對象。 

function foo() {  
  console.log(this);  
}  
new foo(); // foo {}  
foo(); // Window {...} 

其他情況

需要忽略的this

若第三方庫的某個函數(shù)使用了 this，默認(rèn)綁定會把this指向全局對象，從而導(dǎo)致不可預(yù)測的后果。

一個安全的做法，就是使用顯式綁定，將函數(shù)的this指向空對象。 

function foo() {  
  console.log(this);  
}  
// 創(chuàng)建空對象  
var ø = Object.create(null);  
// 使用bind()進(jìn)行柯里化（Curry）  
var bar = foo.bind(ø);  
bar(); // {} 

這方法通常也用于對象初始化，以獲得一個干凈且高度可定制的對象。

箭頭函數(shù)

箭頭函數(shù)常用于回調(diào)函數(shù)中。

它會繼承父級作用域 this 綁定的對象，等價于ES6之前self = this的書寫方式。 

const people = {  
    name: "Merry",  
    sayHi() {  
        console.log(this.name)  
    },  
    wait() {  
        setTimeout(() => {  
            console.log(this.name)  
        })  
    }  
}  
people.sayHi() // Merry  
people.wait()  // Merry 

此外還有軟綁定（softBind），用的不多，了解一下即可。