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

La différence entre l'héritage es5 et es6 : l'héritage ES5 est implémenté via le mécanisme de prototype ou de constructeur ; il crée d'abord une sous-classe, puis instancie la classe parent et l'ajoute à la sous-classe. ES6 crée d'abord la classe parent, puis accède à la classe parent en appelant la super méthode dans le sous-ensemble instancié, puis implémente l'héritage en le modifiant.

L'environnement d'exploitation de ce tutoriel : système Windows 7, version ECMAScript 5&&ECMAScript 6, ordinateur Dell G3.

La différence entre l'héritage es6 et l'héritage es5

• L'héritage ES5 crée essentiellement un objet instance de la sous-classe, puis y ajoute la méthode de la classe parent (Parent.apply(this)).

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

• L'héritage dans 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.

Notez que le mot-clé super fait référence à l'instance de la classe parent, c'est-à-dire à l'objet this de la classe parent.

Remarque : dans le constructeur de sous-classe, le mot-clé this ne peut être utilisé qu'après avoir appelé super, sinon une erreur sera signalée.

1. Héritage dans es5 :

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

Héritage du parent via des sous-ensembles :

parent.call(child,1,2)

En regardant la méthode d'appel sous-jacente, nous pouvons voir que le processus d'héritage se fait via l'attribut prototype

child.prototype = new parent(1,2);

À partir de là, ES5 Le L'essence de l'héritage est de créer d'abord un objet d'instance de l'élément de sous-classe enfant, puis d'attribuer les attributs de l'objet prototype de l'élément de classe parent parent à l'objet d'instance de l'élément de sous-classe enfant, réalisant ainsi l'héritage

2, ES6 Héritage

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

, puis à ajouter les méthodes ou attributs requis correspondants via prototype

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

. Cependant, ES6 a introduit le concept de classe, c'est-à-dire la classe. Les objets sont définis via la classe de mots-clés.

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

Les paramètres transmis par la méthode de contrôle sont reçus via le constructeur d'attribut. 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.

Appelez 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 pense 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 que :

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

• ES6 crée la classe parent Tout d'abord, 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

[Apprentissage recommandé :

Tutoriel vidéo 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!