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

JavaScript est un langage orienté objet et l'héritage est une fonctionnalité importante de la programmation orientée objet. En JavaScript, il existe de nombreuses façons d'implémenter l'héritage, et cet article présentera certaines des méthodes les plus courantes.

1. Héritage de chaîne de prototypes

L'héritage de chaîne de prototypes est la méthode d'héritage la plus basique en JavaScript et la plus couramment utilisée. Grâce à l'héritage de chaîne de prototypes, les sous-classes peuvent hériter des propriétés et des méthodes des classes parentes.

La méthode d'implémentation de l'héritage de chaîne de prototypes est la suivante :

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    this.age = age;
    Parent.call(this, name);
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dans le code ci-dessus, nous définissons d'abord une classe parent Parent et une sous-classe Child. Dans Child, nous utilisons Parent.call(this, name) pour appeler le constructeur de la classe parent et pointons le prototype de Child vers Parent via Child.prototype = new Parent(), réalisant ainsi l'héritage. À la fin, nous avons créé deux instances de sous-classe, child1 et child2, et vérifié l'effet de l'héritage.

L'avantage de l'héritage de chaîne de prototypes est qu'il est simple à mettre en œuvre et facile à comprendre. Mais son inconvénient est également évident, c'est-à-dire qu'il entraînera le partage des propriétés du type référence dans l'objet prototype par toutes les instances.

2. Héritage du constructeur

L'héritage du constructeur est une méthode d'héritage relativement facile à comprendre. Elle réalise l'héritage en appelant le constructeur de la classe parent dans le constructeur de la sous-classe.

La méthode d'implémentation de l'héritage du constructeur est la suivante :

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // TypeError: child1.sayName is not a function 

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // TypeError: child2.sayName is not a function

Dans le code ci-dessus, nous utilisons Parent.call(this, name) dans le constructeur de sous-classe Child pour appeler le constructeur de classe parent et le pointer vers l'instance de sous-classe, ainsi L'héritage est mis en œuvre. Cependant, comme l'héritage du constructeur n'hérite pas des méthodes du prototype de la classe parent, nous ne pouvons pas appeler directement les méthodes du prototype de la classe parent dans la sous-classe.

L'avantage de l'héritage de constructeur est qu'il évite le problème des attributs de type référence partagés par toutes les instances dans l'héritage de chaîne de prototype, mais son inconvénient est également évident, c'est-à-dire que les méthodes du prototype de la classe parent ne peuvent pas être héritées.

3. Héritage combiné

L'héritage combiné est la méthode d'héritage la plus couramment utilisée en JavaScript. C'est un moyen de combiner l'héritage de chaîne de prototypes et l'héritage de constructeur, en résolvant les lacunes de chacun.

La méthode d'implémentation de l'héritage combiné est la suivante :

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dans le code ci-dessus, nous utilisons Parent.call(this, name) dans le constructeur de sous-classe Child pour appeler le constructeur de classe parent et le pointer vers l'instance de sous-classe pour obtenir Hérité. En même temps, nous passons Child.prototype = new Parent() dans le prototype de la sous-classe pour que la sous-classe hérite du prototype de la classe parent, héritant ainsi des méthodes du prototype de la classe parent.

L'avantage de l'héritage combiné est que la méthode d'héritage est complète. Elle peut non seulement hériter des méthodes du prototype de classe parent, mais également éviter le problème des attributs de type référence partagés par toutes les instances dans l'héritage de la chaîne de prototype. Mais son inconvénient est qu’il appelle deux fois le constructeur de la classe parent, ce qui gaspille une certaine quantité d’espace mémoire.

4. Héritage de combinaison parasite

L'héritage de combinaison parasite est une méthode d'optimisation de l'héritage de combinaison. Il évite le problème de l'appel répété du constructeur de la classe parent dans le prototype de sous-classe, réduisant ainsi la surcharge de mémoire.

La méthode d'implémentation de l'héritage de combinaison parasite est la suivante :

function Parent(name) {
    this.name = name;
    this.colors = ['red', 'green', 'blue'];
}

Parent.prototype.sayName = function() {
    console.log(this.name);
};

function Child(name, age) {
    Parent.call(this, name);
    this.age = age;
}

Child.prototype = Object.create(Parent.prototype, {
    constructor: {
        value: Child,
        enumerable: false,
        writable: true,
        configurable: true
    }
});

var child1 = new Child('Tom', 18);
child1.colors.push('black');
console.log(child1.colors);  // ['red', 'green', 'blue', 'black']
child1.sayName();  // Tom

var child2 = new Child('Jerry', 20);    
console.log(child2.colors);  // ['red', 'green', 'blue']
child2.sayName();  // Jerry

Dans le code ci-dessus, nous utilisons la méthode Object.create() dans le prototype de sous-classe pour créer une copie du prototype de la classe parent et passons la deuxième méthode de Object.create() Le paramètre remplace l'attribut constructeur du prototype de sous-classe afin qu'il pointe vers la sous-classe elle-même. Étant donné que la méthode Object.create() n'appelle pas le constructeur de la classe parent, elle évite le problème d'appeler le constructeur de la classe parent plusieurs fois dans le prototype de la classe enfant.

L'avantage de l'héritage de combinaison parasite est qu'il hérite non seulement des méthodes du prototype de la classe parent, mais évite également le problème de l'appel multiple du constructeur de la classe parent dans le prototype de la classe enfant. L’inconvénient est que la mise en œuvre est plus compliquée.

En bref, il existe de nombreuses façons d'implémenter l'héritage en JavaScript, et chaque méthode a ses propres avantages et inconvénients. Dans le développement réel, nous devons choisir la méthode d'héritage appropriée en fonction de la situation spécifique.

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!