Une plongée approfondie dans les prototypes et l'héritage en JavaScript

Cet article explique principalement comment fonctionnent les prototypes en JavaScript, comment lier les propriétés et les méthodes des objets via l'attribut caché [Prototype] partagé par tous les objets ; et comment créer des constructeurs personnalisés et comment fonctionne l'héritage prototypique pour transmettre la propriété et la méthode. valeurs.

Introduction

JavaScript est un langage basé sur un prototype, ce qui signifie que les propriétés et les méthodes des objets sont accessibles par avoir un partage d'objets universel avec des capacités de clonage et d'extension. C'est ce qu'on appelle l'héritage prototypique et il est différent de l'héritage de classe. JavaScript est relativement unique parmi les langages de programmation orientés objet populaires, car d'autres langages bien connus tels que PHP, Python et Java sont des langages basés sur des classes qui définissent les classes comme des modèles d'objets.

[Recommandations de cours associées : Tutoriel vidéo JavaScript]

Dans l'article, nous apprendrons ce qu'est un prototype d'objet et comment utiliser un constructeur pour étendre le prototype en un nouvel objet. Nous en apprendrons également davantage sur l'héritage et la chaîne de prototypes.

Prototype JavaScript

Chaque objet en JavaScript possède une propriété interne appelée [[Prototype]]. Nous pouvons le démontrer en créant un nouvel objet vide.

let x = {};

C'est ainsi que nous créons habituellement des objets, mais veuillez noter qu'une autre façon d'y parvenir est d'utiliser le constructeur d'objet :

let x = new object()

Crochets entourant [[Prototype]] Indique qu'il s'agit d'une propriété interne et qu'elle n'est pas accessible directement à partir du code.

Pour trouver le [[Prototype]] de cet objet nouvellement créé, nous utiliserons la méthode getPrototypeOf().

Object.getPrototypeOf(x);

La sortie comprendra plusieurs propriétés et méthodes intégrées.

Sortie :

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

Une autre façon de trouver [[Prototype]] consiste à utiliser la propriété __proto__. __proto__ est une propriété qui expose les propriétés internes de l'objet [[Prototype]].

Il est important de noter que . _proto__ est une fonctionnalité héritée et ne doit pas être utilisée dans le code de production, et elle n'existe pas dans tous les navigateurs modernes. Cependant, nous pouvons l'utiliser à des fins de démonstration dans cet article.

x.__proto__;

Le résultat sera le même que si vous utilisiez getPrototypeOf().

Sortie

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

Il est important que chaque objet en JavaScript ait un [[Prototype]] car il crée des méthodes liées pour deux objets ou plus.

Les objets que vous créez ont le même [[Prototype]] que les objets intégrés tels que Date et Array. Cette propriété interne peut être référencée d'un objet à un autre via l'attribut prototype, que nous verrons plus loin dans le tutoriel.

Héritage prototypique

Lorsque vous essayez d'accéder à une propriété ou à une méthode d'un objet, JavaScript recherchera d'abord l'objet lui-même , s'il n'est pas trouvé, qui recherchera le [[Prototype]] de l'objet. Si aucune correspondance n'est trouvée après avoir interrogé l'objet et son [[Prototype]], JavaScript vérifiera le prototype de l'objet lié et poursuivra la recherche jusqu'à ce qu'il atteigne la fin de la chaîne de prototypes.

La fin de la chaîne de prototypes est Object.prototype. Tous les objets héritent des propriétés et des méthodes des objets. Toute recherche au-delà de la fin de la chaîne entraînera null.

Dans notre exemple, x est un objet vide hérité de object. x peut utiliser toutes les propriétés ou méthodes de l'objet, telles que toString().

x.toString();

Sortie

[object Object]

Cette chaîne prototype ne fait qu'une seule chaîne. x - > Nous le savons car si nous essayons d’enchaîner deux propriétés [[Prototype]], elles seront nulles.

x.__proto__.__proto__;

Sortie

null

Regardons un autre type d'objet. Si vous avez de l'expérience avec des tableaux en JavaScript, vous savez qu'ils disposent de nombreuses méthodes intégrées, telles que pop() et push(). La raison pour laquelle ces méthodes sont accessibles lors de la création d'un nouveau tableau est que tout tableau créé peut accéder aux propriétés et méthodes de array.prototype.

Nous pouvons tester cela en créant un nouveau tableau.

let y = [];

Rappelez-vous, nous pouvons également écrire ceci en tant que constructeur de tableau, soit y = new array().

Si nous regardons le [[Prototype]] du nouveau tableau y, nous verrons qu'il a plus de propriétés et de méthodes que l'objet x. Il hérite de tout de Array.prototype.

y.__proto__;

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

Vous remarquerez que l'attribut constructeur sur le prototype est défini sur Array(). La propriété constructor renvoie le constructeur de l'objet, qui est un mécanisme permettant de construire des objets à partir de fonctions.

Nous pouvons désormais relier deux prototypes entre eux car dans ce cas notre chaîne de prototypes est plus longue. Cela ressemble à y -> Array ->

y.__proto__.__proto__;

rrree

Cette chaîne fait désormais référence à Object.prototype. Nous pouvons tester le [[Prototype]] interne par rapport à l'attribut Prototype du constructeur pour nous assurer qu'ils font référence à la même chose.

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

Nous pouvons également utiliser la méthode isPrototypeOf() pour y parvenir.

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的字符类，向原型添加了方法，并创建了单独的字符实例。

Cet article provient de la rubrique tutoriel js, bienvenue pour apprendre !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!