建站
咨詢
售后
建站咨詢
新聞中心
只有了解了原型繼承，你才能說你懂 JS，原型影響著對(duì)象的工作方式。原型繼承經(jīng)常會(huì)在面試中被問到，因?yàn)檫@個(gè)面試官可以看出你對(duì) JS 的了解程度。
創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都做網(wǎng)站、成都網(wǎng)站建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元蔚縣做網(wǎng)站,已為上家服務(wù),為蔚縣各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108
本文，主要是幫助大家能夠更好的理解 JS 中的原型。
1.簡介
JavaScript 僅具有基本類型，null，undefined和object。JS 和Java或PHP等語言相反，沒有類的概念可以用作創(chuàng)建對(duì)象的模板。
對(duì)象是可組合的結(jié)構(gòu)，由多個(gè)屬性組成：鍵和值對(duì)。
例如，以下對(duì)象cat包含2個(gè)屬性：
- const cat = { sound: 'Meow!', legs: 4 };
由于我想在其他對(duì)象中重用legs屬性，因此讓我們將legs屬性提取到專門的對(duì)象pet中
- const pet = { legs: 4 };
- const cat = { sound: 'Meow!' };
看起來還不錯(cuò)!
但是我仍然想讓cat擁有l(wèi)egs的屬性。如何將cat與pet聯(lián)系起來?
繼承可以幫助我們!
2. 原型對(duì)象
在 JS 中，一個(gè)對(duì)象可以繼承另一個(gè)對(duì)象的屬性。繼承屬性的對(duì)象被稱為 prototype，也就是原型。
按照改定義，我們可以讓pet作為 cat的原型，該原型將繼承l(wèi)egs屬性。使用對(duì)象字面量創(chuàng)建對(duì)象時(shí)，也可以使用特殊屬性__proto__設(shè)置所創(chuàng)建對(duì)象的原型。
- const pet = { legs: 4 };
- const cat = { sound: 'Meow!', __proto__: pet };
- cat.legs; // => 4
cat 對(duì)象現(xiàn)在從原型pet繼承了legs 。現(xiàn)在，我們可以使用cat.legs，其值為4。
另一方面，sound 屬性是一個(gè)自有屬性，因?yàn)樗侵苯釉趯?duì)象上定義的。
JavaScript 原型繼承本質(zhì)：對(duì)象可以從其他對(duì)象(原型)繼承屬性。
你可能想知道：為什么首先需要繼承?
繼承解決了數(shù)據(jù)和邏輯重復(fù)的問題。通過繼承，對(duì)象可以共享屬性和方法。
- const pet = { legs: 4 };
- const cat = { sound: 'Meow!', __proto__: pet };
- const dog = { sound: 'Bark!', __proto__: pet };
- const pig = { sound: 'Grunt!', __proto__: pet };
- cat.legs; // => 4
- dog.legs; // => 4
- pig.legs; // => 4
cat，dog和pig 都重復(fù)使用了屬性legs。
注意：__proto__已過時(shí)，但為了簡單起見，我使用它。在生產(chǎn)環(huán)境中，建議使用Object.create()。
2.1 自有與繼承的屬性
如果對(duì)象自己的屬性和繼承屬性名稱一樣，JS 會(huì)優(yōu)先選擇自有屬性。
在以下示例中，chicken對(duì)象具有自己的屬性legs，但還繼承了具有相同名稱legs的屬性：
- const pet = { legs: 4 };
- const chicken = { sound: 'Cluck!', legs: 2, __proto__: pet };
- chicken.legs; // => 2
cat 對(duì)象從原型pet繼承了legs ?，F(xiàn)在，您可以使用屬性訪問器cat.legs，其值為4。
chicken.legs的值為2。JavaScript在繼承上選擇自有屬性legs 。
如果刪除自有屬性，則 JS 會(huì)選擇繼承的屬性!
- const pet = { legs: 4 };
- const chicken = { sound: 'Cluck!', legs: 2, __proto__: pet };
- chicken.legs; // => 2
- delete chicken.legs;
- chicken.legs; // => 4
3.隱式原型
創(chuàng)建對(duì)象時(shí)，未明確設(shè)置原型，JS 會(huì)為我們創(chuàng)建的對(duì)象類型分配一個(gè)隱式原型。
我們?cè)賮砜纯磒et對(duì)象
- const pet = { legs: 4 };
- pet.toString(); // => `[object Object]`
pet只有一個(gè)屬性legs，但是，我們可以調(diào)用方法pet.toString()。這個(gè)toString()哪里來的?
創(chuàng)建pet 對(duì)象后，JS 為其分配了一個(gè)隱式原型對(duì)象。pet從這個(gè)隱式原型中繼承了toString()方法：
Object.getPrototypeOf() 方法返回指定對(duì)象的原型(內(nèi)部[[Prototype]]屬性的值)。
4. 原型鏈
我們?cè)賱?chuàng)建tail 對(duì)象，讓他也成為pet的原型：
- const tail = { hasTail: true };
- const pet = { legs: 4, __proto__: tail };
- const cat = { sound: 'Meow!', __proto__: pet };
- cat.hasTail; // => true
cat從它的原型pet繼承了legs 的屬性。但是cat也從其原型的原型tail 繼承了hasTail 。
訪問屬性myObject.myProp時(shí)，JS 會(huì)在myObject自身的屬性內(nèi)，對(duì)象的原型，原型的原型中依次搜索myProp，以此類推，直到遇到null作為原型。
換句話說，JavaScript在原型鏈中尋找繼承的屬性。
5. 但 JavaScript有類
從剛開始講的 JS 只有對(duì)象，沒有類，你可能就已經(jīng)感到困惑，你在說什么鬼。這可能是因?yàn)樵?ES6 中 你已經(jīng)開始使用class關(guān)鍵字了。
例如，你可以編寫一個(gè)Pet類：
- class Pet {
- legs = 4;
- constructor(sound) {
- this.sound = sound;
- }
- }
- const cat = new Pet('Moew!');
- cat.legs; // => 4
- cat instanceof Pet; // => true
并在實(shí)例化該類時(shí)創(chuàng)建cat 。
其實(shí) ，JS 中的class 語法是原型繼承之上的語法糖。
上面的基于類的代碼片段等效于以下內(nèi)容：
- const pet = {
- legs: 4
- };
- function CreatePet(sound) {
- return { sound, __proto__: pet };
- }
- CreatePet.prototype = pet;
- const cat = CreatePet('Moew!');
- cat.legs; // => 4
- cat instanceof CreatePet; // => true
CreatePet.prototype = pet賦值是使cat instanceof CreatePet值為true所必需的。
6.總結(jié)
在JavaScript中，對(duì)象從其他對(duì)象(原型)繼承屬性，這就是原型繼承的一個(gè)概念。
JS 在對(duì)象的原型中尋找繼承的屬性，也在原型的原型中尋找繼承的屬性，等等。
雖然最初的原型繼承看起來很笨拙，但是理解它之后，我們會(huì)喜歡它的簡單性和可能性。
作者：Dmitri Pavlutin 譯者：前端小智 來源：sitepoint
原文：https://dmitripavlutin.com/javascript-prototypal-inheritance/
本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。
網(wǎng)站欄目：讓 JavaScript 區(qū)別于其它語言的是什么？原型繼承！
URL地址：http://www.dlmjj.cn/article/dhsejhh.html
