Comprendre les compétences d'héritage d'objet javascript_javascript

Commençons par une étude plus approfondie : qu'est-ce que l'héritage d'objets JavaScript ?

Par exemple, nous avons un constructeur pour l'objet "animal".

  function animal() {
    this.type = '动物';
  }

Il existe également un constructeur pour l'objet "cat".

  function cat(name,color) {
    this.name = name;
    this.color = color;
  }

Nous savons que les chats sont aussi des animaux. Si cet objet chat veut hériter des attributs de l'objet animal, que devons-nous faire ?

Reliure du constructeur
L'utilisation de la liaison constructeur est la méthode la plus simple. Utilisez simplement call ou apply pour lier l'objet parent à l'objet self.

 function cat(name,color) {
    animal.apply(this,arguments);
    this.name = name;
    this.color = color;
  }
  var cat1 = new cat("haha", 'red');
  console.log(cat1.type); //动物

Cependant, cette méthode est relativement rare.

Copier l'héritage
Si vous copiez toutes les propriétés et méthodes de l'objet parent dans l'objet enfant, l'héritage peut également être obtenu.

  function extend(Child, Parent) {
　　　　var p = Parent.prototype;
　　　　var c = Child.prototype;
　　　　for (var i in p) {
　　　　　　c[i] = p[i];
　　　　　　}
　　　　c.uber = p;   //桥梁作用
　　}

Comment utiliser :

 extend(cat, animal);
  var cat1 = new cat("haha","red");
  alert(cat1.type);   // 动物

Héritage du prototype (prototype)
Par rapport à la liaison directe ci-dessus, la méthode d'héritage du prototype est plus courante concernant le prototype, je l'ai brièvement résumée moi-même.

Chaque fonction a un attribut prototype, qui est une référence à un objet Lorsque vous utilisez le mot-clé new pour créer une nouvelle instance, l'objet instance héritera des propriétés et des méthodes de l'objet prototype.

En d'autres termes, si l'attribut prototype du constructeur "cat" pointe vers une instance "animal", alors lorsque l'instance d'objet "cat" est créée, les propriétés et méthodes de l'objet "animal" seront héritées.

Instance héritée

 cat.prototype = new animal();
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.constructor == cat);  //true
  console.log(cat1.type); // 动物

1. Dans la première ligne du code, nous pointons l'objet prototype de la fonction cat vers une instance de l'objet animal (qui contient l'attribut type de animal).

2. Que signifie la deuxième ligne de code ?

1), d'abord, si nous n'avons pas ajouté cette ligne de code, exécutez

cat.prototype = nouvel animal();
console.log(cat.prototype.constructor == animal); //true
En d’autres termes, chaque objet prototype possède en réalité un attribut constructeur pointant vers son constructeur.

2), regardons le code ci-dessous

 cat.prototype = new animal();
  var cat1 = new cat("haha", 'red');
  console.log(cat1.constructor == animal);  //true

D'après ce qui précède, nous voyons que le constructeur de l'instance cat1 est animal, donc c'est évidemment faux. . . cat1 est évidemment généré par new cat(), nous devrions donc le corriger manuellement. La valeur du constructeur de l'objet cat.prototype est remplacée par cat.

3), C'est donc quelque chose auquel nous devons prêter attention. Si nous remplaçons l'objet prototype, nous devons corriger manuellement l'attribut constructeur de l'objet prototype.

o.prototype = {};
o.prototype.constructor = o;
Hériter directement du prototype
Puisque dans les objets animaux, les attributs immuables peuvent être écrits directement dans animal.prototype. Ensuite, laissez directement cat.prototype pointer vers animal.prototype pour obtenir l'héritage.

Maintenant, nous réécrivons d'abord l'objet animal comme :

  function animal() {
  }
  animal.prototype.type = '动物';

Ensuite, implémentez l'héritage :

 cat.prototype = animal.prototype;
  cat.prototype.constructor = cat;
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Par rapport à la méthode précédente, cette méthode est plus efficace (aucune instance animale n'est créée) et permet de gagner de la place. Mais est-ce la bonne chose à faire ? La réponse est incorrecte, continuons à chercher.

cat.prototype = animal.prototype;
Cette ligne de code fait que cat.prototype et animal.prototype pointent vers le même objet, donc si un certain attribut de cat.prototype est modifié, cela sera reflété dans animal.prototype, ce qui n'est évidemment pas ce que nous voulons voir.

Par exemple, si on court :

console.log(animal.prototype.constructor == animal) //false
Le résultat est faux, pourquoi ? cat.prototype.constructor = cat; Cette ligne modifiera également l'attribut constructeur de animal.prototype.

Utiliser des objets vides comme intermédiaires

  var F = function(){};
  F.prototype = animal.prototype;
  cat.prototype = new F();
  cat.prototype.constructor = cat;

En combinant les deux méthodes ci-dessus, comme F est un objet vide, il ne prend presque pas de mémoire. Pour le moment, la modification de l’objet prototype du chat n’affectera pas l’objet prototype de l’animal.

console.log(animal.prototype.constructor == animal); // vrai
Ensuite, nous encapsulons la méthode ci-dessus :

  function extend(Child, Parent) {
　　　　var F = function(){};
　　　　F.prototype = Parent.prototype;
　　　　Child.prototype = new F();
　　　　Child.prototype.constructor = Child;
　　　　Child.uber = Parent.prototype;
　　}

Lors de son utilisation, la méthode est la suivante :

 extend(cat,animal);
  var cat1 = new cat("haha","red");
  console.log(cat1.type); // 动物

Child.uber = Parent.prototype; Cette ligne de code agit comme un pont, permettant à l'attribut uber de l'objet enfant de pointer directement vers l'attribut prototype de l'objet parent. Cela équivaut à ouvrir un canal appelé uber sur. l'auto-objet, permettant aux instances de l'objet enfant de pouvoir utiliser toutes les propriétés et méthodes de l'objet parent.

Ce qui précède est ma compréhension de l'héritage des objets JavaScript. J'espère que cela pourra vous aider plus ou moins. Merci d'avoir lu.