#1. A brief introduction to this

This keyword is one of the most complex mechanisms in JavaScript. It is a very special keyword that is automatically defined in the scope of all functions. But even very experienced JavaScript developers have a hard time telling what exactly it points to.

Any sufficiently advanced technology is indistinguishable from magic. — Arthur C. Clarke

In fact, the mechanism of this in JavaScript is not that advanced, but developers tend to complicate the understanding process. There is no doubt that in the absence of a clear understanding, This will be a complete magic for you.

2. Why use this?

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

This provides a more elegant way to implicitly "pass" an object reference, so the API can be designed to be cleaner and easier to reuse.

As your usage patterns become more and more complex, explicitly passing the context object will make the code more and more cluttered, which is not the case with this. When we introduce objects and prototypes, you will understand how important it is that functions can automatically reference the appropriate context objects

3. Common misunderstandings about this

It is easy for people to understand this as pointing to the function itself. New JavaScript developers usually think that since the function is regarded as an object (all functions in JavaScript are objects), then they can be used when calling the function. Stores state (the value of a property). But the results usually surprise them. For example, the following code

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

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

foo()

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

looks fine, but please focus on the last line. The output of foo.count turns out to be 0? !

Question: Why is this happening? I clearly added an attribute count to the function object foo, and also wrote this.count inside the function. Why did it end up with 0 Woolen cloth?

Answer: Because this in this.count does not point to the foo function itself at all, but points to the global window. Looking more carefully, we can find that a count attribute has been added to window, with a value of NaN. (Why this points to window will be explained later)

So, it is wrong to simply understand this as pointing to the function itself.

This is actually the binding that occurs when the function is called, and what it points to depends entirely on where the function is called.

4. This binding rules

Let’s take a look at how the calling position determines the binding object of this during the execution of the function.

Find the calling location, and then determine which of the following four rules needs to be applied. I'll first explain each of these four rules, and then explain how they are prioritized when multiple rules are available.

4.1 Default binding

The first thing to introduce is the most commonly used type of function call: Independent function call. Think of this rule as the default rule when no other rules can be applied.

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

• We can see that when foo() is called, this.a is parsed into a global variable a . Why? Because in this example, the function is called with the default binding of this applied, so this points to the global object .

• So how do we know that the default binding is applied here? You can see how foo() is called by analyzing the calling location. In the code, foo() is called directly using a function reference without any modification, so only the default binding can be used and other rules cannot be applied

• This rule also explains why in the count code above, this in the function points to window, because foo is Belongs to an independent function call, triggering the default binding, thus pointing to the global window. (The global object in the browser is the window object, and the node is the empty object {})

• Also belonging to the default binding rules are:

  • Function call chain (A function calls another function)
  • Pass the function as a parameter into another function

(Extension: If strict mode is used ( strict mode), you cannot use the global object for default binding, so this will be bound to undefined:)

Conclusion: this for default binding, All point to the big picture.

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è)最常見(jiàn)的 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 = &#39;global&#39;  // 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è)不再展開(kāi)贅述

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

4.4 new 綁定

在 JavaScript 中，普通函數(shù)可以使用 new 操作符去調(diào)用，此時(shí)的普通函數(shù)則被稱為 “構(gòu)造函數(shù)”。沒(méi)錯(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)用，沒(méi)有和任何對(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ì)象。

每文一句：如果把生活比喻為創(chuàng)作的意境，那么閱讀就像陽(yáng)光。

ok，本次的分享就到這里，如果本章內(nèi)容對(duì)你有所幫助的話可以點(diǎn)贊+收藏，希望大家都能夠有所收獲。有任何疑問(wèn)都可以在評(píng)論區(qū)留言，大家一起探討、進(jìn)步！

【推薦學(xué)習(xí)：javascript高級(jí)教程】

The above is the detailed content of Let me explain in detail the four binding rules of this. For more information, please follow other related articles on the PHP Chinese website!