我們在學習JavaScript的過程中，由於對一些概念理解得不是很清楚，但是又想要通過一些方式把它記下來，於是就很容易草率的給這些概念定下一些方便自己記憶的有偏差的結論。
危害比較大的是，有的不準確的結論在網上還廣為流傳。
比如對於this指向的理解中，有這樣一種說法：誰呼叫它，this就指向誰。在我剛開始學習this的時候，我是非常相信這句話的。因為在一些情況下，這樣理解也還算說得通。可是我常常會在開發中遇到一些不一樣的情況，一個由於this的錯誤呼叫，可以讓我懵逼一整天。那個時候我也查資料，在群裡問大神，可是我仍然搞不清楚“我特麼到底錯哪裡了”。其實只是因為我心中有一個不太準確的結論。
這裡吐槽一下百度搜尋，搜尋出來的文章，好多知識點都是錯的，害了勞資好久
所以，我認為需要有這樣一篇文章，來幫助大家全方位的解讀this。讓大家對this，有一個正確的，全面的認知。
在這之前，我們需要來回顧一下執行上下文。
在前面幾篇文章中，我有好幾個地方都提到執行上下文的生命週期，為了防止大家沒有記住，再次來回顧一下，如下圖。
在執行上下文的建立階段，會分別生成變數物件，建立作用域鏈，確定this指向。其中變數物件與作用域鏈我們都已經仔細總結過了，而這裡的關鍵，就是確定this指向。
在這裡，我們需要得出一個非常重要一定要牢記於心的結論，this的指向，是在函式被呼叫的時候確定的。也就是執行上下文被建立時確定的。因此我們可以很容易就能理解到，一個函式中的this指向，可以是非常靈活的。比如下面的例子中，同一個函式由於呼叫方式的不同，this指向了不一樣的物件。
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = 10; var obj = { a: 20 } function fn () { console.log(this.a); } fn(); // 10 fn.call(obj); // 20 |
除此之外，在函式執行過程中，this一旦被確定，就不可更改了。
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = 10; var obj = { a: 20 } function fn () { this = obj; // 這句話試圖修改this，執行後會報錯 console.log(this.a); } fn(); |
一、全域性物件中的this
關於全域性物件的this，我之前在總結變數物件的時候提到過，它是一個比較特殊的存在。全域性環境中的this，指向它本身。因此，這也相對簡單，沒有那麼多複雜的情況需要考慮。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 通過this繫結到全域性物件 this.a2 = 20; // 通過宣告繫結到變數物件，但在全域性環境中，變數物件就是它自身 var a1 = 10; // 僅僅只有賦值操作，識別符號會隱式繫結到全域性物件 a3 = 30; // 輸出結果會全部符合預期 console.log(a1); console.log(a2); console.log(a3); |
二、函式中的this
在總結函式中this指向之前，我想我們有必要通過一些奇怪的例子，來感受一下函式中this的捉摸不定。
|
1 2 3 4 5 6 |
// demo01 var a = 20; function fn() { console.log(this.a); } fn(); |
|
1 2 3 4 5 6 7 8 9 |
// demo02 var a = 20; function fn() { function foo() { console.log(this.a); } foo(); } fn(); |
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// demo03 var a = 20; var obj = { a: 10, c: this.a + 20, fn: function () { return this.a; } } console.log(obj.c); console.log(obj.fn()); |
這幾個例子需要讀者老爺們花點時間稍微感受一下，如果你暫時沒想明白怎麼回事，也不用著急，我們一點一點來分析。
分析之前，我們先直接了當丟擲結論。
在一個函式上下文中，this由呼叫者提供，由呼叫函式的方式來決定。如果呼叫者函式，被某一個物件所擁有，那麼該函式在呼叫時，內部的this指向該物件。如果函式獨立呼叫，那麼該函式內部的this，則指向undefined。但是在非嚴格模式中，當this指向undefined時，它會被自動指向全域性物件。
從結論中我們可以看出，想要準確確定this指向，找到函式的呼叫者以及區分他是否是獨立呼叫就變得十分關鍵。
|
1 2 3 4 5 6 7 8 |
// 為了能夠準確判斷，我們在函式內部使用嚴格模式，因為非嚴格模式會自動指向全域性 function fn() { 'use strict'; console.log(this); } fn(); // fn是呼叫者，獨立呼叫 window.fn(); // fn是呼叫者，被window所擁有 |
在上面的簡單例子中，fn()作為獨立呼叫者，按照定義的理解，它內部的this指向就為undefined。而window.fn()則因為fn被window所擁有，內部的this就指向了window物件。
那麼掌握了這個規則，現在回過頭去看看上面的三個例子，通過新增/去除嚴格模式，那麼你就會發現，原來this已經變得不那麼虛無縹緲，已經有跡可循了。
但是我們需要特別注意的是demo03。在demo03中，物件obj中的c屬性使用this.a + 20來計算，而他的呼叫者obj.c並非是一個函式。因此他不適用於上面的規則，我們要對這種方式單獨下一個結論。
當obj在全域性宣告時，無論obj.c在什麼地方呼叫，這裡的this都指向全域性物件，而當obj在函式環境中宣告時，這個this指向undefined，在非嚴格模式下，會自動轉向全域性物件。可執行下面的例子檢視區別。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
'use strict'; var a = 20; function foo () { var a = 1; var obj = { a: 10, c: this.a + 20, fn: function () { return this.a; } } return obj.c; } console.log(foo()); // 執行會報錯 |
- 實際開發中，並不推薦這樣使用this；
- 上面多次提到的嚴格模式，需要大家認真對待，因為在實際開發中，現在基本已經全部採用嚴格模式了，而最新的ES6，也是預設支援嚴格模式。
再來看一些容易理解錯誤的例子，加深一下對呼叫者與是否獨立執行的理解。
|
1 2 3 4 5 6 7 8 9 10 11 |
var a = 20; var foo = { a: 10, getA: function () { return this.a; } } console.log(foo.getA()); // 10 var test = foo.getA; console.log(test()); // 20 |
foo.getA()中，getA是呼叫者，他不是獨立呼叫，被物件foo所擁有，因此它的this指向了foo。而test()作為呼叫者，儘管他與foo.getA的引用相同，但是它是獨立呼叫的，因此this指向undefined，在非嚴格模式，自動轉向全域性window。
稍微修改一下程式碼，大家自行理解。
|
1 2 3 4 5 6 7 8 9 |
var a = 20; function getA() { return this.a; } var foo = { a: 10, getA: getA } console.log(foo.getA()); // 10 |
靈機一動，再來一個。如下例子。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function foo() { console.log(this.a) } function active(fn) { fn(); // 真實呼叫者，為獨立呼叫 } var a = 20; var obj = { a: 10, getA: foo } active(obj.getA); |
三、使用call，apply顯示指定this
JavaScript內部提供了一種機制，讓我們可以自行手動設定this的指向。它們就是call與apply。所有的函式都具有著兩個方法。它們除了引數略有不同，其功能完全一樣。它們的第一個引數都為this將要指向的物件。
如下例子所示。fn並非屬於物件obj的方法，但是通過call，我們將fn內部的this繫結為obj，因此就可以使用this.a訪問obj的a屬性了。這就是call/apply的用法。
|
1 2 3 4 5 6 7 8 |
function fn() { console.log(this.a); } var obj = { a: 20 } fn.call(obj); |
而call與applay後面的引數，都是向將要執行的函式傳遞引數。其中call以一個一個的形式傳遞，apply以陣列的形式傳遞。這是他們唯一的不同。
|
1 2 3 4 5 6 7 8 9 |
function fn(num1, num2) { console.log(this.a + num1 + num2); } var obj = { a: 20 } fn.call(obj, 100, 10); // 130 fn.apply(obj, [20, 10]); // 50 |
因為call/apply的存在，這讓JavaScript變得十分靈活。因此就讓call/apply擁有了很多有用處的場景。簡單總結幾點，也歡迎大家補充。
- 將類陣列物件轉換為陣列
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function exam(a, b, c, d, e) { // 先看看函式的自帶屬性 arguments 什麼是樣子的 console.log(arguments); // 使用call/apply將arguments轉換為陣列, 返回結果為陣列，arguments自身不會改變 var arg = [].slice.call(arguments); console.log(arg); } exam(2, 8, 9, 10, 3); // result: // { '0': 2, '1': 8, '2': 9, '3': 10, '4': 3 } // [ 2, 8, 9, 10, 3 ] // // 也常常使用該方法將DOM中的nodelist轉換為陣列 // [].slice.call( document.getElementsByTagName('li') ); |
- 根據自己的需要靈活修改this指向
|
1 2 3 4 5 6 7 8 9 10 |
var foo = { name: 'joker', showName: function() { console.log(this.name); } } var bar = { name: 'rose' } foo.showName.call(bar); |
- 實現繼承
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 定義父級的建構函式 var Person = function(name, age) { this.name = name; this.age = age; this.gender = ['man', 'woman']; } // 定義子類的建構函式 var Student = function(name, age, high) { // use call Person.call(this, name, age); this.high = high; } Student.prototype.message = function() { console.log('name:'+this.name+', age:'+this.age+', high:'+this.high+', gender:'+this.gender[0]+';'); } new Student('xiaom', 12, '150cm').message(); // result // ---------- // name:xiaom, age:12, high:150cm, gender:man; |
簡單給有物件導向基礎的朋友解釋一下。在Student的建構函式中，藉助call方法，將父級的建構函式執行了一次，相當於將Person中的程式碼，在Sudent中複製了一份，其中的this指向為從Student中new出來的例項物件。call方法保證了this的指向正確，因此就相當於實現了基層。Student的建構函式等同於下。
|
1 2 3 4 5 6 7 |
var Student = function(name, age, high) { this.name = name; this.age = age; this.gender = ['man', 'woman']; // Person.call(this, name, age); 這一句話，相當於上面三句話，因此實現了繼承 this.high = high; } |
- 在向其他執行上下文的傳遞中，確保this的指向保持不變
如下面的例子中，我們期待的是getA被obj呼叫時，this指向obj，但是由於匿名函式的存在導致了this指向的丟失，在這個匿名函式中this指向了全域性，因此我們需要想一些辦法找回正確的this指向。
|
1 2 3 4 5 6 7 8 9 10 |
var obj = { a: 20, getA: function() { setTimeout(function() { console.log(this.a) }, 1000) } } obj.getA(); |
常規的解決辦法很簡單，就是使用一個變數，將this的引用儲存起來。我們常常會用到這方法，但是我們也要藉助上面講到過的知識，來判斷this是否在傳遞中被修改了，如果沒有被修改，就沒有必要這樣使用了。
|
1 2 3 4 5 6 7 8 9 |
var obj = { a: 20, getA: function() { var self = this; setTimeout(function() { console.log(self.a) }, 1000) } } |
另外就是藉助閉包與apply方法，封裝一個bind方法。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function bind(fn, obj) { return function() { return fn.apply(obj, arguments); } } var obj = { a: 20, getA: function() { setTimeout(bind(function() { console.log(this.a) }, this), 1000) } } obj.getA(); |
當然，也可以使用ES5中已經自帶的bind方法。它與我上面封裝的bind方法是一樣的效果。
|
1 2 3 4 5 6 7 8 |
var obj = { a: 20, getA: function() { setTimeout(function() { console.log(this.a) }.bind(this), 1000) } } |
四、建構函式與原型方法上的this
在封裝物件的時候，我們幾乎都會用到this，但是，只有少數人搞明白了在這個過程中的this指向，就算我們理解了原型，也不一定理解了this。所以這一部分，我認為將會為這篇文章最重要最核心的部分。理解了這裡，將會對你學習JS物件導向產生巨大的幫助。
結合下面的例子，我在例子丟擲幾個問題大家思考一下。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function Person(name, age) { // 這裡的this指向了誰? this.name = name; this.age = age; } Person.prototype.getName = function() { // 這裡的this又指向了誰？ return this.name; } // 上面的2個this，是同一個嗎，他們是否指向了原型物件？ var p1 = new Person('Nick', 20); p1.getName(); |
我們已經知道，this，是在函式呼叫過程中確定，因此，搞明白new的過程中到底發生了什麼就變得十分重要。
通過new操作符呼叫建構函式，會經歷以下4個階段。
- 建立一個新的物件；
- 將建構函式的this指向這個新物件；
- 指向建構函式的程式碼，為這個物件新增屬性，方法等；
- 返回新物件。
因此，當new操作符呼叫建構函式時，this其實指向的是這個新建立的物件，最後又將新的物件返回出來，被例項物件p1接收。因此，我們可以說，這個時候，建構函式的this，指向了新的例項物件，p1。
而原型方法上的this就好理解多了，根據上邊對函式中this的定義，p1.getName()中的getName為呼叫者，他被p1所擁有，因此getName中的this，也是指向了p1。
好啦，我所知道的，關於this的一切，已經總結完了，希望大家在閱讀之後，能夠真正學到東西，然後給我點個贊^_^。如果你發現有什麼錯誤，請在評論中指出，我會盡快修改。先謝過了。