重學 this 關鍵字(進階必備知識）

為什麼要學習this關鍵字

1. 面試會問啊！ 總有一些面試官喜歡問你一段不可能這麼寫的代碼。 看一道經典且古老的面試題(學完本文後，末尾會有一道更復雜的面試題等著你哦！)
2. 代碼如下:

var a = 5;
var obj = {
 a : 10,
 foo: function(){
 console.log(this.a)
 }
}
var bar = obj.foo
obj.foo() 
bar()
複製代碼

1. 我在讀 Events 的 lib/events 源碼的時候發現多次用到call關鍵字，看來有必要搞懂 this 與 call 相關的所有內容。
2. 其中幾句代碼是這樣寫的

// 場景1:
function EventEmitter() {
 EventEmitter.init.call(this);
}
// 場景2:
return this.listener.call(this.target);
// 場景3:
return listenerCount.call(emitter, type);
複製代碼
 

1. 箭頭函數使用不當報錯，在封裝 Node.js 的一個 ORM 映射框架 Sequelize 時，封裝表關聯關係，由於使用箭頭函數造成了讀到的上下文發生變化，不是想要的 model 信息，而是指向了全局 。
2. call 關鍵字在寫代碼過程中還是比較常用的，有時候我們常常會使用 call 關鍵字來指定某個函數運行時的上下文，有時候還使用 call 關鍵字實現繼承。

代碼例子如下:

var person = {
 "name": "koala"
};
function changeJob(company, work) {
 this.company = company;
 this.work = work;
};
changeJob.call(person, '百度', '程序員');
console.log(person.work); // '程序員'
複製代碼

注:本文中如不特殊說明都是，輸出結果都是指瀏覽器中輸出結果。 Github 博客開源項目 github.com/koala-codin…函數調用

JS（ES5）裡面有三種函數調用形式：

func(p1, p2) 
obj.child.method(p1, p2)
func.call(context, p1, p2) // 這裡先不講 apply
複製代碼
 

好多初學者都只用到過前兩種情況，而且認為前兩者優於第三者。直到幾天前想系統複習一下this關鍵字，找this相關的各種資料，在知乎看到了一個關於this的討論。 說第三種形式才是正常的調用形式。

func.call(context,p1,p2)
複製代碼

其它兩種都是語法糖，可以等價的變為call形式。 func(p1, p2)等價於 func.call(undefined, p1, p2);

obj.child.method(p1, p2) 等價於 obj.child.method.call(obj.child, p1, p2); 這麼看我們的函數調用只有一種形式:

func.call(context,p1,p2)
複製代碼

這時候是不是就知道this是什麼了，就是上面的context。回到我開篇提到的面試題。

var a = 5;
var obj = {
 a : 10,
 foo: function(){
 console.log(this.a)
 }
}
var bar = obj.foo
obj.foo() 
bar()
複製代碼

• obj.foo() 轉化為call的形式就是obj.foo.call(obj)

所以this指向了obj

• bar() 轉化為call的形式就是bar.call() 由於沒有傳 context，所以 this 就是 undefined，如果是在瀏覽器中最後給你一個默認的 this——window 對象。如果是在 Node.js 環境中運行 this——globel對象。 在瀏覽器中運行結果為5 在 Node.js 環境中為 undefined。

Node.js 環境下指向全局的this關鍵字說明(你可能不知道)

為什麼在瀏覽器或者前端環境可以直接正常輸出值，而在 Node.js 環境中輸出的卻是undefined。 看一下這段代碼你可能就懂了。

(function(exports, require, module, __filename, __dirname) {
 {
 // 模塊的代碼
 // 所以那整個代碼應該在這裡吧
 var a = 10;
 function A(){
 a = 5;
 console.log(a);
 console.log(this.a);
 }
 // const haha = new A();
 A();
 }
});
複製代碼

先說一下 Node.js 環境下在運行某個 js 模塊代碼時候發生了什麼，Node.js 在執行代碼之前會使用一個代碼封裝器進行封裝，例如下面所示：

(function(exports, require, module, __filename, __dirname) {
 {
 // 模塊的代碼
 // 所以那整個代碼應該在這裡吧
 }
});
複製代碼

這段代碼在 Node.js 環境下輸出結果為5，undefined是不是就能理解了。 這裡面的this是默認綁定指向全局，當輸出this.a的時候，全局應該指向這個閉包的最外層。所以輸出結果式是undefined。

[]語法中的this關鍵字

function fn (){ console.log(this) }
var arr = [fn, fn2]
arr[0]() // 這裡面的 this 又是什麼呢？ 
複製代碼

我們可以把 arr0 想象為arr.0( )，雖然後者的語法錯了，但是形式與轉換代碼裡的 obj.child.method(p1, p2) 對應上了，於是就可以愉快的轉換了：

 arr[0]() 
假想為 arr.0()
然後轉換為 arr.0.call(arr)
那麼裡面的 this 就是 arr 了
複製代碼

this綁定原則

默認綁定

默認綁定是函數針對的獨立調用的時候，不帶任何修飾的函數引用進行調用，非嚴格模式下 this 指向全局對象(瀏覽器下指向 Window，Node.js 環境是 Global ），嚴格模式下，this 綁定到 undefined ,嚴格模式不允許this指向全局對象。

var a = 'hello'
var obj = {
 a: 'koala',
 foo: function() {
 console.log(this.a)
 }
}
var bar = obj.foo
bar() // 瀏覽器中輸出: "hello"
複製代碼

這段代碼，bar()就是默認綁定，函數調用的時候，前面沒有任何修飾調用，也可以用之前的 call函數調用形式理解，所以輸出結果是hello。

默認綁定的另一種情況

在函數中以函數作為參數傳遞，例如setTimeOut和setInterval等，這些函數中傳遞的函數中的this指向，在非嚴格模式指向的是全局對象。

例子：

var name = 'koala';
var person = {
 name: '程序員成長指北',
 sayHi: sayHi
}
function sayHi(){ 

 setTimeout(function(){
 console.log('Hello,', this.name);
 })
}
person.sayHi();
setTimeout(function(){
 person.sayHi();
},200);
// 輸出結果 Hello,koala
// 輸出結果 Hello,koala
複製代碼

隱式綁定

判斷 this 隱式綁定的基本標準:函數調用的時候是否在上下文中調用，或者說是否某個對象調用函數。

例子:

var a = 'koala'
var obj = {
 a: '程序員成長指北',
 foo: function() {
 console.log(this.a)
 }
}
obj.foo() // 瀏覽器中輸出: "程序員成長指北"
複製代碼

foo 方法是作為對象的屬性調用的，那麼此時 foo 方法執行時，this 指向 obj 對象。

隱式綁定的另一種情況

當有多層對象嵌套調用某個函數的時候，如 對象.對象.函數,this 指向的是最後一層對象。

例子:

function sayHi(){
 console.log('Hello,', this.name);
}
var person2 = {
 name: '程序員成長指北',
 sayHi: sayHi
}
var person1 = {
 name: 'koala',
 friend: person2
}
person1.friend.sayHi();
// 輸出結果為 Hello, 程序員成長指北
複製代碼

看完這個例子，是不是也就懂了隱式調用的這種情況。

顯式綁定

顯式綁定，通過函數call apply bind 可以修改函數this的指向。call 與 apply 方法都是掛載在 Function 原型下的方法，所有的函數都能使用。

call 和 apply 的區別

1. call和apply的第一個參數會綁定到函數體的this上，如果不傳參數，例如fun.call()，非嚴格模式，this默認還是綁定到全局對象
2. call函數接收的是一個參數列表，apply函數接收的是一個參數數組。

unc.call(thisArg, arg1, arg2, ...) // call 用法
func.apply(thisArg, [arg1, arg2, ...]) // apply 用法
複製代碼

看代碼例子:

var person = {
 "name": "koala"
};
function changeJob(company, work) {
 this.company = company;
 this.work = work;
};
changeJob.call(person, '百度', '程序員');
console.log(person.work); // '程序員'
changeJob.apply(person, ['百度', '測試']);
console.log(person.work); // '測試'
複製代碼

call和apply的注意點

這兩個方法在調用的時候，如果我們傳入數字或者字符串，這兩個方法會把傳入的參數轉成對象類型。

例子:

var number = 1, string = '程序員成長指北';
function getThisType () {
 var number = 3;
 console.log('this指向內容',this);
 console.log(typeof this);
}
getThisType.call(number);
getThisType.apply(string); 
// 輸出結果
// this指向內容 [Number: 1]
// object
// this指向內容 [String: '程序員成長指北'] 

// object
複製代碼

bind函數

bind 方法 會創建一個新函數。當這個新函數被調用時，bind() 的第一個參數將作為它運行時的 this，之後的一序列參數將會在傳遞的實參前傳入作為它的參數。(定義內容來自於 MDN )

func.bind(thisArg[, arg1[, arg2[, ...]]]) // bind 用法
複製代碼

例子:

var publicAccounts = {
 name: '程序員成長指北',
 author: 'koala',
 subscribe: function(subscriber) {
 console.log(subscriber + this.name)
 }
}
publicAccounts.subscribe('小紅') // 輸出結果: "小紅 程序員成長指北"
var subscribe1 = publicAccounts.subscribe.bind({ name: 'Node成長指北', author: '考拉' }, '小明 ')
subscribe1() // 輸出結果: "小明 Node成長指北"
複製代碼

new 綁定

使用new調用函數的時候，會執行怎樣的流程：

1. 創建一個空對象
2. 將空對象的
   proto 指向原對象的 prototype
3. 執行構造函數中的代碼
4. 返回這個新對象

例子:

function study(name){
 this.name = name;
\t
}
var studyDay = new study('koala');
console.log(studyDay);
console.log('Hello,', studyDay.name);
// 輸出結果
// study { name: 'koala' }
// hello，koala
複製代碼

在new study('koala')的時候，會改變this指向，將this指向指定到了studyDay對象。 注意:如果創建新的對象，構造函數不傳值的話，新對象中的屬性不會有值，但是新的對象中會有這個屬性。

手動實現一個new創建對象代碼(多種實現方式哦)

function New(func) {
 var res = {};
 if (func.prototype !== null) {
 res.__proto__ = func.prototype;
 }
 var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));
 if ((typeof ret === "object" || typeof ret === "function") && ret !== null) {
 return ret;
 }
 return res;
} 

var obj = New(A, 1, 2);
// equals to
var obj = new A(1, 2);
複製代碼

this綁定優先級

上面介紹了 this 的四種綁定規則，但是一段代碼有時候會同時應用多種規則，這時候 this 應該如何指向呢？其實它們也是有一個先後順序的，具體規則如下:

new綁定 > 顯式綁定 > 隱式綁定 > 默認綁定

箭頭函數中的 this

箭頭函數

在講箭頭函數中的 this 之前，先講一下箭頭函數。

定義

MDN:箭頭函數表達式的語法比函數表達式更短，並且不綁定自己的this，arguments，super或 new.target。這些函數表達式最適合用於非方法函數(non-method functions)，並且它們不能用作構造函數。

• 箭頭函數中沒有 arguments

常規函數可以直接拿到 arguments 屬性，但是在箭頭函數中如果使用 arguments 屬性，拿到的是箭頭函數外層函數的 arguments 屬性。

例子:

function constant() {
 return () => arguments[0]
}
let result = constant(1);
console.log(result()); // 1
複製代碼

如果我們就是要訪問箭頭函數的參數呢？

你可以通過 ES6 中 命名參數 或者 rest 參數的形式訪問參數

let nums = (...nums) => nums;
複製代碼

• 箭頭函數沒有構造函數

箭頭函數與正常的函數不同，箭頭函數沒有構造函數 constructor，因為沒有構造函數，所以也不能使用 new 來調用，如果我們直接使用 new 調用箭頭函數，會報錯。

例子:

let fun = ()=>{}
let funNew = new fun(); 
// 報錯內容 TypeError: fun is not a constructor
複製代碼

• 箭頭函數沒有原型

原型 prototype 是函數的一個屬性，但是對於箭頭函數沒有它。

例子:

let fun = ()=>{}
console.loh(fun.prototype); // undefined
複製代碼

• 箭頭函數中沒有 super

上面說了沒有原型，連原型都沒有，自然也不能通過 super 來訪問原型的屬性，所以箭頭函數也是沒有 super 的，不過跟 this、arguments、new.target 一樣，這些值由外圍最近一層非箭頭函數決定。

• 箭頭函數中沒有自己的this

箭頭函數中沒有自己的 this，箭頭函數中的 this 不能用 call()、apply()、bind() 這些方法改變 this 的指向，箭頭函數中的 this 直接指向的是調用函數的 上一層運行時。

let a = 'kaola'
let obj = {
 a: '程序員成長指北',
 foo: () => {
 console.log(this.a)
 }
}
obj.foo() // 輸出結果: "koala"
複製代碼 

看完輸出結果，怕大家有疑問還是分析一下，前面我說的箭頭函數中this直接指向的是調用函數的上一層運行時，這段代碼obj.foo在調用的時候如果是不使用箭頭函數this應該指向的是 obj ，但是使用了箭頭函數，往上一層查找，指向的就是全局了，所以輸出結果是koala。

自執行函數

什麼是自執行函數？ 自執行函數在我們在代碼只能夠定義後，無需調用，會自動執行。開發過程中有時間測試某一小段代碼報錯會使用。 代碼例子如下：

(function(){
 console.log('程序員成長指北')
})()
複製代碼

或者

(function(){
 console.log('程序員成長指北')
}())
複製代碼

但是如果使用了箭頭函數簡化一下就只能使用第一種情況了。使用第二種情況簡化會報錯。

(() => {
 console.log('程序員成長指北') 

})()
複製代碼

this應用場景

應用場景其實就是開篇說到的為什麼寫這篇文章，再重複一下。

1. 面試官他考！
2. 看源碼總看見，有時候想確認一下當前的上下文指向。為什麼源碼中用的多，大家可以想想這個問題。
3. 我們寫代碼也會用，經常會出現用 call 指向某個對象的上下文，或者實現繼承等等。

學後小練習

學到這裡是不是發現開篇那道面試題有點簡單，已經不能滿足你目前對於 this 關鍵字的知識儲備。好的，我們來一道複雜點的面試題。

代碼如下：

var length = 10;
function fn() {
 console.log(this.length);
}
 
var obj = {
 length: 5,
 method: function(fn) {
 fn();
 arguments[0](); 

 }
};
 
obj.method(fn, 1);//輸出是什麼？
複製代碼

這段代碼的輸出結果是:10,2

認真讀文章的應該都能正確的答出答案，每一個細節文章中都講了，我在這就不具體分析，如果不懂可以再讀文章，或者直接加我好友我們一起討論，kaola 是一個樂於分享的人，期待與你共同進步。