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

Méthode : 1. Utilisez le prototype 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 ; 2. Emprunter le constructeur et appeler le constructeur de superclasse à l'intérieur du constructeur de sous-classe en utilisant call() et apply(). être exécuté sur l'objet nouvellement créé ;3. La chaîne de prototypes et la technologie d'emprunt du constructeur sont combinées pour réaliser l'héritage.

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

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 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 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 exécuter le constructeur sur le constructeur créé. 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'emprunts 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 qui est uniquement utilisée pour encapsuler le processus d'héritage, qui améliore l'objet d'une manière ou d'une autre en interne et agit finalement comme si elle avait réellement fait tout le travail. Objet de retour.

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);
}

【Apprentissage recommandé :Tutoriel avancé 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!