函數(shù)中的 this 是 JavaScript 中的難點(diǎn)之一。根據(jù) this 的英文詞義，有些人將 this 誤解為指向自身，但事實(shí)顯然不會(huì)這么簡(jiǎn)單。根據(jù) this 的特性，到 ES6 ， this 總的來說有五種綁定情況。下面我將這些情況 一 一 列舉出來:
1.默認(rèn)綁定
默認(rèn)綁定時(shí)， this 綁定全局對(duì)象。如果函數(shù)調(diào)用時(shí)沒有任何修飾符，就會(huì)應(yīng)用 this 的默認(rèn)綁定。這種情況很容易分辨，具體看下方代碼：
function func() {
console.log(this.c);
}
var c = 3;
func() //3
代碼中函數(shù) func 的調(diào)用就是沒有任何修飾符的調(diào)用，這是 this 綁定全局對(duì)象，c 聲明于全局作用域，是全局對(duì)象的屬性。所以 c 可以通過 this.c 訪問，結(jié)果為 3 。
此外，還應(yīng)該注意嚴(yán)格模式與非嚴(yán)格模式的區(qū)別。如果函數(shù)聲明于嚴(yán)格模式中，無論函數(shù)在何處執(zhí)行，this 都不會(huì)綁定到全局對(duì)象。此時(shí)通過 this 訪問全局屬性只會(huì)得到 undefined ，就像下方代碼。
"use strict"
function func() {
console.log(this.c);
}
var c = 3;
func() //undefined
2. 隱式綁定
隱式綁定時(shí)，this 綁定上下文對(duì)象。什么是上下文對(duì)象？舉個(gè)簡(jiǎn)單的例子：
var obj = {num:2,
func:con
}
function con() {
console.log(this.num)；
}
obj.func() // 2
在上方代碼中，一個(gè)對(duì)象內(nèi)部包含一個(gè)函數(shù)，通過對(duì)象引用屬性而間接地引用了 con 函數(shù)。 obj 就是 con 的上下文對(duì)象，this 隱式綁定到 obj ，所以 this.num 等于 2。
如果只是用 1 中的方式調(diào)用函數(shù)，結(jié)果就變成了 undefined。
func() //結(jié)果為 undefined
3. 顯式綁定
顯式綁定時(shí)，this 綁定到特定函數(shù)指定的對(duì)象。有三個(gè)函數(shù)可以指定 this 綁定的對(duì)象，分別為 apply、call、bind。JavaScript 中絕大部分函數(shù)都可以調(diào)用這三個(gè)方法，方式也很簡(jiǎn)單：
var obj = {a:1};
function func(c,b) {
console.log(this.a+c)
}
func.apply(obj,[1,2])
func.call(obj,[1,2]);
func.bind(obj,[1,2]);
三種方法的第一個(gè)參數(shù)都為 this 要綁定的對(duì)象，第二個(gè)參數(shù)都為要傳入的參數(shù)列表。apply 與 call 的區(qū)別為 ，call 函數(shù)可以傳入多個(gè)參數(shù)列表。bind 函數(shù)與另外兩種方法的區(qū)別為，函數(shù)調(diào)用 apply 或 call 后會(huì)立即執(zhí)行。
4. new 綁定
new 綁定時(shí)，this 綁定 new 構(gòu)造的新對(duì)象。代碼如下：
function func(num) {
this.num = num;
}
var obj = new func(3);
console.log(obj.num); // 3
obj 為 new 構(gòu)造的新對(duì)象，所以 this.num 即為 obj.num。
5.箭頭函數(shù)中 this 的綁定
箭頭函數(shù)中，this 繼承外層作用域的 this 綁定。如果外層作用域 this 綁定一個(gè)對(duì)象，箭頭函數(shù)也綁定這個(gè)對(duì)象，就像下方代碼中所展示的：
var obj = {
nun:1,
func:function(){
var boo = () => {
console.log(this.nun);
}
boo();
}
}
obj.func();//1
函數(shù)執(zhí)行時(shí)，obj 是 func 的上下文對(duì)象，所以 func 函數(shù)中的 this 綁定 obj 對(duì)象。由于 func 函數(shù)是箭頭函數(shù)的外層作用域，所以箭頭函數(shù)的 this 也綁定 obj 對(duì)象。因此 this.nun = 1 ,函數(shù)執(zhí)行結(jié)果為 1。
以上就是 JavaScript 中 this 五種綁定的完整總結(jié)。當(dāng)然，實(shí)際代碼中的 this 有各種各樣讓人迷惑的地方，以后的文章會(huì)有相關(guān)介紹。
如果文章有幫助請(qǐng)點(diǎn)個(gè)喜歡支持一下。（_）
