Quelle est la différence entre l'héritage dans es5 et es6

La différence entre l'héritage es5 et es6 est la suivante : es5 crée d'abord la sous-classe, instancie la classe parent et l'ajoute à la sous-classe pour obtenir l'héritage tandis que es6 crée d'abord la classe parent et accède à la classe parent en appelant la super méthode ; dans le sous-ensemble instancié Enfin, l'héritage est obtenu en le modifiant.

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

Quelle est la différence entre l'héritage es5 et es6 ?

L'héritage d'ES5 consiste essentiellement à créer d'abord un objet instance de la sous-classe, puis à y ajouter la méthode de la classe parent (Parent.apply(this)).

ES6 Le mécanisme d'héritage est complètement différent. En substance, l'objet instance this de la classe parent est créé en premier (la méthode super() de la classe parent doit donc être appelée en premier), puis celle-ci est modifiée à l'aide du constructeur de la classe parent. sous-classe.

L'héritage ES5 est implémenté via le mécanisme de prototype ou de constructeur.

ES6 définit les classes via le mot-clé class, qui contient des constructeurs, et l'héritage entre les classes est obtenu via le mot-clé extends. Les sous-classes doivent appeler la super méthode dans la méthode constructeur, sinon une erreur sera signalée lors de la création d'une nouvelle instance. Parce que la sous-classe n'a pas son propre objet this, mais hérite de l'objet this de la classe parent et le traite ensuite. Si la super méthode n’est pas appelée, la sous-classe ne peut pas obtenir l’objet this.

Héritage dans ES6

Dans le JS traditionnel, générer des objets consiste à créer un constructeur, puis à définir l'objet généré

function parent(a,b){
    this.a = a;
    this.b = b;
}

Ensuite, en ajoutant les méthodes ou propriétés requises correspondantes via le prototype

parent.prototype.methods = function(){
    return 'this is test methods';
}
parent.prototype.attr = 'this is test attr‘;

Et ES6 a introduit les classes Concept, qui c'est, la classe. Les objets sont définis via la classe de mots-clés.

　 La classe est un mot-clé, Language Sugar, afin que vous puissiez comprendre plus clairement l'objet créé.

Utilisez le constructeur d'attribut pour recevoir les paramètres transmis par la méthode de contrôle. Si vous n'écrivez pas cet attribut, il n'y en aura pas. paramètres par défaut

class parent{
    curstructor(a,b){
        this.a = a;
        this.b = b;
    }
}

L'héritage dans ES6 est basé sur l'héritage entre les classes. Ceci est réalisé grâce au mot-clé extends.

Appel de la classe parent via une super instanciation

class parent{
　　constructor(a,b){
　　　　this.a = a;
　　　　this.b = b;
　　}
　　parentMethods(){
　　　　return this.a + this.b
　　}
}
class child extends parent{
　　constructor(a,b,c){
　　　　super(a,b);
　　　　this.c = c;
　　}
　　childMethods(){
　　　　return this.c + ',' + super.parentMethods()
　　}
}
const point = new child(1,2,3);
alert(point.childMethods());

Le code ci-dessus est un simple ensemble d'héritage de classe parent-enfant ES6.

Je crois que vous l'avez vu, même si la différence évidente est que dans ES6, c'est la super méthode qui active le composant parent, plutôt que de créer une nouvelle instanciation. En d'autres termes, l'objet instance de la classe parent est créé en premier. , puis appelé. Pour modifier cela dans le constructeur de la sous-classe pour compléter l'objet prototype.

Résumé :

La plus grande différence entre l'héritage ES5 et ES6 est :

　 1. ES5 crée d'abord la sous-classe, instancie la classe parent et l'ajoute à la sous-classe ceci

　 2. ES6 crée d'abord la classe parent, Après avoir accédé au parent en appelant la super méthode dans le sous-ensemble instancié, l'héritage est réalisé en modifiant ceci

[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!