Comment JavaScript implémente l'héritage (six façons)_javascript tips

Avant-propos : La plupart des langages OO prennent en charge deux méthodes d'héritage : l'héritage d'interface et l'héritage d'implémentation. Cependant, l'héritage d'interface ne peut pas être implémenté dans ECMAScript. ECMAScript ne prend en charge que l'héritage d'implémentation, et son héritage d'implémentation repose principalement sur la chaîne de prototypes.

1. Chaîne prototype

Idée de base : utilisez des prototypes pour laisser un type de référence 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 a un objet prototype, l'objet prototype contient un pointeur vers le constructeur et les instances contiennent un pointeur interne vers l'objet prototype.

Exemple d'héritage d'implémentation de chaîne de prototype :

function SuperType() {
this.property = true;
}
SuperType.prototype.getSuperValue = function() {
return this.property;
}
function subType() {
this.property = false;
}
//继承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.property;
}
var instance = new SubType();
console.log(instance.getSuperValue());//true

2. Emprunter le constructeur

Idée de base : appelez le constructeur de superclasse à l'intérieur du constructeur de sous-type, et le constructeur peut être exécuté sur l'objet nouvellement créé en utilisant les méthodes call() et apply().

Exemple :

function SuperType() {
this.colors = ["red","blue","green"];
}
function SubType() {
SuperType.call(this);//继承了SuperType
}
var instance1 = new SubType();
instance1.colors.push("black");
console.log(instance1.colors);//"red","blue","green","black"
var instance2 = new SubType();
console.log(instance2.colors);//"red","blue","green"

3. Héritage combiné

Idée de base : Un modèle d'héritage qui combine la technologie de la chaîne de prototypes et du constructeur emprunté pour profiter des deux.

Exemple :

function SuperType(name) {
this.name = name;
this.colors = ["red","blue","green"];
}
SuperType.prototype.sayName = function() {
console.log(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() {
console.log(this.age);
}
var instance1 = new SubType("EvanChen",18);
instance1.colors.push("black");
consol.log(instance1.colors);//"red","blue","green","black"
instance1.sayName();//"EvanChen"
instance1.sayAge();//18
var instance2 = new SubType("EvanChen666",20);
console.log(instance2.colors);//"red","blue","green"
instance2.sayName();//"EvanChen666"
instance2.sayAge();//20

4. Héritage prototype

Idée de base : à l'aide de prototypes, de nouveaux objets peuvent être créés à partir d'objets existants sans avoir à créer de types personnalisés.

L'idée d'héritage prototypique peut être illustrée par la fonction suivante :

function object(o) {
function F(){}
F.prototype = o;
return new F();
}

Exemple :

var person = {
name:"EvanChen",
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");
console.log(person.friends);//"Shelby","Court","Van","Rob","Barbie"

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 propriétés supplémentaires.

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"

5. Héritage parasitaire

Idée de base : créer une fonction qui est uniquement utilisée pour encapsuler le processus d'héritage, qui améliore en interne l'objet d'une manière ou d'une autre, et renvoie finalement l'objet comme s'il faisait réellement tout le travail.

Exemple :

function createAnother(original) {
var clone = object(original);
clone.sayHi = function () {
alert("hi");
};
return clone;
}
var person = {
name:"EvanChen",
friends:["Shelby","Court","Van"];
};
var anotherPerson = createAnother(person);
anotherPerson.sayHi();///"hi"

6. Héritage combiné parasite

Idée de base : hériter des propriétés en empruntant des fonctions, et hériter des méthodes via la forme hybride de la chaîne de prototypes

Le modèle de base est le suivant :

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

Exemple :

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;
}
inheritProperty(SubType,SuperType);
SubType.prototype.sayAge = function() {
alert(this.age);
}

Le contenu ci-dessus vous présente les six façons d'implémenter l'héritage en JavaScript. J'espère qu'il vous sera utile !