Qu'est-ce que l'héritage en javascript

En JavaScript, l'héritage est un mécanisme qui permet la création de nouvelles classes basées sur des classes existantes ; l'héritage offre de la flexibilité pour les sous-classes et peut réutiliser les méthodes et les variables des classes parentes. Le processus d'héritage va du général au spécial. chaînes et constructeurs pour implémenter l’héritage.

L'environnement d'exploitation de ce tutoriel : système Windows 10, JavaScript version 1.8.5, ordinateur Dell G3.

Qu'est-ce que l'héritage en JavaScript

L'héritage JavaScript est un mécanisme qui nous permet de créer de nouvelles classes basées sur des classes existantes ; il offre la flexibilité aux sous-classes de réutiliser les méthodes et les variables des classes parentes. Le processus d'héritage est le processus du général au spécial.

Il entretient une relation IS-A. Le mot-clé

extends est utilisé dans les expressions de classe ou les déclarations de classe.

En utilisant le mot-clé extends, nous pouvons obtenir toutes les propriétés et comportements des objets intégrés et des classes personnalisées.

Nous pouvons également utiliser des méthodes basées sur des prototypes pour implémenter l'héritage.

Comment JavaScript implémente-t-il l'héritage ?

1. Chaîne de prototypes

Idée de base : 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 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. Constructeur d'emprunt

Idée de base : appelez le constructeur de superclasse à l'intérieur du constructeur de sous-type et utilisez les méthodes call() et apply() pour créer un nouveau Exécutez le constructeur sur l'objet.

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 du meilleur 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 prototypique

Idée de base : à l'aide de prototypes, de nouveaux objets peuvent être créés à partir d'objets existants, et il n'est pas nécessaire de créer des types personnalisés.

L'idée de l'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 : l'un est utilisé comme paramètre. prototype du nouvel objet objet et un objet définissant des propriétés supplémentaires en tant que nouvel objet.

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 parasite

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

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 de propriétés en empruntant des fonctions et hériter de méthodes via la forme mixte 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);
}

【Recommandations associées : tutoriel vidéo javascript, front-end web】

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!