Apprenez le javascript orienté objet, comment implémenter l'héritage dans les compétences javascript_javascript

L'exemple de cet article présente 6 façons d'implémenter l'héritage en JavaScript et le partage avec vous pour votre référence. Le contenu spécifique est le suivant

.

1. [Héritage de la chaîne de prototypes] L'essence de l'implémentation est de réécrire l'objet prototype et de le remplacer par une instance d'un nouveau type. En fait, ce n'est pas la propriété constructeur du prototype SubType qui a été réécrite, mais le prototype SubType pointe vers un autre objet - le prototype SuperType, et la propriété constructeur de cet objet prototype pointe vers SuperType

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 instance = new SubType();
alert(instance.getSuperValue());//true

[Note 1] Définissez soigneusement les méthodes, et le code pour ajouter des méthodes au prototype doit être placé après l'instruction qui remplace le 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;
}
//重写超类型的方法
SubType.prototype.getSuperValue = function(){
 return false;
}
var instance = new SubType();
alert(instance.getSuperValue());//false

[Note 2] Lors de l'implémentation de l'héritage via la chaîne de prototypes, vous ne pouvez pas utiliser de littéraux d'objet pour créer des méthodes prototypes. Cela écrasera la chaîne de prototypes
.

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;
 },
 someOtherMethod : function(){
  return false;
 }
};
var instance = new SubType();
alert(instance.getSuperValue());//error

[Inconvénient 1] Lors de la création d'une instance d'un sous-type, les paramètres ne peuvent pas être transmis au constructeur du supertype
[Inconvénient 2] Les propriétés du prototype contenant des valeurs de type référence seront partagées par toutes les instances

function SuperType(){
 this.colors = ['red','blue','green'];
}
function SubType(){}
//继承了SuperType
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'

2. [Héritage de constructeur emprunté (également appelé faux objet ou héritage classique)] appelle le constructeur de supertype à l'intérieur du constructeur de sous-type , donc en utilisant les méthodes apply() et call(), les constructeurs peuvent également être exécuté sur des objets nouvellement créés dans le futur

function SuperType(){
 this.colors = ['red','blue','green'];
}
function SubType(){
 //继承了SuperType
 SuperType.call(this);
}
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'

[Avantages] Paramètres de réussite

function SuperType(name){
 this.name = name;
}
function SubType(){
 //继承了SUperType,同时还传递了参数
 SuperType.call(this,"Nicholas");
 //实例属性
 this.age = 29;
}
var instance = new SubType();
alert(instance.name);//"Nicholas"
alert(instance.age);//29 

[Note] Afin de garantir que le constructeur SuperType ne remplace pas les propriétés du sous-type, vous pouvez ajouter des propriétés qui doivent être définies dans le sous-type après avoir appelé le constructeur du supertype

function SuperType(name){
 this.name = name;
 this.age = 30;
}
function SubType(){
 //实例属性
 this.age = 29;
 //继承了SUperType,同时还传递了参数
 SuperType.call(this,"Nicholas");
}
var instance = new SubType();
//实例属性被重写为SuperType构造函数的属性
alert(instance.age);//30

[Inconvénient 1] La réutilisation des fonctions ne peut pas être réalisée
[Inconvénient 2] Les méthodes définies dans le prototype du super type sont également invisibles pour le sous-type. Par conséquent, tous les types ne peuvent utiliser que le modèle constructeur
. 3. [Héritage combiné (également appelé héritage pseudo-classique)] Un modèle d'héritage qui combine la technologie de chaînage de prototypes et d'emprunt de constructeurs pour profiter des atouts des deux. L'idée derrière cela est d'utiliser la chaîne de prototypes pour obtenir l'héritage des propriétés et des méthodes du prototype, et pour obtenir l'héritage des propriétés d'instance en empruntant des constructeurs. De cette manière, la réutilisation des fonctions est obtenue en définissant des méthodes sur le prototype, et chaque instance peut être garantie d'avoir ses propres attributs, ce qui en fait le modèle d'héritage le plus couramment utilisé en JavaScript.

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 instance1 = new SubType("Nicholas",29);
instance1.colors.push("black");
alert(instance1.colors);//'red,blue,green,black'
instance1.sayName();//"Nicholas"
instance1.sayAge();//29
var instance2 = new SubType("Greg",27);
alert(instance2.colors);//'red,blue,green'
instance2.sayName();//"Greg"
instance2.sayAge();//27

[Inconvénients] Dans tous les cas, le constructeur de supertype sera appelé deux fois : une fois lors de la création du prototype de sous-type, et une fois à l'intérieur du constructeur de sous-type. Le sous-type contiendra éventuellement toutes les propriétés d'instance de l'objet supertype, mais devra remplacer ces propriétés lorsque le constructeur de sous-type est appelé.

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.age = age;
}
SubType.prototype = new SuperType(); //第一次调用SuperType()
SubType.prototype.constructor = SubType;
SubType.prototype.sayAge = function(){
 alert(this.age);
}; 

4. [Héritage prototypique] À l'aide de prototypes, vous pouvez créer de nouveaux objets basés sur des objets existants sans avoir à créer de types personnalisés. Essentiellement, object() effectue une copie superficielle de l'objet qui lui est transmis.
[Note] L'héritage prototypique nécessite qu'il y ait un objet qui puisse être utilisé comme base d'un autre objet, s'il existe un tel objet, vous pouvez le transmettre à la fonction object(), puis modifier l'objet obtenu en fonction des spécificités. besoins

function object(o){
  function F(){};
  F.prototype = o;
  return new F();
}
var person = {
  name: "Nicholas",
  friends: ["Shelby","Court","Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");

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

alert(person.friends);//"Shelby,Court,Van,Rob,Barbie"

【4.1】【Méthode Object.create()】 : la nouvelle méthode Object.create() d'ECMAScript5 standardise l'héritage prototypique. Cette méthode accepte deux paramètres : un objet à utiliser comme prototype du nouvel objet et (éventuellement) un objet pour définir des propriétés supplémentaires pour le nouvel objet. Lorsqu'un paramètre est passé, les méthodes Object.create() et object() se comportent de la même manière

function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
var person = {
 name: "Nicholas",
 friends:["Shelby","Court","Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends);//"Shelby,Court,Van,Rob,Barbie"

[Note] Le deuxième paramètre de la méthode Object.create() a le même format que le deuxième paramètre de la méthode Object.defineProperties() : chaque propriété est définie via son propre descripteur. Toute propriété spécifiée de cette manière remplace la propriété du même nom sur l'objet prototype.

var person = {
 name: "Nicholas",
 friends:["Shelby","Court","Van"]
};
var anotherPerson = Object.create(person,{
 name: {
  value: "Greg"
 }
});
alert(anotherPerson.name);//"Greg" 

【4.2】Compatible avec la méthode Object.create() dans les navigateurs de versions inférieures

if(typeof Object.create != "function"){
 (function(){
  var F = function(){};
  Object.create = function(o){
   if(arguments.length > 1){
    throw Error('Second argument noe supported');
   }
   if(o === null){
    throw Error("Cannot set a null [[Prototype]]");
   }
   if(typeof o != 'Object'){
    throw TypeError("Arguments must be an object");
   }
   F.prototype = o;
   return new F();
  }
 })();
} 

5. [Héritage parasite] Créez une fonction qui est uniquement utilisée pour encapsuler le processus d'héritage. Cette fonction améliore l'objet d'une manière ou d'une autre en interne et semble finalement avoir vraiment fait tout le travail. le même objet
[Inconvénient] La réutilisation des fonctions ne peut pas être réalisée

function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
function createAnother(original){
 var clone = object(original);//通过调用函数创建一个新对象
 clone.sayHi = function(){ //以某种方式来增强这个对象
  alert("hi");
 };
 return clone;//返回这个对象
}
var person = {
 name: "Nicholas",
 friends: ["Shelby","Court","Van"]
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();//"hi"

6. [Héritage des combinaisons parasites] Héritez des propriétés en empruntant des constructeurs et héritez des méthodes via la forme hybride de la chaîne de prototypes. L'idée de base derrière cela est qu'au lieu d'appeler le constructeur du supertype pour spécifier le prototype d'un sous-type, il suffit d'avoir une copie du prototype du supertype. Essentiellement, vous utilisez l'héritage parasite pour hériter du prototype du supertype, puis attribuez le résultat au prototype du sous-type. L'héritage combiné parasite est le paradigme d'héritage le plus idéal pour les types référence.

//这个例子中的高效率体现在它只调用了一次Super构造函数，并且因此避免了在SubType.prototype上面创建不必要的、多余的属性。与此同时，原型链还能保持不变。
function object(o){
 function F(){};
 F.prototype = o;
 return new F();
}
function inheritPrototype(subType,superType){
 var prototype = object(superType.prototype);//创建对象
 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);
}

Ce qui précède représente l'intégralité du contenu de cet article, la manière d'implémenter l'héritage en JavaScript, merci à tous d'avoir lu, et l'éditeur continuera à travailler dur !