Compréhension approfondie de l'héritage prototype javascript

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

Avant de discuter de l'héritage prototypique en javaScript, autant réfléchir à la raison pour laquelle l'héritage est nécessaire ?

Considérons un scénario, si nous avons deux objets, certains d'entre eux ont les mêmes propriétés et l'autre a des propriétés différentes. 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'orientation 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 constater, l'utilisation de classes pour créer des objets permet d'atteindre 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 » d'apparaître, 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 à a ; Les attributs du prototype font référence à __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 sera enchaînée couche par couche via __proto__, qui est appelée la 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 (objets liés à d'autres objets). L'avantage de cette méthode d'implémentation est qu'elle est utilisée. 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 repose est que 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 une compréhension approfondie de l'héritage prototypique javaScript. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !