Analyse de l'héritage prototypique de JavaScript

L'essence de l'héritage : la réutilisation

Avant de discuter de l'héritage prototypique de javaScript, réfléchissons à la raison pour laquelle nous devons hériter ?

Considérons un scénario, si nous avons deux objets, certains de leurs attributs sont les mêmes et les autres sont différents. Habituellement, une bonne solution de conception consiste à extraire la même logique pour la réutiliser.

Prenons l'exemple de deux étudiants XiaoMing LiLei. Les deux camarades de classe ont leur propre nom et se présenteront. Résumé en tant qu'objet de programme, il peut être représenté comme suit.

var xiaoMing = {
  name : "xiaoMing",
  hello : function(){
    console.log( 'Hello, my name is '+ this.name + '.');
  }
}

var liLei = {
  name : "liLei",
  hello : function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
}

Les étudiants qui ont utilisé Java peuvent d'abord penser à utiliser l'orienté objet pour résoudre ce problème. Créez une classe Person et instanciez deux objets, xiaoMing et liLei. Dans ES6, il existe également un concept similaire aux classes en Java : class .

Ce qui suit utilise la syntaxe ES6 et utilise des idées orientées objet pour reconstruire le code ci-dessus.

class Person {
  constructor(name){
    this.name = name
  }

  hello(){
    console.log(this.name);
  }
}

var xiaoMing = new Person('xiaoMing');
var liLei = new Person('liLei');

Comme vous pouvez le voir, utiliser la classe pour créer des objets atteint l'objectif de réutilisation. La logique sur laquelle il repose est que si deux objets ou plus ont des structures et des fonctions similaires, un modèle peut être abstrait et plusieurs objets similaires peuvent être copiés selon le modèle.

Utilisez des classes pour créer des objets, tout comme un fabricant de vélos qui réutilise encore et encore les mêmes plans pour construire de nombreux vélos.

Bien sûr, il existe plusieurs solutions au problème de la réutilisation. Les classes traditionnelles orientées objet ne sont qu’une des solutions. C’est maintenant au tour de notre protagoniste, « l’héritage prototypique », qui résout le problème de la réutilisation sous un autre angle.

Principe de l'héritage prototypique

Objet prototype

L'objet en javaScript se compose de deux parties, une collection de propriétés ordinaires et des propriétés prototypes.

var o = {
  a : 'a',
  ...
  proto: prototypeObj
}

Les attributs ordinaires font référence à un ; Les attributs du prototype font référence au proto. Cela ne faisait pas partie de la spécification. Plus tard, Chrome a exposé les propriétés sous-jacentes du langage via proto, qui a été progressivement accepté par tout le monde et a été ajouté à la spécification ES6. La valeur de o.proto prototypeObj est objet prototype. L'objet prototype est en fait un objet ordinaire. La raison pour laquelle il est appelé objet prototype est simplement parce qu'il s'agit de la valeur indiquée par l'attribut prototype.

L'objet prototype est spécial car il possède une capacité que les objets ordinaires n'ont pas : partager ses propriétés avec d'autres objets.

Dans la spécification ES6, il est défini comme suit :

object that provides shared properties for other objects

Opération de lecture de propriété

Retournez à l'exemple d'origine et voyez comment l'implémenter en utilisant l'héritage prototypique à des fins de réutilisation.

var prototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  // ...
}

var xiaoMing = {
  name : "xiaoMing",
  proto : prototypeObj
}

var liLei = {
  name : "liLei",
  proto :  prototypeObj
}

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

xiaoMing liLei L'objet n'a pas directement l'attribut hello (méthode), mais il peut lire l'attribut (exécuter la méthode). Pourquoi est-ce ?

Imaginez un scénario dans lequel vous faites des devoirs de mathématiques et rencontrez une question difficile que vous ne savez pas comment résoudre. Et vous avez un bon frère qui est très bon en mathématiques. Vous allez lui demander de l'aide et résoudre ce problème.

Il n'y a pas d'attribut hello sur l'objet xiaoMing, mais il a un bon frère, prototypeObj. Pour les opérations de lecture d'attributs, si l'attribut hello n'est pas trouvé sur xiaoMing, il demandera à son frère prototypeObj. La méthode hello sera donc exécutée.

Chaîne de prototypes

C'est toujours un exemple de résolution de problèmes de mathématiques. Votre question de mathématiques est difficile et votre frère n'a pas la réponse. Il vous recommande de la poser à un autre camarade de classe. De cette façon, vous ne poserez plus de questions jusqu'à ce que vous ayez la réponse ou qu'il n'y ait plus personne à qui demander. C'est comme s'il y avait une chaîne invisible qui vous relie à vos camarades de classe.

En JS, l'opération de lecture est enchaînée couche par couche via un proto, appelé chaîne de prototypes.

var deepPrototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  proto : null
}

var prototypeObj = {
  proto : deepPrototypeObj
}

var xiaoMing = {
  name : "xiaoMing",
  proto : prototypeObj
}

var liLei = {
  name : "liLei",
  proto :  prototypeObj
}

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

Implémentation de l'héritage prototypique

Dans l'exemple ci-dessus, l'héritage prototypique est implémenté en modifiant directement la valeur de l'attribut proto. Mais en production réelle, l'alternative

consiste à utiliser la méthode Object.create().

L'appel de la méthode Object.create() créera un nouvel objet et spécifiera l'objet prototype de l'objet comme premier paramètre transmis.

Changeons l'exemple ci-dessus.

var prototypeObj = {
  hello: function(){
    console.log( 'Hello, my name is '+ this.name  + '.');
  }
  // ...
}

var xiaoMing = Object.create(prototypeObj);
var liLei = Object.create(prototypeObj);

xiaoMing.name = "xiaoMing";
liLei.name = "liLei";

xiaoMing.hello(); // Hello, my name is xiaoMing.
liLei.hello();  // Hello, my name is liLei.

L'auteur de You-Dont-Know-JS a donné à l'implémentation de l'héritage prototypique un nom très intéressant OLOO (objects-linked-to-other-objects). n'utilise aucun concept de classe, uniquement un objet, il est donc très cohérent avec les caractéristiques de JavaScript.

Parce qu'il n'y a pas de classes en JS, seulement des objets .

Malheureusement, il y a trop de programmeurs qui aiment les cours, c'est pourquoi le concept de classe a été ajouté dans ES6. Le prochain article parlera du principe d'implémentation de la classe en JS

Résumé

La classe crée des objets pour atteindre l'objectif de réutilisation. La logique sur laquelle il est basé est que si deux objets ou plus ont des structures et des fonctions similaires, un modèle peut être abstrait et plusieurs objets similaires peuvent être copiés selon le modèle. C'est comme si les fabricants de vélos réutilisaient encore et encore les mêmes plans pour construire de nombreux vélos.

L'utilisation de l'héritage prototypique peut également atteindre l'objectif de réutilisation. La logique sur laquelle il repose est que deux objets ou plus ont des attributs partagés. Les attributs partagés peuvent être résumés dans un autre objet public indépendant, grâce à des attributs de prototype spéciaux, les objets publics et les objets ordinaires peuvent être liés et réutilisés. ) les règles sont parcourues et recherchées pour réaliser le partage d'attribut .

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!