JavaScript中的原型和繼承舉例分析-創(chuàng)新互聯(lián)

這篇文章主要介紹“JavaScript中的原型和繼承舉例分析”，在日常操作中，相信很多人在JavaScript中的原型和繼承舉例分析問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JavaScript中的原型和繼承舉例分析”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

成都創(chuàng)新互聯(lián)主營沂源網(wǎng)站建設的網(wǎng)絡公司,主營網(wǎng)站建設方案,app軟件定制開發(fā),沂源h5微信平臺小程序開發(fā)搭建,沂源網(wǎng)站營銷推廣歡迎沂源等地區(qū)企業(yè)咨詢

介紹

JavaScript是一種基于原型的語言，這意味著對象屬性和方法可以通過具有克隆和擴展能力的通用對象共享。這被稱為原型繼承，與類繼承不同。在流行的面向?qū)ο缶幊陶Z言中，JavaScript是相對獨特的，因為其他著名的語言，如PHP、Python和Java都是基于類的語言，它們將類定義為對象的藍圖。

在文中，我們將學習什么是對象原型，以及如何使用構(gòu)造函數(shù)將原型擴展為新對象。我們還將學習繼承和原型鏈。

JavaScript原型

JavaScript中的每個對象都有一個稱為[[Prototype]]的內(nèi)部屬性。我們可以通過創(chuàng)建一個新的空對象來演示這一點。

let x = {};

這是我們通常創(chuàng)建對象的方法，但是請注意，另一種實現(xiàn)方法是使用對象構(gòu)造函數(shù):

let x = new object()

包圍[[Prototype]]的雙方括號表示它是一個內(nèi)部屬性，不能在代碼中直接訪問。

要找到這個新創(chuàng)建對象的[[Prototype]]，我們將使用getPrototypeOf()方法。

Object.getPrototypeOf(x);

輸出將由幾個內(nèi)置屬性和方法組成。

輸出：

{constructor: ?, __defineGetter__: ?, __defineSetter__: ?, …}

找到的另一種方法[[Prototype]]是通過__proto__財產(chǎn)。__proto__是一個公開[[Prototype]]對象內(nèi)部的屬性。

需要注意的是，. _proto__是一個遺留特性，不應該在生產(chǎn)代碼中使用，而且它也不是在每個現(xiàn)代瀏覽器中都存在。但是，我們可以在本文中使用它來進行演示。

x.__proto__;

輸出將與使用getPrototypeOf()相同。

輸出

{constructor: ?, __defineGetter__: ?, __defineSetter__: ?, …}

重要的是JavaScript中的每個對象都有一個[[Prototype]]，因為它為任何兩個或多個對象創(chuàng)建了鏈接的方法。

您創(chuàng)建的對象和內(nèi)置對象(如Date和Array)一樣具有[[Prototype]]?？梢酝ㄟ^prototype屬性將這個內(nèi)部屬性從一個對象引用到另一個對象，我們將在本教程的后面看到這一點。

原型繼承

當您試圖訪問對象的屬性或方法時，JavaScript將首先搜索對象本身，如果沒有找到，它將搜索對象的[[Prototype]]。如果在查詢對象及其[[Prototype]]后仍然沒有找到匹配項，JavaScript將檢查被鏈接對象的原型，并繼續(xù)搜索，直到到達原型鏈的末端。

原型鏈的末尾是Object.prototype。所有對象都繼承對象的屬性和方法。任何超出鏈末端的搜索都會導致null。

在我們的示例中，x是一個從object繼承而來的空對象。x可以使用對象具有的任何屬性或方法，比如toString()。

x.toString();

輸出

[object Object]

這個原型鏈只有一個鏈長。x - > Object。我們知道這一點，因為如果我們試圖將兩個[[Prototype]]屬性鏈接在一起，它將為null。

x.__proto__.__proto__;

輸出

null

讓我們看看另一種類型的對象。如果您有使用JavaScript處理數(shù)組的經(jīng)驗，就會知道它們有許多內(nèi)置方法，比如pop()和push()。創(chuàng)建新數(shù)組時可以訪問這些方法的原因是，創(chuàng)建的任何數(shù)組都可以訪問array .prototype上的屬性和方法。

我們可以通過創(chuàng)建一個新的數(shù)組來測試它。

let y = [];

請記住，我們也可以把它寫成數(shù)組構(gòu)造函數(shù)，讓y = new array()。

如果我們查看新y數(shù)組的[[Prototype]]，我們將看到它比x對象具有更多的屬性和方法。它繼承了Array.prototype中的所有內(nèi)容。

y.__proto__;

[constructor: ?, concat: ?, pop: ?, push: ?, …]

您將注意到原型上的構(gòu)造函數(shù)屬性被設置為Array()。構(gòu)造函數(shù)屬性返回對象的構(gòu)造函數(shù)，這是一種用于從函數(shù)構(gòu)造對象的機制。

我們現(xiàn)在可以將兩個原型鏈接在一起，因為在這種情況下，我們的原型鏈更長。它看起來像y -> Array -> Object。

y.__proto__.__proto__;

{constructor: ?, __defineGetter__: ?, __defineSetter__: ?, …}

這個鏈現(xiàn)在引用Object.prototype。我們可以根據(jù)構(gòu)造函數(shù)的Prototype屬性測試內(nèi)部的[[Prototype]]，以確定它們引用的是相同的東西。

y.__proto__ === Array.prototype;            // truey.__proto__.__proto__ === Object.prototype; // true

我們還可以使用isPrototypeOf()方法來實現(xiàn)這一點。

Array.prototype.isPrototypeOf(y);      // trueObject.prototype.isPrototypeOf(Array); // true

我們可以使用instanceof操作符來測試構(gòu)造函數(shù)的prototype屬性是否出現(xiàn)在對象原型鏈中的任何位置。

y instanceof Array; // true

總而言之，所有JavaScript對象都具有隱藏的內(nèi)部[[Prototype]]屬性（可能__proto__在某些瀏覽器中公開）。對象可以擴展，并將繼承[[Prototype]]其構(gòu)造函數(shù)的屬性和方法。

這些原型可以被鏈接，并且每個額外的對象將繼承整個鏈中的所有內(nèi)容。鏈以Object.prototype結(jié)束。

構(gòu)造器函數(shù)

構(gòu)造函數(shù)是用來構(gòu)造新對象的函數(shù)。new操作符用于基于構(gòu)造函數(shù)創(chuàng)建新實例。我們已經(jīng)看到了一些內(nèi)置的JavaScript構(gòu)造函數(shù)，比如new Array()和new Date()，但是我們也可以創(chuàng)建自己的自定義模板來構(gòu)建新對象。

例如，我們正在創(chuàng)建一個非常簡單的基于文本的角色扮演游戲。用戶可以選擇一個角色，然后選擇他們將擁有的角色類別，例如戰(zhàn)士、治療者、小偷等等。

由于每個字符將共享許多特征，例如具有名稱、級別和生命值，因此創(chuàng)建構(gòu)造函數(shù)作為模板是有意義的。然而，由于每個角色類可能有非常不同的能力，我們希望確保每個角色只能訪問自己的能力。讓我們看看如何使用原型繼承和構(gòu)造函數(shù)來實現(xiàn)這一點。

首先，構(gòu)造函數(shù)只是一個普通函數(shù)。當使用new關鍵字的實例調(diào)用它時，它將成為一個構(gòu)造函數(shù)。在JavaScript中，我們按照慣例將構(gòu)造函數(shù)的第一個字母大寫。

// Initialize a constructor function for a new Herofunction Hero(name, level) {  this.name = name;  this.level = level;}

我們創(chuàng)建了一個名為Hero的構(gòu)造函數(shù)，它有兩個參數(shù):name和level。因為每個字符都有一個名稱和一個級別，所以每個新字符都有這些屬性是有意義的。this關鍵字將引用創(chuàng)建的新實例，因此將this.name設置為name參數(shù)將確保新對象具有name屬性集。

現(xiàn)在我們可以用new創(chuàng)建一個新的實例。

let hero1 = new Hero('Bjorn', 1);

如果我們在控制臺輸出hero1，我們將看到已經(jīng)創(chuàng)建了一個新對象，其中新屬性按預期設置。

輸出

Hero {name: "Bjorn", level: 1}

現(xiàn)在，如果我們得到hero1的[[Prototype]]，我們將能夠看到構(gòu)造函數(shù)Hero()。(記住，它的輸入與hero1相同。，但這是正確的方法。)

Object.getPrototypeOf(hero1);

輸出

constructor: ? Hero(name, level)

您可能注意到，我們只在構(gòu)造函數(shù)中定義了屬性，而沒有定義方法。在JavaScript中，為了提高效率和代碼可讀性，通常在原型上定義方法。

我們可以使用prototype向Hero添加一個方法。我們將創(chuàng)建一個greet()方法。

// Add greet method to the Hero prototypeHero.prototype.greet = function () {  return `${this.name} says hello.`;}

因為greet()在Hero的原型中，而hero1是Hero的一個實例，所以這個方法對hero1是可用的。

hero1.greet();

輸出

"Bjorn says hello."

如果檢查Hero的[[Prototype]]，您將看到greet()現(xiàn)在是一個可用選項。

這很好，但是現(xiàn)在我們想要為英雄創(chuàng)建角色類。將每個類的所有功能都放到Hero構(gòu)造函數(shù)中是沒有意義的，因為不同的類具有不同的功能。我們希望創(chuàng)建新的構(gòu)造函數(shù)，但也希望它們連接到原始的Hero。

我們可以使用call()方法將屬性從一個構(gòu)造函數(shù)復制到另一個構(gòu)造函數(shù)。讓我們創(chuàng)建一個戰(zhàn)士和一個治療構(gòu)造器。

// Initialize Warrior constructorfunction Warrior(name, level, weapon) {  // Chain constructor with call  Hero.call(this, name, level);  // Add a new property  this.weapon = weapon;}// Initialize Healer constructorfunction Healer(name, level, spell) {  Hero.call(this, name, level);  this.spell = spell;}

兩個新的構(gòu)造函數(shù)現(xiàn)在都具有Hero和unqiue的屬性。我們將把attack()方法添加到Warrior中，而heal()方法添加到Healer中。

Warrior.prototype.attack = function () {  return `${this.name} attacks with the ${this.weapon}.`;}Healer.prototype.heal = function () {  return `${this.name} casts ${this.spell}.`;}

此時，我們將使用兩個可用的新字符類創(chuàng)建字符。

const hero1 = new Warrior('Bjorn', 1, 'axe');const hero2 = new Healer('Kanin', 1, 'cure');

hero1現(xiàn)在被認為是擁有新屬性的戰(zhàn)士。

輸出

Warrior {name: "Bjorn", level: 1, weapon: "axe"}

我們可以使用我們在戰(zhàn)士原型上設置的新方法。

hero1.attack();

Console"Bjorn attacks with the axe."

但是如果我們嘗試使用原型鏈下面的方法會發(fā)生什么呢?

hero1.greet();

輸出

Uncaught TypeError: hero1.greet is not a function

使用call()鏈接構(gòu)造函數(shù)時，原型屬性和方法不會自動鏈接。我們將使用Object.create()來鏈接原型，確保在創(chuàng)建并添加到原型的任何其他方法之前將其放置。

Warrior.prototype = Object.create(Hero.prototype);Healer.prototype = Object.create(Hero.prototype);// All other prototype methods added below…

現(xiàn)在我們可以在一個戰(zhàn)士或治療者的實例上成功地使用Hero的原型方法。

hero1.greet();

輸出

"Bjorn says hello."

這里是我們的角色創(chuàng)建頁面的完整代碼。

// Initialize constructor functionsfunction Hero(name, level) {  this.name = name;  this.level = level;} function Warrior(name, level, weapon) {  Hero.call(this, name, level);   this.weapon = weapon;} function Healer(name, level, spell) {  Hero.call(this, name, level);   this.spell = spell;} // Link prototypes and add prototype methodsWarrior.prototype = Object.create(Hero.prototype);Healer.prototype = Object.create(Hero.prototype); Hero.prototype.greet = function () {  return `${this.name} says hello.`;} Warrior.prototype.attack = function () {  return `${this.name} attacks with the ${this.weapon}.`;} Healer.prototype.heal = function () {  return `${this.name} casts ${this.spell}.`;} // Initialize individual character instancesconst hero1 = new Warrior('Bjorn', 1, 'axe');const hero2 = new Healer('Kanin', 1, 'cure');

使用這段代碼，我們已經(jīng)用基本屬性創(chuàng)建了Hero類，從原始構(gòu)造函數(shù)創(chuàng)建了兩個名為Warrior和Healer的字符類，向原型添加了方法，并創(chuàng)建了單獨的字符實例。

到此，關于“JavaScript中的原型和繼承舉例分析”的學習就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續(xù)學習更多相關知識，請繼續(xù)關注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

網(wǎng)頁標題：JavaScript中的原型和繼承舉例分析-創(chuàng)新互聯(lián)
當前鏈接：http://muchs.cn/article8/cdoiop.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、App開發(fā)、微信公眾號、Google、電子商務、外貿(mào)建站

廣告

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