前言

大家好，我是 CoderBin，在JavaScript中，this是一個(gè)非常重要的概念，屬于進(jìn)階知識(shí)，不管是在面試還是日常開發(fā)中都是非常常用的。所以本次給大家總結(jié)了關(guān)于this的綁定規(guī)則，來(lái)幫助大家更加深入的掌握這個(gè)知識(shí)點(diǎn)。希望對(duì)大家有所幫助，謝謝。

創(chuàng)作不易，你們的點(diǎn)贊收藏留言就是我最大的動(dòng)力

如果文中有不對(duì)、疑惑的地方，歡迎各位小伙伴們?cè)谠u(píng)論區(qū)留言指正

1. 關(guān)于 this 的簡(jiǎn)單介紹

this 關(guān)鍵字是 JavaScript 中最復(fù)雜的機(jī)制之一。它是一個(gè)很特別的關(guān)鍵字，被自動(dòng)定義在所有函數(shù)的作用域中。但是即使是非常有經(jīng)驗(yàn)的 JavaScript 開發(fā)者也很難說(shuō)清它到底指向什么。

任何足夠先進(jìn)的技術(shù)都和魔法無(wú)異。— Arthur C. Clarke

實(shí)際上，JavaScript 中 this 的機(jī)制并沒有那么先進(jìn)，但是開發(fā)者往往會(huì)把理解過(guò)程復(fù)雜化， 毫無(wú)疑問(wèn)，在缺乏清晰認(rèn)識(shí)的情況下，this 對(duì)你來(lái)說(shuō)完全就是一種魔法。

2. 為什么使用 this？

const obj = {
  title: '華為云社區(qū)',
  reading() {
    console.log(this.title + '，一個(gè)幫助開發(fā)者成長(zhǎng)的社區(qū)');
  }
}

this 提供了一種更優(yōu)雅的方式來(lái)隱式“傳遞”一個(gè)對(duì)象引用，因此可以將 API 設(shè)計(jì)得更加簡(jiǎn)潔并且易于復(fù)用。

隨著你的使用模式越來(lái)越復(fù)雜，顯式傳遞上下文對(duì)象會(huì)讓代碼變得越來(lái)越混亂，使用 this 則不會(huì)這樣。當(dāng)我們介紹對(duì)象和原型時(shí)，你就會(huì)明白函數(shù)可以自動(dòng)引用合適的上下文對(duì)象有多重要

3. 關(guān)于this 的常見的誤解

人們很容易把 this 理解成指向函數(shù)自身，JavaScript 的新手開發(fā)者通常會(huì)認(rèn)為，既然把函數(shù)看作一個(gè)對(duì)象（JavaScript 中的所有函數(shù) 都是對(duì)象），那就可以在調(diào)用函數(shù)時(shí)存儲(chǔ)狀態(tài)（屬性的值）。但結(jié)果通常讓他們大吃一驚，例如下面這段代碼

function foo() {
  // 讓新添加的 count + 1
  this.count++
}

// 向函數(shù)對(duì)象 foo 添加了一個(gè)屬性 count
foo.count = 0

foo()

console.log(foo.count);   // 0 

這段代碼看起來(lái)沒什么問(wèn)題，但請(qǐng)把目光聚焦到最后一行，輸出 foo.count 的結(jié)果竟然是0 ？！

疑問(wèn)：為什么會(huì)這樣？我明明向函數(shù)對(duì)象 foo 添加了一個(gè)屬性 count，并且函數(shù)內(nèi)部也寫了 this.count++，為什么最后還是0呢？

解答：因?yàn)?code>this.count 中此時(shí)的 this，根本不是指向 foo 函數(shù)自身，而是指向全局 window。再細(xì)心一點(diǎn)，我們可以發(fā)現(xiàn)，在 window 身上，被添加了個(gè) count 屬性，值為 NaN。
（為什么 this 指向 window 后面會(huì)闡述）

所以，單純的把 this 理解為指向函數(shù)自身是錯(cuò)誤的。

this 實(shí)際上是在函數(shù)被調(diào)用時(shí)發(fā)生的綁定，它指向什么完全取決于函數(shù)在哪里被調(diào)用。

4. this 的綁定規(guī)則

我們來(lái)看看在函數(shù)的執(zhí)行過(guò)程中調(diào)用位置如何決定 this 的綁定對(duì)象。

找到調(diào)用位置，然后判斷需要應(yīng)用下面四條規(guī)則中的哪一條。我首先會(huì)分別解釋 這四條規(guī)則，然后解釋多條規(guī)則都可用時(shí)它們的優(yōu)先級(jí)如何排列。

4.1 默認(rèn)綁定

首先要介紹的是最常用的函數(shù)調(diào)用類型：獨(dú)立函數(shù)調(diào)用。可以把這條規(guī)則看作是無(wú)法應(yīng)用其他規(guī)則時(shí)的默認(rèn)規(guī)則。

function foo() {
  console.log(this.a)
}
var a = 2
foo() // 2

• 我們可以看到當(dāng)調(diào)用 foo() 時(shí)，this.a 被解析成了全局變量 a。為什么？因?yàn)樵诒纠校?strong>函數(shù)調(diào)用時(shí)應(yīng)用了 this 的默認(rèn)綁定，因此 this 指向全局對(duì)象。

• 那么我們?cè)趺粗肋@里應(yīng)用了默認(rèn)綁定呢？可以通過(guò)分析調(diào)用位置來(lái)看看 foo() 是如何調(diào) 用的。在代碼中，foo() 是直接使用不帶任何修飾的函數(shù)引用進(jìn)行調(diào)用的，因此只能使用默認(rèn)綁定，無(wú)法應(yīng)用其他規(guī)則

• 這條規(guī)則也解釋了上面 count 的代碼中，為什么函數(shù)里面的this指向了window，因?yàn)?nbsp;foo 是屬于獨(dú)立函數(shù)調(diào)用的，觸發(fā)了默認(rèn)綁定，從而指向全局window。（瀏覽器中全局是 window對(duì)象，node 中是空對(duì)象{}）

• 屬于默認(rèn)綁定規(guī)則的還有：

  • 函數(shù)調(diào)用鏈（一個(gè)函數(shù)又調(diào)用另外一個(gè)函數(shù)）
  • 將函數(shù)作為參數(shù)，傳入到另一個(gè)函數(shù)中

（擴(kuò)展：如果使用嚴(yán)格模式（strict mode），則不能將全局對(duì)象用于默認(rèn)綁定，因此 this 會(huì)綁定到 undefined：）

結(jié)論：默認(rèn)綁定的 this，都指向全局。

4.2 隱式綁定

4.2.1 一般的對(duì)象調(diào)用

這一條需要考慮的規(guī)則是調(diào)用位置是否有上下文對(duì)象，或者說(shuō)是通過(guò)某個(gè)對(duì)象發(fā)起的函數(shù)調(diào)用

function foo() {
  console.log(this.a)
}

const obj = {
  a: 2,
  foo: foo
}

// 通過(guò) obj 對(duì)象調(diào)用 foo 函數(shù)
obj.foo() // 2

• 調(diào)用位置會(huì)使用 obj 上下文來(lái)引用函數(shù)，因此你可以說(shuō)函數(shù)被調(diào)用時(shí) obj 對(duì)象“擁 有”或者“包含”它。
• foo() 被調(diào)用時(shí)，它的前面確實(shí)加上了對(duì) obj 的引用。當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，隱式綁定規(guī)則會(huì)把函數(shù)調(diào)用中的 this 綁定到這個(gè)上下文對(duì)象。因?yàn)檎{(diào)用 foo() 時(shí) this 被綁定到 obj 上，因此 this.a 和 obj.a 是一樣的。

4.2.2 對(duì)象屬性引用鏈

對(duì)象屬性引用鏈中只有上一層或者說(shuō)最后一層在調(diào)用位置中起作用。舉例來(lái)說(shuō)：

function foo() {
  console.log(this.a)
}

var obj2 = {
  a: 2,
  foo: foo
}

var obj1 = {
  a: 1,
  obj2: obj2
}

obj1.obj2.foo() // 2

最終 this 指向的是 obj2

4.2.3 隱式丟失

一個(gè)最常見的 this 綁定問(wèn)題就是被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象，也就是說(shuō)它會(huì)應(yīng)用默認(rèn)綁定，從而把 this 綁定到全局對(duì)象或者 undefined 上（取決于是否是嚴(yán)格模式）

第一種情況：將對(duì)象里的函數(shù)賦值給一個(gè)變量

function foo() {
  console.log(this.a)
}

var obj = {
  a: 2,
  foo: foo
}

var bar = obj.foo // 函數(shù)別名！

var a = 'global' // a 是全局對(duì)象的屬性
bar() // "global"

雖然 bar 是 obj.foo 的一個(gè)引用，但是實(shí)際上，它引用的是 foo 函數(shù)本身，因此此時(shí)的 bar() 其實(shí)是一個(gè)不帶任何修飾的函數(shù)調(diào)用，因此應(yīng)用了默認(rèn)綁定。

第二種情況：傳入回調(diào)函數(shù)時(shí)

function foo() {
  console.log(this.a)
}

function doFoo(fn) {
  // fn 其實(shí)引用的是 foo
  fn() // <-- 調(diào)用位置！
}

var obj = {
  a: 2,
  foo: foo
}

var a = 'global'  // a 是全局對(duì)象的屬性
doFoo(obj.foo)    // "global"

參數(shù)傳遞其實(shí)就是一種隱式賦值，因此我們傳入函數(shù)時(shí)也會(huì)被隱式賦值，所以結(jié)果和上一 個(gè)例子一樣。

結(jié)論：隱式綁定的 this，指向調(diào)用函數(shù)的上下文對(duì)象。

4.3 顯式綁定

4.3.1 使用 call(…) 和 apply(…)

如果我們不想在對(duì)象內(nèi)部包含函數(shù)引用，而想在某個(gè)對(duì)象上強(qiáng)制調(diào)用函數(shù)，該怎么做呢？
可以使用函數(shù)的 call(..) 和 apply(..) 方法

• JavaScript 提供的絕大多數(shù)函數(shù)以及你自 己創(chuàng)建的所有函數(shù)都可以使用 call(..) 和 apply(..) 方法。

這兩個(gè)方法是如何工作的呢？它們的第一個(gè)參數(shù)是一個(gè)對(duì)象，是給 this 準(zhǔn)備的，接著在調(diào)用函數(shù)時(shí)將其綁定到 this。因?yàn)槟憧梢灾苯又付?this 的綁定對(duì)象，因此我們稱之為顯式綁定。 思考以下代碼：

function foo() {
  console.log(this.a)
}

var obj = {
  a: 2
}

foo.call(obj) // 2

• 通過(guò) foo.call(..)，我們可以在調(diào)用 foo 時(shí)強(qiáng)制把它的 this 綁定到 obj 上。
• 如果你傳入了一個(gè)原始值（字符串類型、布爾類型或者數(shù)字類型）來(lái)當(dāng)作 this 的綁定對(duì) 象，這個(gè)原始值會(huì)被轉(zhuǎn)換成它的對(duì)象形式（也就是 new String(…)、new Boolean(…) 或者 new Number(…)）。這通常被稱為“裝箱”。

從 this 綁定的角度來(lái)說(shuō)，call(…) 和 apply(…) 是一樣的，它們的區(qū)別體現(xiàn)在參數(shù)上：第一個(gè)參數(shù)是相同的，后面的參數(shù)，call為參數(shù)列表，apply為數(shù)組，他們內(nèi)部的實(shí)現(xiàn)原理也不難理解，詳細(xì)請(qǐng)看以下兩個(gè)手寫方法

•  手寫 call 方法 超級(jí)詳細(xì) ???

•  手寫 apply 方法 超級(jí)詳細(xì) ???

4.3.2 硬綁定（一個(gè)函數(shù)總是顯示的綁定到一個(gè)對(duì)象上）

由于硬綁定是一種非常常用的模式，所以 ES5 提供了內(nèi)置的方法 Function.prototype.bind， 它的用法如下

function foo(num) {
  console.log(this.a, num)
  return this.a + num
}

var obj = {
  a: 2
}

// 調(diào)用 bind() 方法，返回一個(gè)函數(shù)
var bar = foo.bind(obj)

var b = bar(3) // 2 3

console.log(b) // 5

調(diào)用 bind(...) 方法，會(huì)返回一個(gè)新函數(shù)，那么這個(gè)新函數(shù)的 this，永遠(yuǎn)指向我們傳入的obj對(duì)象

關(guān)于 bind 方法的簡(jiǎn)單實(shí)現(xiàn)，可以前往： 手寫 bind 方法，超級(jí)詳細(xì) ???

4.3.3 API調(diào)用的 “上下文（內(nèi)置函數(shù)）

第三方庫(kù)的許多函數(shù)，以及 JavaScript 語(yǔ)言和宿主環(huán)境中許多新的內(nèi)置函數(shù)，都提供了一個(gè)可選的參數(shù)，通常被稱為“上下文”（context），其作用和 bind(..) 一樣，確保你的回調(diào)函數(shù)使用指定的 this。例如：

（1）數(shù)組方法 forEach()

function foo(el) {
  console.log(el, this.id)
}

var obj = {
  id: 'bin'
};

[1, 2, 3].forEach(foo, obj)

// 輸出：
// 1 bin 
// 2 bin 
// 3 bin

• 調(diào)用 foo(…) 時(shí)把 this 綁定到 obj 身上

（2）setTimeout()

setTimeout(function() {
  console.log(this); // window
}, 1000);

• 在使用 setTimeout 時(shí)會(huì)傳入一個(gè)回調(diào)函數(shù)，而這個(gè)回調(diào)函數(shù)中的this一般指向 window，這個(gè)和 setTimeout 源碼的內(nèi)部調(diào)用有關(guān)，這個(gè)不再展開贅述

結(jié)論：顯式綁定的 this，指向我們指定的綁定對(duì)象。

4.4 new 綁定

在 JavaScript 中，普通函數(shù)可以使用 new 操作符去調(diào)用，此時(shí)的普通函數(shù)則被稱為 “構(gòu)造函數(shù)”。沒錯(cuò)，凡是由 new 操作符調(diào)用的函數(shù)，都稱為 “構(gòu)造函數(shù)”

使用 new 來(lái)調(diào)用函數(shù)，或者說(shuō)發(fā)生構(gòu)造函數(shù)調(diào)用時(shí)，會(huì)自動(dòng)執(zhí)行下面的操作。

• 在內(nèi)存中創(chuàng)建一個(gè)新對(duì)象。
• 這個(gè)新對(duì)象內(nèi)部的[[Prototype]] 特性被賦值為構(gòu)造函數(shù)的 prototype 屬性。
• 構(gòu)造函數(shù)內(nèi)部的this 被賦值為這個(gè)新對(duì)象（即this 指向新對(duì)象）。
• 執(zhí)行構(gòu)造函數(shù)內(nèi)部的代碼（給新對(duì)象添加屬性）。
• 如果構(gòu)造函數(shù)返回非空對(duì)象，則返回該對(duì)象；否則，返回剛創(chuàng)建的新對(duì)象。

function foo(a) {
  this.a = a
}

var bar = new foo(2)

console.log(bar.a) // 2

使用 new 來(lái)調(diào)用 foo(..) 時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 foo(..) 調(diào)用中的 this 上。new 是最后一種可以影響函數(shù)調(diào)用時(shí) this 綁定行為的方法，我們稱之為 new 綁定。

結(jié)論：new 綁定的 this，都指向通過(guò) new 調(diào)用的函數(shù)的實(shí)例對(duì)象（就是該函數(shù)）

5. 綁定規(guī)則的優(yōu)先級(jí)

現(xiàn)在我們已經(jīng)了解了函數(shù)調(diào)用中 this 綁定的四條規(guī)則，你需要做的就是找到函數(shù)的調(diào)用位置并判斷應(yīng)當(dāng)應(yīng)用哪條規(guī)則。但是，如果某個(gè)調(diào)用位置可以應(yīng)用多條規(guī)則呢？所以就需要有綁定規(guī)則的優(yōu)先級(jí)。

它們之間的優(yōu)先級(jí)關(guān)系為：

默認(rèn)綁定 < 隱式綁定 < 顯示綁定（bind） < new綁定

這里提前列出優(yōu)先級(jí)，想看詳細(xì)代碼解析的可以往下看，也可以直接拖到最后面的例題部分

5.1 默認(rèn)綁定的優(yōu)先級(jí)最低

毫無(wú)疑問(wèn)，默認(rèn)規(guī)則的優(yōu)先級(jí)是最低的，因?yàn)榇嬖谄渌?guī)則時(shí)，就會(huì)通過(guò)其他規(guī)則的方式來(lái)綁定this

5.2 隱式綁定和顯式綁定的優(yōu)先級(jí)比較

測(cè)試一下即可知道，有以下代碼：

function foo() {
  console.log(this.a)
}

var obj1 = {
  a: 1,
  foo: foo
}

var obj2 = {
  a: 2,
  foo: foo
}

// 同時(shí)使用隱式綁定和顯示綁定
obj1.foo.call(obj2) // 2

可以看到，輸出的結(jié)果為 2，說(shuō)明 foo 函數(shù)內(nèi) this 指向的是 obj2，而 obj2 是通過(guò)顯示綁定調(diào)用的，所以：顯示綁定的優(yōu)先級(jí)更高

5.3 隱式綁定和 new 綁定的優(yōu)先級(jí)比較

有以下測(cè)試代碼：

function foo() {
  console.log(this);
}

var obj = {
  title: "juejin",
  foo: foo
}

// 同時(shí)使用隱式綁定和new綁定
new obj.foo(); // foo對(duì)象

最后 foo 函數(shù)輸出的 this 為 foo 對(duì)象，說(shuō)明new綁定優(yōu)先級(jí)更高（否則應(yīng)該輸出 obj 對(duì)象），所以：new 綁定的優(yōu)先級(jí)更高

5.4 new 綁定和顯示綁定的優(yōu)先級(jí)比較

最后，new 綁定和顯式綁定誰(shuí)的優(yōu)先級(jí)更高呢？

new綁定和call、apply是不允許同時(shí)使用的，只能和 bind 相比較，如下：

function foo() {
  console.log(this)
}

var obj = {
  title: "juejin"
}

var foo = new foo.call(obj);  // 直接報(bào)錯(cuò)

但是 new 綁定可以和 bind 方法返回后的函數(shù)一起使用

function foo() {
  console.log(this);
}

var obj = {
  title: "juejin"
}

var bar = foo.bind(obj);

var foo = new bar(); // foo 對(duì)象, 說(shuō)明使用的是new綁定

最后 foo 函數(shù)輸出的 this 為 foo 對(duì)象，說(shuō)明new綁定優(yōu)先級(jí)更高（否則應(yīng)該輸出 obj 對(duì)象），所以：new 綁定的優(yōu)先級(jí)更高

優(yōu)先級(jí)結(jié)論：默認(rèn)綁定 < 隱式綁定 < 顯示綁定（bind）< new綁定

6. 判斷this

現(xiàn)在我們可以根據(jù)優(yōu)先級(jí)來(lái)判斷函數(shù)在某個(gè)調(diào)用位置應(yīng)用的是哪條規(guī)則。可以按照下面的 順序來(lái)進(jìn)行判斷：

• 函數(shù)是否在 new 中調(diào)用（new 綁定）？如果是的話 this 綁定的是新創(chuàng)建的對(duì)象。 var bar = new foo()
• 函數(shù)是否通過(guò) call、apply（顯式綁定）或者硬綁定調(diào)用？如果是的話，this 綁定的是 指定的對(duì)象。 var bar = foo.call(obj2)
• 函數(shù)是否在某個(gè)上下文對(duì)象中調(diào)用（隱式綁定）？如果是的話，this 綁定的是那個(gè)上 下文對(duì)象。 var bar = obj1.foo()
• 如果都不是的話，使用默認(rèn)綁定。如果在嚴(yán)格模式下，就綁定到 undefined，否則綁定 到全局對(duì)象。 var bar = foo()

就是這樣。對(duì)于正常的函數(shù)調(diào)用來(lái)說(shuō)，理解了這些知識(shí)你就可以明白 this 的綁定原理了。 不過(guò)……凡事總有例外

7. 綁定例外

規(guī)則總有例外，這里也一樣。在某些場(chǎng)景下 this 的綁定行為會(huì)出乎意料，你認(rèn)為應(yīng)當(dāng)應(yīng)用其他綁定規(guī)則時(shí)，實(shí)際上應(yīng)用的可能是默認(rèn)綁定規(guī)則。

7.1 箭頭函數(shù)

箭頭函數(shù)不使用 this 的四種標(biāo)準(zhǔn)規(guī)則，而是根據(jù)外層（函數(shù)或者全局）作用域來(lái)決定 this。

7.2 被忽略的this

如果你把 null 或者 undefined 作為 this 的綁定對(duì)象傳入 call、apply 或者 bind，這些值在調(diào)用時(shí)會(huì)被忽略，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則：

function foo() {
  console.log(this.a)
}

var a = 2

foo.call(null) // 2
foo.call(undefined) // 2
foo.bind(null)();

最后輸出的結(jié)果都是 2，說(shuō)明 this 指向的是全局 window

7.3 間接引用

另一個(gè)需要注意的是，你有可能（有意或者無(wú)意地）創(chuàng)建一個(gè)函數(shù)的間接引用，在這種情況下，調(diào)用這個(gè)函數(shù)會(huì)應(yīng)用默認(rèn)綁定規(guī)則。 間接引用最容易在賦值時(shí)發(fā)生：

function foo() {
  console.log(this.a)
}
var a = 2
var o = { a: 3, foo: foo }
var p = { a: 4 }

o.foo(); // 3

// 函數(shù)賦值
(p.foo = o.foo)()  // 2

賦值表達(dá)式 p.foo = o.foo 的返回值是目標(biāo)函數(shù)的引用，因此調(diào)用位置是 foo() 屬于獨(dú)立函數(shù)調(diào)用，而不是 p.foo() 或者 o.foo()。根據(jù)我們之前說(shuō)過(guò)的，這里會(huì)應(yīng)用默認(rèn)綁定。

8. this 判斷例題

請(qǐng)說(shuō)出例題中的輸出結(jié)果

8.1 例題一

var name = "window";
var person = {
  name: "person",
  sayName: function () {
    console.log(this.name);
  }
};
function sayName() {
  var sss = person.sayName;
  sss(); 
  person.sayName(); 
  (person.sayName)(); 
  (b = person.sayName)(); 
}
sayName();

解析：

function sayName() {
  var sss = person.sayName;
  // 獨(dú)立函數(shù)調(diào)用，沒有和任何對(duì)象關(guān)聯(lián)
  sss(); // window
  // 關(guān)聯(lián)
  person.sayName(); // person
  (person.sayName)(); // person
  (b = person.sayName)(); // window
}

8.2 例題二

var name = 'window'
var person1 = {
  name: 'person1',
  foo1: function () {
    console.log(this.name)
  },
  foo2: () => console.log(this.name),
  foo3: function () {
    return function () {
      console.log(this.name)
    }
  },
  foo4: function () {
    return () => {
      console.log(this.name)
    }
  }
}

var person2 = { name: 'person2' }

person1.foo1(); 
person1.foo1.call(person2); 

person1.foo2();
person1.foo2.call(person2);

person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);

person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);

解析：

// 隱式綁定，肯定是person1
person1.foo1(); // person1
// 隱式綁定和顯示綁定的結(jié)合，顯示綁定生效，所以是person2
person1.foo1.call(person2); // person2

// foo2()是一個(gè)箭頭函數(shù)，不適用所有的規(guī)則
person1.foo2() // window
// foo2依然是箭頭函數(shù)，不適用于顯示綁定的規(guī)則
person1.foo2.call(person2) // window

// 獲取到foo3，但是調(diào)用位置是全局作用于下，所以是默認(rèn)綁定window
person1.foo3()() // window
// foo3顯示綁定到person2中
// 但是拿到的返回函數(shù)依然是在全局下調(diào)用，所以依然是window
person1.foo3.call(person2)() // window
// 拿到foo3返回的函數(shù)，通過(guò)顯示綁定到person2中，所以是person2
person1.foo3().call(person2) // person2

// foo4()的函數(shù)返回的是一個(gè)箭頭函數(shù)
// 箭頭函數(shù)的執(zhí)行找上層作用域，是person1
person1.foo4()() // person1
// foo4()顯示綁定到person2中，并且返回一個(gè)箭頭函數(shù)
// 箭頭函數(shù)找上層作用域，是person2
person1.foo4.call(person2)() // person2
// foo4返回的是箭頭函數(shù)，箭頭函數(shù)只看上層作用域
person1.foo4().call(person2) // person1

9. 總結(jié)

如果要判斷一個(gè)運(yùn)行中函數(shù)的 this 綁定，就需要找到這個(gè)函數(shù)的直接調(diào)用位置。找到之后就可以順序應(yīng)用下面這四條規(guī)則來(lái)判斷 this 的綁定對(duì)象。

• 由 new 調(diào)用？綁定到新創(chuàng)建的對(duì)象。
• 由 call 或者 apply（或者 bind）調(diào)用？綁定到指定的對(duì)象。
• 由上下文對(duì)象調(diào)用？綁定到那個(gè)上下文對(duì)象。
• 默認(rèn)：在嚴(yán)格模式下綁定到 undefined，否則綁定到全局對(duì)象。

到此這篇關(guān)于JavaScript 中的 this 綁定規(guī)則詳解的文章就介紹到這了,更多相關(guān)JavaScript 中的 this 綁定規(guī)則內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！