一條快速獲取 Javascript 真相的途徑

這是一篇方法論的文章，鑑於筆者水平有限，不免會有紕漏。可是實在想分享一種「授人以漁」的方法。由於最近看了一些面試題，大多數都在零零碎碎的寫各類總結和技巧。總得來講，會有收穫，每一個做者的分享也很不錯。然而凡事總怕可是——可是，我這裏要說的是，這些經驗式的總結和技巧，如同一個個芝麻粒同樣，無序和零散。這就是我寫這篇文章的目的，如今的媒介資源，讓我能夠垂手可得得到各類大小的芝麻粒，然而芝麻背後的道理？如何知曉？

• Javascript 是什麼
• 從 Object.create 探討 ECMAScript 裏有什麼
• 回顧

Javascript 是什麼

提及前端 Javascript，咱們一般指的是客戶端 ECMAScript 以及 BOM 和 DOM 的結合體。Javascript 還有其餘環境中的變體在此再也不贅述。本文也不討論 BOM 和 DOM 的細節，它們都是一堆 API 的實現。直接呼應本文標題【一條獲取 Javascript 真相的途徑】，就在 ECMAScript 之中。ECMAScript 全稱是：European Computer Manufacturers Association。這麼長的單詞，並不重要，咱們只要知道它是一個標準化的腳本程序設計語言便可。

從 Object.create 探討 ECMAScript 裏有什麼

這一段開始，就是我想認真探討的問題。咱們先來看一個實例：如何實現/模擬 Object.create ？

這裏有一個實現，能夠參考。但是，爲何是這樣？這麼寫的來源又是在哪裏？其實反過來思考，若是咱們知道原理，下面的例子或許就不能稱做一個問題，

Object.create = function (obj) {
    var B={};
    B.__proto__=obj;
    return B;
};
複製代碼

這原理，天然就在 ECMAScript 之中。在正片開始以前，重要的東西發三遍：

• ECMAScript
• ECMAScript
• ECMAScript

下圖是以上連接的內容示例。

這個文檔很是好用，提供了定位當前連接，圖釘和查看引用以及搜索的功能。咱們能夠經過直接輸入 Object.create 定位到相關實現。僞代碼以下：

19.1.2.2 Object.create ( O, Properties )

The create function creates a new object with a specified prototype. When the create function is called, the following steps are taken:

1. If Type(O) is neither Object nor Null, throw a TypeError exception.
2. Let obj be ObjectCreate(O).
3. If Properties is not undefined, then
   1. Return ? ObjectDefineProperties(obj, Properties).
4. Return obj.

經過以上定義得知，實現一個 Object.create 須要大體四步，咱們來按照說明實現以下。這個 create 方法建立了一個擁有特殊原型的對象。當方法調用時，執行如下四步：

1. 判斷對象類型是不是對象或null，若是不是，拋出一個錯誤。
2. 建立一個空對象（這裏面還有一個抽象操做名爲：ObjectCreate 用來定義運行時的普通對象）
3. 若是第二個參數不是 undefined。那麼返回 ObjectDefineProperties(obj, properties) 的調用結果（這一步也是由一個名爲： ObjectDefinePropertis 的抽象操做完成的。它的主要做用就是返回一個包含第二個參數屬性的對象，這些屬性跟 Object.defineProperties(obj, props) 的第二個參數相對應）。
4. 返回該對象

好了，針對以上論述咱們應該能容易實現以下代碼：

function myObjectCreate(obj, properties) {
  if (typeof obj !== "object") {
    throw new Error("not a object");
  }
  let tempObj = {}; //
  tempobj.__proto__ = obj;
  if (properties !== undefined) {
    Object.defineProperties(tempObj, properties);
  }
  return tempObj;
}
複製代碼

以上算是根據 ECMAScript 的標準實現了一遍 Object.create。過程比較簡單，其中有兩個抽象操做，咱們若是不去閱讀這份實現，在實際開發中永遠不會遇到。可是，若是你對這深層次的實現有必定的瞭解或者認識，那麼會在寫代碼的過程當中帶着更順暢的理解去實現功能。這其中區別，不用多說了吧。

回顧

如今咱們回頭看看，這篇文章其實沒有多少知識點。如同我開始所講，但願前端開發者不要老是過着吃別人丟過來的魚片過日子。當咱們學會捕魚（釣魚不太合適）的時候，有不少東西，不言自明。若是針對本文中的例子有所體會，也必定是你本身要經過閱讀 ECMAScript 的實現來完成。這份標準的詞彙量不多，也沒有晦澀的語法。堅持探究下去，裏面還講了 bind call apply 的定義。這些常常會在各類面試題中出現，若是你能理解這內部的操做過程以及邏輯，想必不再用死記硬背這些枯燥乏味的實現了吧。咱們回頭看 Object.create 的實現：

1. 判斷類型
2. 建立空對象並綁定 proto
3. 處理屬性描述符，若是存在的話
4. 返回該對象

但是若是咱們看最開始的那份答案：

Object.create = function (obj) {
    var B={};
    B.__proto__=obj;
    return B;
};
複製代碼

這裏寫的是很簡單易懂，但也就止步到此了。但願本文能給你帶來一些啓發，咱們共同進步，若是有什麼建議，還望不吝賜教。