this的原理

1、問題的由來

學懂 JavaScript 語言，一個標誌就是理解下面兩種寫法，可能有不同的結果。

var obj = { foo: function () {} }; var foo = obj.foo;  // 寫法一 obj.foo()  // 寫法二 foo() 

上面代碼中，雖然obj.foo和foo指向同一個函數，可是執行結果可能不同。請看下面的例子。

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

這種差別的緣由，就在於函數體內部使用了this關鍵字。不少教科書會告訴你，this指的是函數運行時所在的環境。對於obj.foo()來講，foo運行在obj環境，因此this指向obj；對於foo()來講，foo運行在全局環境，因此this指向全局環境。因此，二者的運行結果不同。

這種解釋沒錯，可是教科書每每不告訴你，爲何會這樣？也就是說，函數的運行環境究竟是怎麼決定的？舉例來講，爲何obj.foo()就是在obj環境執行，而一旦var foo = obj.foo，foo()就變成在全局環境執行？

本文就來解釋 JavaScript 這樣處理的原理。理解了這一點，你就會完全理解this的做用。

2、內存的數據結構

JavaScript 語言之因此有this的設計，跟內存裏面的數據結構有關係。

var obj = { foo: 5 }; 

上面的代碼將一個對象賦值給變量obj。JavaScript 引擎會先在內存裏面，生成一個對象{ foo: 5 }，而後把這個對象的內存地址賦值給變量obj。

也就是說，變量obj是一個地址（reference）。後面若是要讀取obj.foo，引擎先從obj拿到內存地址，而後再從該地址讀出原始的對象，返回它的foo屬性。

原始的對象以字典結構保存，每個屬性名都對應一個屬性描述對象。舉例來講，上面例子的foo屬性，其實是如下面的形式保存的。

{ foo: { [[value]]: 5 [[writable]]: true [[enumerable]]: true [[configurable]]: true } } 

注意，foo屬性的值保存在屬性描述對象的value屬性裏面。

3、函數

這樣的結構是很清晰的，問題在於屬性的值多是一個函數。

var obj = { foo: function () {} }; 

這時，引擎會將函數單獨保存在內存中，而後再將函數的地址賦值給foo屬性的value屬性。

{ foo: { [[value]]: 函數的地址 ... } } 

因爲函數是一個單獨的值，因此它能夠在不一樣的環境（上下文）執行。

var f = function () {}; var obj = { f: f };  // 單獨執行 f()  // obj 環境執行 obj.f() 

4、環境變量

JavaScript 容許在函數體內部，引用當前環境的其餘變量。

var f = function () { console.log(x); }; 

上面代碼中，函數體裏面使用了變量x。該變量由運行環境提供。

如今問題就來了，因爲函數能夠在不一樣的運行環境執行，因此須要有一種機制，可以在函數體內部得到當前的運行環境（context）。因此，this就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。

var f = function () { console.log(this.x); } 

上面代碼中，函數體裏面的this.x就是指當前運行環境的x。

var f = function () { console.log(this.x); } var x = 1; var obj = { f: f, x: 2, };  // 單獨執行 f() // 1  // obj 環境執行 obj.f() // 2 

上面代碼中，函數f在全局環境執行，this.x指向全局環境的x。

在obj環境執行，this.x指向obj.x。

回到本文開頭提出的問題，obj.foo()是經過obj找到foo，因此就是在obj環境執行。一旦var foo = obj.foo，變量foo就直接指向函數自己，因此foo()就變成在全局環境執行。

 

轉自：http://www.ruanyifeng.com/blog/2018/06/javascript-this.html