摘要：在用創(chuàng)建對(duì)象時(shí)，指向發(fā)生改變是在第二步創(chuàng)建一個(gè)對(duì)象實(shí)例將構(gòu)造函數(shù)中的指向這個(gè)對(duì)象執(zhí)行構(gòu)造函數(shù)中的代碼返回這個(gè)新創(chuàng)建的對(duì)象箭頭函數(shù)中的箭頭函數(shù)內(nèi)部是不會(huì)綁定的，它會(huì)捕獲外層作用域中的，作為自己的值。參考你不知道的上卷

this 是 JavaScript 中不可不談的一個(gè)知識(shí)點(diǎn)，它非常重要但又不容易理解。因?yàn)?JavaScript 中的 this 不同于其他語(yǔ)言。不同場(chǎng)景下的 this 指向不同（當(dāng)函數(shù)被調(diào)用執(zhí)行時(shí)會(huì)生成變量對(duì)象，確定 this 的指向，因此當(dāng)前函數(shù)的 this 是在函數(shù)被調(diào)用執(zhí)行的時(shí)候才確定的，所以導(dǎo)致 this 的指向靈活不確定），而且，在嚴(yán)格模式和非嚴(yán)格模式下，this 也會(huì)有不同的解讀。

先想想如果 JavaScript 中沒有 this 會(huì)怎么樣？比如下面這段代碼：

function identity(context) {
    return context.name.toUpperCase();
}
function speak(context) {
    var greeting = "Hello, I am " + identity(context)
    console.log(greeting)
}
var you = {
    name: "Reader"
}
var me = {
    name: "Stone"
}
identity(you); // READER
speak(me); // Hello, I am Stone

我們給這 identity 和 speak 兩個(gè)函數(shù)顯示的傳入了一個(gè)上下文對(duì)象，這似乎看不出什么，但是一旦你的應(yīng)用變得越來越復(fù)雜，這種顯示傳遞上下文就會(huì)讓代碼越來越混亂，代碼結(jié)構(gòu)越來越模糊。而使用 this 就可以避免這樣，因?yàn)?this 提供了一種更優(yōu)雅的方式來隱式傳遞對(duì)象引用，可以把 API 設(shè)計(jì)得更加簡(jiǎn)潔易用。

全局對(duì)象的變量對(duì)象是一個(gè)比較特殊的存在，在全局對(duì)象中，this 指向它本身，比如：

// this 綁定到全局對(duì)象
this.a1 = 10;

// 通過聲明綁定到變量對(duì)象，全局環(huán)境中，變量對(duì)象就是它本身
var a2 = 20;

// 會(huì)隱式綁定到全局對(duì)象
a3 = 30;

console.log(a1); // 10
console.log(a2); // 20
console.log(a3); // 30

在一個(gè)函數(shù)的執(zhí)行上下文中，this 由該函數(shù)的調(diào)用者提供，由函數(shù)的調(diào)用方式來決定 this 的指向。下面這個(gè)例子：

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

默認(rèn)全局對(duì)象就是調(diào)用者,等價(jià)于 window.fn()（只討論瀏覽器中全局對(duì)象）。但是在非嚴(yán)格模式中，this 是指向 undefined 的，比如：

"use strict";
function fn() {
    console.log(this);
}
fn(); // undefined
window.fn(); // Window {...}

這就說明了，如果不指定函數(shù)調(diào)用者，在嚴(yán)格模式下回默認(rèn)綁定到全局對(duì)象，在非嚴(yán)格模式下默認(rèn)指向 undefined 。

函數(shù)是獨(dú)立調(diào)用，還是被某個(gè)對(duì)象所調(diào)用，是很容易分辨的，比如：

"use strict";
var a = 20;
function fn() {
    var a = 1;
    var obj = {
        a: 10,
        c: this.a + 20
    }
    return obj.c
}
console.log(window.fn()); // 40
console.log(fn()); // TypeError

對(duì)象字面量的形式不會(huì)產(chǎn)生自己的作用域，所以 obj 中的 this.a 并不是指向 obj ，而是與函數(shù)內(nèi)部的 this 一樣。因此，當(dāng) window.fn() 調(diào)用時(shí)，fn 內(nèi)部的 this 指向 window 對(duì)象，此時(shí) this.a 訪問全局對(duì)象中的 a ；由于是在嚴(yán)格模式中，在沒有指明調(diào)用者的時(shí)候，fn 內(nèi)部默認(rèn)指向 undefined，所以在多帶帶調(diào)用的時(shí)候會(huì)報(bào)錯(cuò)。

JavaScript 中提供了一個(gè)方式可以讓我們手動(dòng)指定函數(shù)內(nèi)部的 this 指向，也就是前面提到的隱式傳遞對(duì)象，它們就是call/apply/bind。這三個(gè)方法是 Function 的原型方法，所有函數(shù)都可以調(diào)用這三個(gè)方法?？聪旅孢@個(gè)例子：

var a = 20;
var obj = {
    a: 40
}
function fn() {
    console.log(this.a);
}
fn(); // 20
fn.call(obj); // 40
fn.apply(obj); // 40

當(dāng)函數(shù)調(diào)用 apply/bind 時(shí)，表示執(zhí)行該函數(shù)，并且這個(gè)函數(shù)內(nèi)部的 this 指向 apply/bind 的第一個(gè)參數(shù)。

二者的區(qū)別：

call 的第一個(gè)參數(shù)是函數(shù)內(nèi)部 this 的指向，后續(xù)的參數(shù)則是函數(shù)執(zhí)行時(shí)所需要的參數(shù)，一個(gè)一個(gè)傳遞

apply 的第一個(gè)參數(shù)與 call 相同，而執(zhí)行函數(shù)的參數(shù)，則以數(shù)組的形式傳入

bind 方法也能指定函數(shù)的 this ，但是它不同于call/apply。bind 方法會(huì)返回一個(gè)新函數(shù)，這個(gè)函數(shù)與原函數(shù)有相同的函數(shù)體，但是函數(shù)內(nèi)部的 this 被綁定成 bind 方法的第一個(gè)參數(shù)，后續(xù)參數(shù)也是一個(gè)一個(gè)傳入，并且不會(huì)自動(dòng)執(zhí)行新函數(shù)。

可以把構(gòu)造函數(shù)看成是普通函數(shù)，其中的 this 指向是創(chuàng)建的對(duì)象實(shí)例，之所以稱之為構(gòu)造函數(shù)，是因?yàn)槲覀儠?huì)借助 new 操作符來調(diào)用函數(shù)。在用 new 創(chuàng)建對(duì)象時(shí)，this 指向發(fā)生改變是在第二步：

創(chuàng)建一個(gè)對(duì)象實(shí)例

將構(gòu)造函數(shù)中的 this 指向這個(gè)對(duì)象

執(zhí)行構(gòu)造函數(shù)中的代碼

返回這個(gè)新創(chuàng)建的對(duì)象

function Foo() {
    this.a = 20
}
var foo = new Foo()
console.log(foo.a) // 20

箭頭函數(shù)內(nèi)部是不會(huì)綁定 this 的，它會(huì)捕獲外層作用域中的 this，作為自己的 this 值。比如：

function Person() {
  this.age = 20;
  (() => {
    this.age++
  })()
}
var p = new Person()
console.log(p.age)

當(dāng)函數(shù)被當(dāng)做監(jiān)聽事件處理函數(shù)時(shí)， 其 this 指向觸發(fā)該事件的元素 （針對(duì)于addEventListener事件）。比如：

    click

document.querySelector(".box").addEventListener("click", function(e) {
  console.log(this) // 這個(gè)this指向div.box元素
}, false)

this 的使用場(chǎng)景豐富多樣，可以用來實(shí)現(xiàn)繼承，實(shí)現(xiàn)函數(shù)柯里化等，作為開發(fā)者應(yīng)該清楚各種使用方式以及其內(nèi)部原理。

參考

你不知道的JavaScript（上卷）