JavaScript中的對象原型是什么？怎么用

JavaScript中的對象原型是什么？怎么用？針對這些問題，今天小編總結(jié)了這篇文章，希望能幫助更多想解決這些問題的朋友找到更加簡單易行的辦法。

介紹

javascript中一切皆對象，而每個對象都有一個原型（Object除外），這個原型，大概就像Java中的父類，所以，基本上你可以認(rèn)為原型就是這個對象的父對象，即每一個對象（Object除外）內(nèi)部都保存了它自己的父對象，這個父對象就是原型。一般創(chuàng)建的對象如果沒有特別指定原型，那么它的原型就是Object(這就很類似Java中所有的類默認(rèn)繼承自O(shè)bject類)。

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__是一個遺留特性，不應(yīng)該在生產(chǎn)代碼中使用，而且它也不是在每個現(xiàn)代瀏覽器中都存在。但是，我們可以在本文中使用它來進(jìn)行演示。

x.__proto__;

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

輸出

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

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

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

原型繼承

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

原型鏈的末尾是Object.prototype。所有對象都繼承對象的屬性和方法。任何超出鏈末端的搜索都會導(dǎo)致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ù)屬性被設(shè)置為Array()。構(gòu)造函數(shù)屬性返回對象的構(gòu)造函數(shù)，這是一種用于從函數(shù)構(gòu)造對象的機(jī)制。

我們現(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;            // true
y.__proto__.__proto__ === Object.prototype; // true

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

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

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

y instanceof Array; // true

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

這些原型可以被鏈接，并且每個額外的對象將繼承整個鏈中的所有內(nèi)容。鏈以O(shè)bject.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ù)。當(dāng)使用new關(guān)鍵字的實例調(diào)用它時，它將成為一個構(gòu)造函數(shù)。在JavaScript中，我們按照慣例將構(gòu)造函數(shù)的第一個字母大寫。

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

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

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

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

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

輸出

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 prototype
Hero.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ù)復(fù)制到另一個構(gòu)造函數(shù)。讓我們創(chuàng)建一個戰(zhàn)士和一個治療構(gòu)造器。

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

兩個新的構(gòu)造函數(shù)現(xiàn)在都具有Hero和unqiue的屬性。我們將把a(bǔ)ttack()方法添加到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)在被認(rèn)為是擁有新屬性的戰(zhàn)士。

輸出

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

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

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 functions
function 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 methods
Warrior.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 instances
const 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)建了單獨的字符實例。

關(guān)于JavaScript中的對象原型就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。