How Javascript works (Javascript工作原理) (十五) 類和繼承及 Babel 和 TypeScript 代碼轉換探秘
個人總結:讀完這篇文章需要15分鐘，文章主要講解了Babel和TypeScript的工作原理，(例如對es6 類的轉換，是將原始es6代碼轉換為es5代碼，這些代碼中包含著類似於 _classCallCheck 和 _createClass這樣的函數，而這些函數已經在Babel和TypeScript的標準庫中預先定義好了，然後進行處理)。
順便溫習了Object.create這個方法， 比如有一個obj:{name:‘是ho‘,f:function(){alert(1)}}
var a = Object.create(obj)
這時，a對象的原型就是這個obj
以上等同於
var a
a = {} //q是一個對象
a.__proto__= obj
類和繼承及 Babel 和 TypeScript 代碼轉換探秘
這是 JavaScript 工作原理的第十五章。
如今使用類來組織各種軟件工程代碼是最常用的方法。本章將會探索實現 JavaScript 類的不同方法及如何構建類繼承。我們將深入理解原型繼承及分析使用流行的類庫模擬實現基於類繼承的方法。接下來，將會介紹如何使用轉換器為語言添加非原生支持的語法功能和如何在 Babel 和 TypeScript 中運用以支持 ECMAScript 2015 類。最後介紹幾個 V8 原生支持實現類的例子。
概述
JavaScript 沒有原始類型且一切皆對象。比如，如下字符串：
const name = "SessionStack";
可以立即調用新創建對象上的不同方法：
console.log(a.repeat(2)); // 輸出 SessionStackSessionStack
console.log(a.toLowerCase()); // 輸出 sessionstack
JavaScript 和其它語言不一樣，聲明一個字符串或者數值會自動創建一個包含值的對象及提供甚至可以在原始類型上運行的不同方法。
另外一個有趣的事實即諸如數組的復雜數據類型也是對象。當使用 typeof 來檢查一個數組實例的時候會輸出 object。數組中每個元素的索引值即對象的屬性。所以通過數組索引來訪問元素的時候，實際上是在訪問一個數組對象的屬性然後獲得屬性值。當涉及到數據存儲方式的時候，以下兩種定義是相同的：
let names = [“SessionStack”];
let names = {
“0”: “SessionStack”,
“length”: 1
}
因此，訪問數組元素和對象屬性的速度是一樣的。我走了很多彎路才發現該事實。以前有段時間，我得對項目中某段至關重要的代碼進行大量的性能優化。當試驗過其它簡單的辦法之後，我把所有的對象替換為數組。按理說，訪問數組元素會比訪問哈希圖的鍵值更快。然而，我驚奇地發現沒有半點性能的提升。在 JavaScript 中，所有的操作都是由訪問哈希圖中的鍵來實現的且耗時相同。
使用原型模擬類
當談到對象的時候，首先映上眼簾的即類。開發人員習慣於使用類和類之間的關聯來組織程序。雖然 JavaScript 中一切皆對象，但是並沒有使用經典的基於類的繼承。而是使用原型來實現繼承。
在 JavaScript 中，每個對象關聯其原型對象。當訪問對象的一個方法或屬性的時候，首先在對象自身進行搜索。如果沒有找到，則在對象原型上進行查找。
讓我們以定義基礎類的構造函數為例：
function Component(content) {
this.content = content;
}
Component.prototype.render = function() {
console.log(this.content);
}
在原型上添加 render 函數，這樣 Component 的實例就可以使用該方法。當調用該 Component 類實例的方法的時候，首先在實例上查詢該方法。然後在原型上找到該渲染方法。
現在，嘗試擴展 component 類，引入新的子類。
function InputField(value) {
this.content = `<input type="text" value="${value}" />`;
}
如果想要 InputField 擴展 component 類的方法且可以調用其 render 方法，就需要更改其原型。當調用子類的實例方法的時候，肯定不希望在一個空原型上進行查找(這裏其實所有對象都一個共同的原型，這裏原文不夠嚴謹)。該查找會延續到 Component 類上。
InputField.prototype = Object.create(new Component());
這樣，就可以在 Component 類的原型上找到 render 方法。為了實現繼承，需要把 InputField 的原型設置為Component 類的實例。大多數庫使用 Object.setPrototypeOf 來實現繼承。
然而，還有其它事情需要做。每次擴展類，所需要做的事如下：
- 設置子類的原型為父類的實例
- 在子類的構建函數中調用父類構造函數，這樣才可以執行父類構造函數的初始化邏輯。
- 引入訪問父類的方法。當重寫父類方法的時候，會想要調用父類方法的原始實現。
正如你所見，當想要實現所有基於類繼承的功能的時候，每次都需要執行這麽復雜的邏輯步驟。當需要創建這麽多類的時候，即意味著需要把這些邏輯封裝為可重用的函數。這就是開發者當初通過各種類庫來模擬從而解決基於類的繼承的問題。這些解決方案是如此流行，以至於迫切需要語言集成該功能。這就是為什麽 ECMAScript 2015 的第一個重要修訂版中引入了支持基於類繼承的創建類的語法。
類轉換
當在 ES6 或者 ECMAScript 2015 中提議新功能時，JavaScript 開發者社區就迫不及待想要引擎和瀏覽器實現支持。一種好的實現方法即通過代碼轉換。它允許使用 ECMAScript 2015 來進行代碼編寫然後轉換為任何瀏覽器均可以運行的 JavaScript 代碼。這包括使用基於類的繼承來編寫類並轉換為可執行代碼。
Babel 是最為流行的轉換器之一。讓我們通過 babel 轉換 component 類來了解代碼轉換原理。
class Component { constructor(content) { this.content = content; } render() { console.log(this.content) } } const component = new Component(‘SessionStack‘); component.render();
以下為 Babel 是如何轉換類定義的：
var Component = function () { function Component(content) { _classCallCheck(this, Component); this.content = content; } _createClass(Component, [{ key: ‘render‘, value: function render() { console.log(this.content); } }]); return Component; }();
如你所見，代碼被轉換為可在任意環境中運行的 ECMAScript 5 代碼。另外，引入了額外的函數。它們是 Babel 標準庫的一部分。編譯後的文件中引入了 _classCallCheck 和 _createClass 函數。第一個函數保證構造函數永遠不會被當成普通函數調用。這是通過檢查函數執行上下文是否為一個 Component 對象實例來實現的。代碼檢查 this 是否指向這樣的實例。第二個函數 _createClass 通過傳入包含鍵和值的對象數組來創建對象(類)的屬性。
為了理解繼承的工作原理，讓我們分析一下繼承自 Component 類的 InputField 子類。
class InputField extends Component { constructor(value) { const content = `<input type="text" value="${value}" />`; super(content); } }
這裏是使用 Babel 來處理以上示例的輸出：
var InputField = function (_Component) {
_inherits(InputField, _Component);
function InputField(value) {
_classCallCheck(this, InputField);
var content = ‘<input type="text" value="‘ + value + ‘" />‘;
return _possibleConstructorReturn(this, (InputField.__proto__ || Object.getPrototypeOf(InputField)).call(this, content));
}
return InputField;
}(Component);
本例中，在 _inherits 函數中封裝了繼承邏輯。它執行了前面所說的一樣的操作即設置子類的原型為父類的實例。
為了轉換代碼，Babel 執行了幾次轉換。首先，解析 ES6 代碼並轉化成被稱為語法抽象樹的中間展示層，語法抽象樹在之前的文章有講過了。該樹會被轉換為一個不同的語法抽象樹，該樹上每個節點會轉換為對應的 ECMAScript 5 節點。最後，把語法抽象樹轉換為 ES5 代碼。
Babel 中的語法抽象樹
AST 由節點組成，每個節點只有一個父節點。Babel 中有一種基礎類型節點。該節點包含節點的內容及在代碼中的位置的信息。有各種不同類型的節點比如字面量表示字符串，數值，空值等等。也有控制流(if) 和 循環(for, while)的語句節點。另外，還有一種特殊類型的類節點。它是基礎節點類的子類，通過添加字段變量來存儲基礎類的引用和把類的正文作為單獨的節點來拓展自身。
轉化以下代碼片段為語法抽象樹：
class Component {
constructor(content) {
this.content = content;
}
render() {
console.log(this.content)
}
}
以下為該代碼片段的語法抽象樹的大概情況：
創建語法抽象樹後，每個節點轉換為其對應的 ECMAScript 5 節點然後轉化為遵循 ECMAScript 5 標準規範的代碼。這是通過尋找離根節點最遠的節點然後轉換為代碼。然後，他們的父節點通過使用每個子節點生成的代碼片段來轉化為代碼，依次類推。該過程被稱為 depth-first traversal 即深度優先遍歷。
以上示例，首先生成兩個 MethodDefinition 節點，之後類正文節點的代碼，最後是 ClassDeclaration 節點的代碼。
使用 TypeScript 進行轉換
TypeScript 是另一個流行的框架。它引入了一種編寫 JavaScript 程序的新語法，然後轉換為任意瀏覽器或引擎可以運行的 EMCAScript 5 代碼。以下為使用 Typescript 實現 component 類的代碼：
class Component {
content: string;
constructor(content: string) {
this.content = content;
}
render() {
console.log(this.content)
}
}
以下為語法抽象樹示意圖：
同樣支持繼承。
class InputField extends Component {
constructor(value: string) {
const content = `<input type="text" value="${value}" />`;
super(content);
}
}
代碼轉換結果如下：
var InputField = /** @class */ (function (_super) {
__extends(InputField, _super);
function InputField(value) {
var _this = this;
var content = "<input type=\"text\" value=\"" + value + "\" />";
_this = _super.call(this, content) || this;
return _this;
}
return InputField;
}(Component));
類似地，最後結果包含了一些來自 TypeScript 的類庫代碼。__extends 中封裝了和之前第一部分討論的一樣的繼承邏輯。
隨著 Babel 和 TypeScript 的廣泛使用，標準類和基於類的繼承漸漸成為組織 JavaScript 程序的標準方式。這就推動了瀏覽器原生支持類。
類的原生支持
2014 年，Chrome 原生支持類。這就可以不使用任意庫或者轉換器來實現聲明類的語法。
類的原生實現的過程即被稱為語法糖的過程。這只是一個優雅的語法可以被轉換為語言早已支持的相同的原語。使用新的易用的類定義，歸根結底也是要創建構造函數和修改原型。
V8 引擎支持情況
讓我們了解下 V8 是如何原生支持 ES6 類的。如前面文章所討論的那樣，首先解析新語法為可運行的 JavaScript 代碼並添加到 AST 樹中。類定義的結果即在語法抽象樹中添加一個 ClassLiteral 類型的新節點。
該節點包含了一些信息。首先，它把構造函數當成單獨的函數且包含類屬性集。這些屬性可以是一個方法，一個 getter, 一個 setter, 一個公共變量或者私有變量。該節點還儲存了指向父類的指針引用，該父類也並儲存了構造函數，屬性集和及父類引用，依次類推。
一旦把新的 ClassLiteral 轉換為字節碼，再將其轉化為各種函數和原型。
How Javascript works (Javascript工作原理) (十五) 類和繼承及 Babel 和 TypeScript 代碼轉換探秘