一文帶你領略JS中原型鏈的精妙設計！

      對於很多前端初學者來說，JavaScript中的原型鏈理解是一個很難的過程，有工作了好幾年還無法理解原型鏈設計的大有人在，今天小千就來透過例子給大家介紹這個js原型鏈。

      我們想要理解原型鏈，首先我們先要跳出原型鏈的直接講解，因為javascript中的原型鏈其實涉及到一個javascript的本源設計，就是我們先要探討一下為什麼javascript要設計原型鏈，並且javacript這門語言其實是沒有原型鏈也能完美執行並且保持圖靈完備的。

      首先我們看一下一個風靡世界的遊戲 英雄聯盟LOL 的英雄製作過程我們用javascrip描述 以下 英雄薇恩(vn)。

      此時我們用javascript中的物件來模擬英雄聯盟中的英雄的功能和屬性。

      好， 以上是一個英雄的物件定義， 英雄聯盟中有一個模式叫做 ：克隆模式。

      遊戲玩法介面是這樣的， 以下是十個英雄薇恩

      十個一樣的英雄同場作戰, 甚至私服 mod 可以容納更多的英雄, 我們用程式碼來描述一下！

      這樣設計其實是沒問題的, 英雄的技能組成, 以及思路都是沒問題，但是這樣設計遊戲人物有幾個重大的缺陷！！！！

      這種程式碼存在一個巨大的缺陷不利於商業化，可以觀察到這十個英雄唯一在遊戲中不同的只是 heroLife(玩家受到的傷害不用生命值顯示不同，會根據玩家受到的傷害不同而減少， 每個玩家的生命值在遊戲中都是動態變化的。

      heroName(英雄名字) 以及英雄的四個技能 Q W E R 十個英雄， 都是一樣的。沒必要重複創造十次，去佔據記憶體， 白白消耗使用者的機器效能。

      只有heroLife 英雄的血量根據遊戲的過程受到的傷害不同而動態改變，那樣就得想一個辦法，讓這個英雄共用heroName 以及Q W E R 以達到節約記憶體的效果！

      我們將程式碼進行改進

      好了, 透過以上的改進, 我們就達到我們的目的, 英雄的生命值屬於, 每一個唯一id的英雄, 但是英雄的共有屬性不在佔據獨有的記憶體空間 而是去指向共有的英雄屬性不在白白浪費記憶體空間了！這也是原型鏈設計的最終目的以及初衷！

      但是這樣的寫法, 很拗口也很難理解, JS的官方組織也有意去弱化這個設計，讓不知道這個設計的程式設計師也可以很好的使用這個功能去節約記憶體,然後就有了new 運算子！

      new運算子實際上只做了四步

      1.新生成一個物件

      2.連結到原型

      3.繫結 this

      4.返回新的物件

      以下程式碼演示, 被隱藏的這一步

      你可以理解成: 是把上面的詳細程式碼的過程給你隱藏, 直接讓你得到一個繫結好原型鏈不佔用記憶體的一個新的物件。此例中是英雄vn。

      而實際上的原型鏈是一個為了不佔用記憶體空間而尋祖的過程我們再透過一幅圖來很好的理解原型鏈！

      上圖可以看到, 孫悟空、 六耳獼猴用的技能實際上是菩提老祖創造出來的，他們的共有屬性是__proto__連線 ，對菩提老祖是一種尋祖的過程。

      至於原型鏈的盡頭為什麼是null, 這裡就要設計到一種哲學思想了，宇宙大爆炸之前宇宙也是null，盤古開天地以來天地也是null，所以原型鏈也是javascript的世界觀！

      總結

      原型和原型鏈是JS實現繼承的一種模型。

      原型鏈實際上是為了節約記憶體的一種尋祖現象

      原型鏈是javascript的精妙設計 也是javascript的世界觀