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

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

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

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

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

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

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

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

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

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

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

      我們將代碼進(jìn)行改進(jìn)

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

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

      new操作符實(shí)際上只做了四步

      1.新生成一個(gè)對(duì)象

      2.鏈接到原型

      3.綁定 this

      4.返回新的對(duì)象

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

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

      而實(shí)際上的原型鏈?zhǔn)且粋€(gè)為了不占用內(nèi)存空間而尋祖的過程我們?cè)偻ㄟ^一幅圖來很好的理解原型鏈！

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

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

      總結(jié)

      原型和原型鏈?zhǔn)荍S實(shí)現(xiàn)繼承的一種模型。

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

      原型鏈?zhǔn)莏avascript的精妙設(shè)計(jì) 也是javascript的世界觀

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