Méthode d'héritage JS - description du cas

1. Chaîne de prototypes : 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

Chaque constructeur a un objet prototype, et l'objet prototype contient un pointeur vers le pointeur de constructeur et les instances contiennent un pointeur interne vers l’objet prototype.

Modèle de base pour implémenter une chaîne primitive :

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

Résultat final : l'instance pointe vers le prototype de SubType, et le prototype de SubType pointe vers le prototype de SuperType, SuperType hérite de Object

Le prototype par défaut de toutes les fonctions est une instance d'Objet

Problème : Il y aura des problèmes avec les valeurs de type référence

Par exemple, si un instance d'une sous-classe est créée, si les attributs d'une instance de sous-classe sont modifiés, elle sera affectée lors de la création d'autres sous-classes. Le code est le suivant :

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType(){
}
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(instance1.colors);  //red, blue, green, black
var instance2 = new SubType();
alert(instance2.colors);   //red, blue, green, black

Les résultats ci-dessus. indique que les attributs des autres instances seront affectés. Valeur

2. Emprunter le constructeur : appelez le constructeur de supertype à l'intérieur du constructeur de sous-type

function SuperType(){
    this.colors =[“red”, “blue”, “green”];
}
function SubType{}(
   SuperType.call(this);     //继承了SuperType。通过调用SuperType的构造函数，借用其构造结构
}
var instance1 = new SubType();
instance1.colors.push(“black”);
alert(intance1.colors);     //red,blue,green,black
var instance2 = new SubType();
alert(instance2.colors);   //red,blue,green

Utilisez cette méthode pour passer au constructeur de supertype dans le constructeur de sous-classe Les paramètres sont les suivants :

function SuperType(name){
    this.name = name;
}
function SubType(){
SuperType.call(this,“Nicholas”);        //传入参数，利用这个参数初始化父类构造函数中的name
this.age = 29;
}
var instance = new SubType();
alert(instance.name);   //Nicholas
alert(instance.age);   //29

Problème : peu pratique à réutiliser

3. Héritage combiné : utiliser la chaîne de prototypes pour réaliser l'héritage des propriétés du prototype et méthodes et héritage des attributs d'instance en empruntant des constructeurs

Exemple de code :

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);    //继承SuperType的一部分，this指SubType，
this.age = age;    //自己新定义的属性age也可以进行赋值
}
SubType.prototype = new SuperType();     //利用原型继承，可以使用父类的方法（见原型链继承）
SubType.prototype.sayAge = function(){   //定义SubType特有的新方法
    alert(this.age);
}
var instance1 = new SubType(“Martin”, 10);
instance1.colors.push(“black”);
alert(instance1.colors);  //red,blue,green,black
instance1.sayName();   //Martin
instance1.sayAge();  //10
var instance2 = new SubType(“Greg”, 27);
alert(instance2.colors);   //red,blue,green
instance2.sayName();  //Greg
instance2.sayAge();  //27

Recommandations associées :

Explication détaillée des méthodes d'héritage dans les exemples JS

Plusieurs façons d'implémenter l'héritage en JS

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!