Ein tiefer Einblick in Prototypen und Vererbung in JavaScript

In diesem Artikel geht es hauptsächlich darum, wie Prototypen in JavaScript funktionieren und wie man Objekteigenschaften und -methoden über das von allen Objekten gemeinsam genutzte versteckte Attribut [Prototyp] verknüpft, wie man benutzerdefinierte Konstruktoren erstellt und wie die prototypische Vererbung funktioniert, um Eigenschaften und Methoden zu übergeben Werte .

Einführung

JavaScript ist eine prototypbasierte Sprache, was bedeutet, dass auf Objekteigenschaften und -methoden zugegriffen werden kann Universelle Objektfreigabe mit Klon- und Erweiterungsfunktionen. Dies wird als prototypische Vererbung bezeichnet und unterscheidet sich von der Klassenvererbung. JavaScript ist unter den beliebten objektorientierten Programmiersprachen relativ einzigartig, da andere bekannte Sprachen wie PHP, Python und Java klassenbasierte Sprachen sind, die Klassen als Blaupausen für Objekte definieren.

[Verwandte Kursempfehlungen: JavaScript-Video-Tutorial]

In dem Artikel erfahren wir, was ein Objektprototyp ist und wie man einen Konstruktor verwendet, um den Prototyp zu erweitern ein neues Objekt. Wir lernen auch etwas über Vererbung und die Prototypenkette.

JavaScript-Prototyp

Jedes Objekt in JavaScript verfügt über eine interne Eigenschaft namens [[Prototyp]]. Wir können dies demonstrieren, indem wir ein neues leeres Objekt erstellen.

let x = {};

So erstellen wir normalerweise Objekte, aber bitte beachten Sie, dass dies auch durch die Verwendung des Objektkonstruktors erreicht werden kann:

let x = new object()

Eckige Klammern um [[Prototyp]] Zeigt an dass es sich um eine interne Eigenschaft handelt und nicht direkt vom Code aus darauf zugegriffen werden kann.

Um den [[Prototyp]] dieses neu erstellten Objekts zu finden, verwenden wir die Methode getPrototypeOf().

Object.getPrototypeOf(x);

Die Ausgabe besteht aus mehreren integrierten Eigenschaften und Methoden.

Ausgabe:

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

Eine andere Möglichkeit, [[Prototype]] zu finden, ist die __proto__-Eigenschaft. __proto__ ist eine Eigenschaft, die die internen Eigenschaften des [[Prototype]]-Objekts offenlegt.

Es ist wichtig zu beachten, dass _proto__ eine Legacy-Funktion ist und nicht im Produktionscode verwendet werden sollte und nicht in jedem modernen Browser vorhanden ist. Wir können es jedoch in diesem Artikel zu Demonstrationszwecken verwenden.

x.__proto__;

Die Ausgabe ist die gleiche wie bei der Verwendung von getPrototypeOf().

Ausgabe

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

Es ist wichtig, dass jedes Objekt in JavaScript einen [[Prototyp]] hat, da dadurch verknüpfte Methoden für zwei oder mehr beliebige Objekte erstellt werden.

Die von Ihnen erstellten Objekte haben denselben [[Prototyp]] wie integrierte Objekte wie Datum und Array. Auf diese interne Eigenschaft kann über das Prototyp-Attribut von einem Objekt auf ein anderes verwiesen werden, was wir später im Tutorial sehen werden.

Prototypische Vererbung

Wenn Sie versuchen, auf eine Eigenschaft oder Methode eines Objekts zuzugreifen, sucht JavaScript zunächst nach dem Objekt selbst , wenn nicht gefunden, wird nach dem [[Prototyp]] des Objekts gesucht. Wenn nach der Abfrage des Objekts und seines [[Prototyps]] keine Übereinstimmung gefunden wird, überprüft JavaScript den Prototyp des verknüpften Objekts und setzt die Suche fort, bis es das Ende der Prototypenkette erreicht.

Das Ende der Prototypenkette ist Object.prototype. Alle Objekte erben die Eigenschaften und Methoden von Objekten. Jede Suche über das Ende der Kette hinaus führt zu Null.

In unserem Beispiel ist x ein leeres Objekt, das vom Objekt geerbt wurde. x kann alle Eigenschaften oder Methoden verwenden, die das Objekt hat, wie zum Beispiel toString().

x.toString();

Ausgabe

[object Object]

Diese Prototypkette ist nur eine Kette lang. x - > Objekt. Wir wissen das, denn wenn wir versuchen, zwei [[Prototype]]-Eigenschaften miteinander zu verketten, wird es null sein.

x.__proto__.__proto__;

Ausgabe

null

Sehen wir uns einen anderen Objekttyp an. Wenn Sie Erfahrung mit Arrays in JavaScript haben, wissen Sie, dass diese über viele integrierte Methoden verfügen, wie z. B. pop() und push(). Der Grund dafür, dass beim Erstellen eines neuen Arrays auf diese Methoden zugegriffen werden kann, besteht darin, dass jedes erstellte Array auf die Eigenschaften und Methoden in array.prototype zugreifen kann.

Wir können dies testen, indem wir ein neues Array erstellen.

let y = [];

Denken Sie daran, wir können dies auch als Array-Konstruktor schreiben, sei es y = new array().

Wenn wir uns den [[Prototyp]] des neuen y-Arrays ansehen, werden wir feststellen, dass es mehr Eigenschaften und Methoden als das x-Objekt hat. Es erbt alles von Array.prototype.

y.__proto__;

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

Sie werden feststellen, dass das Konstruktorattribut des Prototyps auf Array() gesetzt ist. Die Eigenschaft „constructor“ gibt den Konstruktor des Objekts zurück, bei dem es sich um einen Mechanismus zum Konstruieren von Objekten aus Funktionen handelt.

Wir können jetzt zwei Prototypen miteinander verknüpfen, da in diesem Fall unsere Prototypenkette länger ist. Es sieht aus wie y -> Array ->

y.__proto__.__proto__;

rrree

Diese Kette verweist jetzt auf Object.prototype. Wir können den inneren [[Prototype]] anhand des Prototype-Attributs des Konstruktors testen, um sicherzustellen, dass sie sich auf dasselbe beziehen.

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

Um dies zu erreichen, können wir auch die Methode isPrototypeOf() verwenden.

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

我们可以使用instanceof操作符来测试构造函数的prototype属性是否出现在对象原型链中的任何位置。

y instanceof Array; // true

总而言之，所有JavaScript对象都具有隐藏的内部[[Prototype]]属性（可能__proto__在某些浏览器中公开）。对象可以扩展，并将继承[[Prototype]]其构造函数的属性和方法。

这些原型可以被链接，并且每个额外的对象将继承整个链中的所有内容。链以Object.prototype结束。

构造器函数

构造函数是用来构造新对象的函数。new操作符用于基于构造函数创建新实例。我们已经看到了一些内置的JavaScript构造函数，比如new Array()和new Date()，但是我们也可以创建自己的自定义模板来构建新对象。

例如，我们正在创建一个非常简单的基于文本的角色扮演游戏。用户可以选择一个角色，然后选择他们将拥有的角色类别，例如战士、治疗者、小偷等等。

由于每个字符将共享许多特征，例如具有名称、级别和生命值，因此创建构造函数作为模板是有意义的。然而，由于每个角色类可能有非常不同的能力，我们希望确保每个角色只能访问自己的能力。让我们看看如何使用原型继承和构造函数来实现这一点。

首先，构造函数只是一个普通函数。当使用new关键字的实例调用它时，它将成为一个构造函数。在JavaScript中，我们按照惯例将构造函数的第一个字母大写。

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

我们创建了一个名为Hero的构造函数，它有两个参数:name和level。因为每个字符都有一个名称和一个级别，所以每个新字符都有这些属性是有意义的。this关键字将引用创建的新实例，因此将this.name设置为name参数将确保新对象具有name属性集。

现在我们可以用new创建一个新的实例。

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

如果我们在控制台输出hero1，我们将看到已经创建了一个新对象，其中新属性按预期设置。

输出

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

现在，如果我们得到hero1的[[Prototype]]，我们将能够看到构造函数Hero()。(记住，它的输入与hero1相同。，但这是正确的方法。)

Object.getPrototypeOf(hero1);

输出

constructor: ƒ Hero(name, level)

您可能注意到，我们只在构造函数中定义了属性，而没有定义方法。在JavaScript中，为了提高效率和代码可读性，通常在原型上定义方法。

我们可以使用prototype向Hero添加一个方法。我们将创建一个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()现在是一个可用选项。

这很好，但是现在我们想要为英雄创建角色类。将每个类的所有功能都放到Hero构造函数中是没有意义的，因为不同的类具有不同的功能。我们希望创建新的构造函数，但也希望它们连接到原始的Hero。

我们可以使用call()方法将属性从一个构造函数复制到另一个构造函数。让我们创建一个战士和一个治疗构造器。

// 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;
}

两个新的构造函数现在都具有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}.`;
}

此时，我们将使用两个可用的新字符类创建字符。

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

hero1现在被认为是拥有新属性的战士。

输出

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

我们可以使用我们在战士原型上设置的新方法。

hero1.attack();

Console
"Bjorn attacks with the axe."

但是如果我们尝试使用原型链下面的方法会发生什么呢?

hero1.greet();

输出

Uncaught TypeError: hero1.greet is not a function

使用call()链接构造函数时，原型属性和方法不会自动链接。我们将使用Object.create()来链接原型，确保在创建并添加到原型的任何其他方法之前将其放置。

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

现在我们可以在一个战士或治疗者的实例上成功地使用Hero的原型方法。

hero1.greet();

输出

"Bjorn says hello."

这里是我们的角色创建页面的完整代码。

// 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');

使用这段代码，我们已经用基本属性创建了Hero类，从原始构造函数创建了两个名为Warrior和Healer的字符类，向原型添加了方法，并创建了单独的字符实例。

Dieser Artikel stammt aus der Kolumne JS-Tutorial, willkommen zum Lernen!

Das obige ist der detaillierte Inhalt vonEin tiefer Einblick in Prototypen und Vererbung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!