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

this是什么？

指向函數(shù)本身？

光從字面意思上來(lái)看，很容易讓人覺得this就是指向函數(shù)本身，事實(shí)上真是這樣嗎？我們可以看一個(gè)例子。

function foo() {     this.count = this.count ? this.count + 1 : 1; }  for (let i = 0; i < 5; i++) {     foo(); } console.log(foo.count); // undefined

可以看到，foo.count輸出的并不是我們期待的5，而是一開始賦值的0。也就是說(shuō)this其實(shí)并沒有指向函數(shù)本身。

指向作用域？

還有一種比較常見的誤解是，this指向了函數(shù)的作用域。

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

這段代碼中，bar在foo中運(yùn)行，輸出this.a得到的卻是undefined。也就是說(shuō)this也不是指向函數(shù)的作用域的。

這也不是，那也不是，this到底是什么呢？在函數(shù)執(zhí)行過(guò)程中，會(huì)創(chuàng)建一個(gè)執(zhí)行上下文（一個(gè)記錄），this就是這個(gè)上下文中的一個(gè)屬性，在執(zhí)行過(guò)程中用到。而this的指向則是取決于函數(shù)在哪里被調(diào)用。

this的綁定規(guī)則

this的綁定有四條可以遵循的規(guī)則，下面將一一介紹。

1.默認(rèn)綁定

獨(dú)立函數(shù)調(diào)用，非嚴(yán)格模式下，指向window；嚴(yán)格模式下指向undefined。 這里說(shuō)的獨(dú)立函數(shù)可以理解成除開后面三種情況的一般函數(shù)調(diào)用。

// 非嚴(yán)格模式 var name = 'Willem'; function foo() {     console.log(this.name); } foo(); // Willem  // 執(zhí)行時(shí)啟用嚴(yán)格模式 (function() {     'use strict';     foo(); // Willem     bar(); // Cannot read property 'name' of undefined })();  // 函數(shù)體使用嚴(yán)格模式 function bar() {     'use strict';     console.log(this.name); }

上述代碼中，分別在普通環(huán)境中輸出Willem，說(shuō)明指向的確實(shí)是window對(duì)象。需要特別注意的一點(diǎn)是：嚴(yán)格模式下指向undefined指的是函數(shù)體內(nèi)啟用了嚴(yán)格模式，而不是調(diào)用時(shí)。

2. 隱式綁定

隱式綁定說(shuō)的是，在函數(shù)執(zhí)行時(shí)，是否被某個(gè)對(duì)象擁有或包含。換句話說(shuō)，在函數(shù)運(yùn)行時(shí)，是否是作為某個(gè)對(duì)象的屬性的方式運(yùn)行的，這樣說(shuō)還是不是很清楚，來(lái)個(gè)栗子：

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

示例中，foo被當(dāng)做了obj的一個(gè)屬性進(jìn)行執(zhí)行，此時(shí)obj作為了函數(shù)的上下文，此時(shí)this指向了obj，this.a等價(jià)于obj.a。在對(duì)象屬性鏈?zhǔn)降恼{(diào)用中，只有最后一層會(huì)對(duì)調(diào)用位置產(chǎn)生影響，也就是說(shuō)最后一層會(huì)影響this指向。

有很多前端的小伙伴面試時(shí)或許還見過(guò)這樣的題：

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

這是隱式綁定最常見的一個(gè)問(wèn)題，隱式丟失：被隱式綁定的函數(shù)會(huì)丟失綁定對(duì)象。雖然bar是對(duì)obj.foo的一個(gè)引用，但實(shí)際上引用的還是foo函數(shù)本身，bar函數(shù)就是一個(gè)獨(dú)立函數(shù)的調(diào)用，參考第一條，此時(shí)this指向了window|undefined。

還有一種經(jīng)典的回調(diào)函數(shù)的this指向問(wèn)題也是隱式丟失。

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

小結(jié)：在隱式綁定中，賦值的情況下（回調(diào)是隱式賦值）需要特別注意隱式丟失的問(wèn)題 。

3. 顯示綁定

JavaScript中的Function提供了兩個(gè)方法call和apply，傳入的第一個(gè)參數(shù)是一個(gè)對(duì)象，會(huì)把this綁定到這個(gè)對(duì)象。如果是傳入的是一個(gè)原始值（字符串、數(shù)字、布爾），會(huì)被轉(zhuǎn)換成它的對(duì)象形式（new String(), new Boolean(), new Number()）。

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

雖然我們可以使用call和apply顯式指定this的指向，但是還是會(huì)存在丟失綁定的問(wèn)題?？梢酝ㄟ^(guò)所謂的硬綁定（bind函數(shù)）來(lái)解決，這里就不過(guò)多贅述了。

4. new

最后要介紹的是使用new來(lái)做this的綁定的修改，有手動(dòng)實(shí)現(xiàn)過(guò)new的童鞋應(yīng)該比較清楚，js中的new和其他語(yǔ)言的new完全不同。
new的執(zhí)行過(guò)程：

1. 創(chuàng)建一個(gè)空對(duì)象
2. 當(dāng)前空對(duì)象執(zhí)行原型對(duì)接
3. 返回函數(shù)執(zhí)行結(jié)果或者當(dāng)前這個(gè)空對(duì)象

function Foo(a) {     this.a = a; }  var bar = new Foo(2); bar.a; // 2

使用 new 來(lái)調(diào)用函數(shù)時(shí)，我們會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 函數(shù)調(diào)用中的 this上。

優(yōu)先級(jí)

最后簡(jiǎn)單說(shuō)一下優(yōu)先級(jí)的關(guān)系：new > 顯示綁定 > 隱式綁定 > 默認(rèn)綁定。

推薦學(xué)習(xí)：《javascript基礎(chǔ)教程》