this的由來

 JS的數據結構：

var obj = { foo:  5 };

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

 也就是說，變量obj是一個地址（reference）。後面如果要讀取obj.foo，引擎先從obj拿到內存地址{foo:5}這個對象的位置，然後再從該地址讀出原始的對象，返回它的foo屬性。

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

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

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

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

 重點：

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

 

由於函數是一個單獨的值，所以它可以在不同的環境（上下文）執行。

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

// 單獨執行
f()

// obj 環境執行
obj.f()

this的由來：

現在問題就來了，由於函數可以在不同的運行環境執行，所以需要有一種機制，能夠在函數體內部獲得當前的運行環境（context）。所以，this就出現了，它的設計目的就是在函數體內部，指代函數當前的運行環境。

 

原文：https://www.ruanyifeng.com/blog/2018/06/javascript-this.html