這篇文章給大家介紹讓JavaScript 區(qū)別于其它語(yǔ)言的是什么，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)作為成都網(wǎng)站建設(shè)公司，專注成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)，有關(guān)企業(yè)網(wǎng)站制作方案、改版、費(fèi)用等問題，行業(yè)涉及成都純水機(jī)等多個(gè)領(lǐng)域，已為上千家企業(yè)服務(wù)，得到了客戶的尊重與認(rèn)可。

只有了解了原型繼承，你才能說你懂 JS，原型影響著對(duì)象的工作方式。原型繼承經(jīng)常會(huì)在面試中被問到，因?yàn)檫@個(gè)面試官可以看出你對(duì) JS 的了解程度。

1.簡(jiǎn)介

JavaScript 僅具有基本類型，null，undefined和object。JS  和Java或PHP等語(yǔ)言相反，沒有類的概念可以用作創(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í)，但為了簡(jiǎn)單起見，我使用它。在生產(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 。現(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 語(yǔ)法是原型繼承之上的語(yǔ)法糖。

上面的基于類的代碼片段等效于以下內(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所必需的。

在JavaScript中，對(duì)象從其他對(duì)象(原型)繼承屬性，這就是原型繼承的一個(gè)概念。

JS 在對(duì)象的原型中尋找繼承的屬性，也在原型的原型中尋找繼承的屬性，等等。

關(guān)于讓JavaScript 區(qū)別于其它語(yǔ)言的是什么就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

本文名稱：讓JavaScript區(qū)別于其它語(yǔ)言的是什么
文章來源：http://vcdvsql.cn/article44/pphhhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、品牌網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司、、外貿(mào)網(wǎng)站建設(shè)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)