(Super classique) Résumé des méthodes d'héritage d'objets en JavaScript

Ce que cet article vous apporte est un résumé de la méthode (super classique) d'héritage d'objets en JavaScript. Elle a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

1. Héritage de la chaîne de prototypes

Points clés : Utilisez des prototypes pour permettre à un type de référence d'hériter des propriétés et des méthodes d'un autre type de référence. La relation entre les constructeurs, les prototypes et les instances : chaque constructeur possède un objet prototype, l'objet prototype contient un pointeur vers le constructeur et les instances contiennent un pointeur interne vers l'objet prototype.

function SuperType(){
  this.property = true;
}
SuperType.prototype.getSuperValue = function(){
  return this.property;
};

function SubType(){
  this.subproperty = false;
}
// 继承自SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function (){
  return this.subproperty;
};

var example = new SubType();
alert(example.getSuperValue());//true

Lors de l'utilisation de prototypes pour créer des objets, il y aura un problème selon lequel les opérations sur les types de référence par plusieurs instances seront falsifiées. Ce problème existe également ci-dessus, comme suit :

function SuperType(){
  this.colors = ["red", "blue", "green"];
}
function SubType(){}//即使没有写，也不会影响结果

SubType.prototype = new SuperType();

var example1 = new SubType();
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"

var example2 = new SubType(); 
alert(example.colors); //"red,blue,green,black"

Deux instances Les propriétés de couleurs des objets exemple1 et exemple2 pointent vers le même point, et la modification de l'une affectera les propriétés de l'autre instance.

Inconvénients :
① Les attributs de type référence de plusieurs instances d'héritage de chaîne de prototype pointent vers le même point. Si une instance modifie l'attribut de prototype, l'attribut de prototype de l'autre instance sera également modifié ; 🎜>② Les paramètres ne peuvent pas être transmis ;
③Héritage unique.

2. Emprunter l'héritage du constructeur

Points clés : utilisez .call() et .apply() pour introduire le constructeur de la classe parent dans la fonction de la classe enfant, et utilisez le constructeur de la classe parent pour améliorer l'instance de sous-classe, ce qui équivaut à copier l'instance de la classe parent dans la sous-classe.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}

function SubType(name, age){
  // 继承自SuperType
  SuperType.call(this, name);  
  this.age = age;
}

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors);//"red,blue,green,black"

var example2 = new SubType();
alert(example2.colors);//"red,blue,green"

alert(example1.name); // "Mike"
alert(example1.age); // 23

Le point clé de l'héritage du constructeur d'emprunt est que SuperType

.call(this, name) appelle le constructeur SuperType De cette façon, chaque instance de SubType fera une copie de. les propriétés.

Inconvénients :

① ne peut hériter que des attributs et des méthodes d'instance de la classe parent, mais pas des attributs/méthodes du prototype
② ne peut pas réaliser la réutilisation des constructeurs, et chaque sous-classe a une instance de ; la classe parent Les copies de fonctions affectent les performances et le code sera gonflé.

3. Héritage combiné

Points clés : Les avantages des deux modes d'

héritage de chaîne de prototypes et héritage de constructeur Combinés ensemble, en appelant le constructeur de la classe parent, en héritant des propriétés de la classe parent et en conservant les paramètres transmis, puis en utilisant l'instance de la classe parent comme prototype de la sous-classe pour réaliser la réutilisation des fonctions.

L'idée derrière cela est que

utilise la chaîne de prototypes pour obtenir l'héritage des propriétés et des méthodes du prototype , et obtient l'héritage des propriétés d'instance en empruntant des constructeurs de cette manière. , Il réalise non seulement la réutilisation des fonctions en définissant des méthodes sur le prototype, mais garantit également que chaque instance a ses propres attributs.

function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

function SubType(name, age){
  //继承属性
  SuperType.call(this, name);
  this.age = age;
}

// 继承方法
SubType.prototype = new SuperType(); 
SubType.prototype.constructor = SubType; 
SubType.prototype.sayAge = function(){
    alert(this.age);
};

var example1 = new SubType("Mike", 23);
example1.colors.push("black");
alert(example1.colors); //"red,blue,green,black"
example1.sayName(); //"Mike";
example1.sayAge(); //23

var example2 = new SubType("Jack", 22);
alert(example2.colors); //"red,blue,green"
example2.sayName(); //"Jack";
example2.sayAge(); //22

Défaut :

Les attributs et méthodes d'instance dans la classe parent existent à la fois dans l'instance de la sous-classe et dans le prototype de la sous-classe, mais ils n'occupent donc que de la mémoire lors de l'utilisation du. sous-classe Lorsqu'une classe crée un objet instance, il y aura
deux copies des mêmes attributs/méthodes dans son prototype. -------Cette méthode est le modèle d'héritage le plus couramment utilisé en JavaScript.

4. Héritage prototypique

Point clé : envelopper un objet avec une fonction, puis renvoyer l'appel de cette fonction, cette fonction devient une fonction qui peut ajouter des attributs à volonté, instance ou objet. C'est le principe de object.create(), qui assigne directement un objet au prototype du constructeur.

function object(obj){
  function O(){}
  O.prototype = obj;
  return new O();
}

object() effectue une copie superficielle de l'objet transmis, pointant le prototype de O directement vers l'objet transmis.

var person = {
  name: "Mike",
  friends: ["Jack", "Tom", "Joes"]
};

var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Peter");

var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("BoBo");

alert(person.friends);   //"Jack,Tom,Joes,Peter,BoBo"

ECMAScript5 standardise l'héritage prototypique via la nouvelle méthode Object.create(). Cette méthode reçoit deux paramètres : un objet utilisé comme prototype du nouvel objet et un objet utilisé comme nouvel objet pour définir des éléments supplémentaires. propriétés. .

var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

Inconvénients :

①Les attributs de type référence de plusieurs instances héritées par la chaîne de prototype pointent vers le même point (toutes les instances hériteront des attributs du prototype), il y a la possibilité de falsification ;
②Impossible de transmettre les paramètres, impossible de réutiliser. (De nouveaux attributs d'instance sont ajoutés ultérieurement).

5. Héritage parasite

Point clé : créer une fonction uniquement pour encapsuler le processus d'héritage, qui améliore l'objet d'une manière ou d'une autre en interne et renvoie finalement le constructeur. (C'est comme mettre un shell autour de l'héritage prototypique puis le renvoyer) La fonction principale de

function createAnother(original){ 
  varclone=object(original); // 过调用函数创建一个新对象
  clone.sayHi = function(){ // 以某种方式增强这个对象
    alert("hi");
  };
  return clone; // 返回对象
}

est d'ajouter des attributs et des méthodes au constructeur pour améliorer la fonction.

var person = {
  name: "Nicholas",
  friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi(); //"hi"

Inconvénients :

① Les attributs de type référence de plusieurs instances héritées par la chaîne de prototype pointent vers le même point, et il y a une possibilité de falsification
② Les paramètres ne peuvent pas être transmis, le prototype n'est pas utilisé et ne peut pas être réutilisé.

6. Héritage combiné parasite

Points clés : Hériter des attributs en empruntant des constructeurs pour transmettre les paramètres et le mode parasite, et hériter des méthodes via la forme hybride de la chaîne de prototypes. Utilisez apply ou call pour introduire un autre constructeur dans la fonction, et les paramètres peuvent être transmis.

function inheritPrototype(subType, superType){
  var prototype = Object.create(superType.prototype); //Object.create创建对象
  prototype.constructor = subType;                    // 增强对象
  subType.prototype = prototype;                      // 指定对象
}

// 父类初始化实例属性和原型属性
function SuperType(name){
  this.name = name;
  this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
  alert(this.name);
};

// 借用构造函数传递增强子类实例属性（支持传参和避免篡改）
function SubType(name, age){
  SuperType.call(this, name);
  this.age = age;
}

// 将父类原型指向子类
inheritPrototype(SubType, SuperType);

// 新增子类原型属性
SubType.prototype.sayAge = function(){
  alert(this.age);
}

var example1 = new SubType("abc", 21);
var example2 = new SubType("def", 22);

example1.colors.push("pink"); // ["red", "blue", "green", "pink"]
example1.colors.push("black"); // ["red", "blue", "green", "black"]

L'héritage combiné parasite combine les avantages des méthodes d'héritage précédentes et évite presque tous les inconvénients des méthodes d'héritage ci-dessus. C'est la plus efficace et la plus largement utilisée.

Inconvénients :

Le processus de mise en œuvre est relativement lourd.

Pourquoi avez-vous besoin d'apprendre ces méthodes d'héritage ? Pourquoi se donner tant de mal alors que vous pouvez hériter directement ? L'objectif principal est d'apprendre leurs idées et de jeter de meilleures bases, ce qui sera très utile pour lire le code source du framework à l'avenir, ou pour encapsuler vous-même des composants ou même des frameworks.

Le temps était un peu précipité et je n'ai pas ajouté d'extensions ES6.

Recommandations associées :

Méthode d'héritage orienté objet JavaScript

Trois façons d'implémenter l'héritage en JavaScript_js orienté objet

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!