Javascript a-t-il un héritage ?

JavaScript a un héritage. L'héritage JavaScript est un mécanisme qui nous permet de créer de nouvelles classes basées sur des classes existantes. L'héritage peut offrir de la flexibilité aux sous-classes. Vous pouvez réutiliser les méthodes et les variables des classes parentes, et vous pouvez utiliser des chaînes de prototypes et des constructeurs pour réaliser l'héritage.

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

JavaScript a-t-il un héritage ?

JavaScript a-t-il un héritage ?

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.

Comment implémenter l'héritage en JavaScript ?

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 chaînage de prototypes et d'emprunt de constructeurs 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 vraiment 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 d'apprentissage Javascript

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!