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

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

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

      此時我們用javascript中的對象來模擬英雄聯(lián)盟中的英雄的功能和屬性。

      好， 以上是一個英雄的對象定義， 英雄聯(lián)盟中有一個模式叫做 ：克隆模式。

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

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

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

      這種代碼存在一個巨大的缺陷不利于商業(yè)化，可以觀察到這十個英雄唯一在游戲中不同的只是 heroLife(玩家受到的傷害不用生命值顯示不同，會根據(jù)玩家受到的傷害不同而減少， 每個玩家的生命值在游戲中都是動態(tài)變化的。

      heroName(英雄名字) 以及英雄的四個技能 Q W E R 十個英雄， 都是一樣的。沒必要重復創(chuàng)造十次，去占據(jù)內(nèi)存， 白白消耗用戶的機器性能。

      只有heroLife 英雄的血量根據(jù)游戲的過程受到的傷害不同而動態(tài)改變，那樣就得想一個辦法，讓這個英雄共用heroName 以及Q W E R 以達到節(jié)約內(nèi)存的效果！

      我們將代碼進行改進

      好了, 通過以上的改進, 我們就達到我們的目的, 英雄的生命值屬于, 每一個唯一id的英雄, 但是英雄的共有屬性不在占據(jù)獨有的內(nèi)存空間 而是去指向共有的英雄屬性不在白白浪費內(nèi)存空間了！這也是原型鏈設(shè)計的最終目的以及初衷！

      但是這樣的寫法, 很拗口也很難理解, JS的官方組織也有意去弱化這個設(shè)計，讓不知道這個設(shè)計的程序員也可以很好的使用這個功能去節(jié)約內(nèi)存,然后就有了new 操作符！

      new操作符實際上只做了四步

      1.新生成一個對象

      2.鏈接到原型

      3.綁定 this

      4.返回新的對象

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

      你可以理解成: 是把上面的詳細代碼的過程給你隱藏, 直接讓你得到一個綁定好原型鏈不占用內(nèi)存的一個新的對象。此例中是英雄vn。

      而實際上的原型鏈是一個為了不占用內(nèi)存空間而尋祖的過程我們再通過一幅圖來很好的理解原型鏈！

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

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

      總結(jié)

      原型和原型鏈是JS實現(xiàn)繼承的一種模型。

      原型鏈實際上是為了節(jié)約內(nèi)存的一種尋祖現(xiàn)象

      原型鏈是javascript的精妙設(shè)計 也是javascript的世界觀

      最后歡迎對前端開發(fā)培訓感興趣的同學來到千鋒web前端培訓班了解我們的前端培訓課程，全程名師面授確保教學質(zhì)量，現(xiàn)在咨詢更有報名優(yōu)惠和免費前端學習資料可以領(lǐng)取，先到先得哦！