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

this是什么？

指向函數(shù)本身？

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

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。也就是說this其實并沒有指向函數(shù)本身。

指向作用域？

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

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

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

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

this的綁定規(guī)則

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

1.默認(rèn)綁定

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

// 非嚴(yán)格模式 var name = 'Willem'; function foo() {     console.log(this.name); } foo(); // Willem  // 執(zhí)行時啟用嚴(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，說明指向的確實是window對象。需要特別注意的一點是：嚴(yán)格模式下指向undefined指的是函數(shù)體內(nèi)啟用了嚴(yán)格模式，而不是調(diào)用時。

2. 隱式綁定

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

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的一個屬性進(jìn)行執(zhí)行，此時obj作為了函數(shù)的上下文，此時this指向了obj，this.a等價于obj.a。在對象屬性鏈?zhǔn)降恼{(diào)用中，只有最后一層會對調(diào)用位置產(chǎn)生影響，也就是說最后一層會影響this指向。

有很多前端的小伙伴面試時或許還見過這樣的題：

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

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

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

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)是隱式賦值）需要特別注意隱式丟失的問題 。

3. 顯示綁定

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

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

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

4. new

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

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

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

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

優(yōu)先級

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

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