對于很多前端初學者來說，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的世界觀

本文來自千鋒教育，轉載請注明出處。

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的一文带你领略JS中原型链的精妙设计！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。