3 méthodes et exemples de code pour implémenter l'héritage dans les compétences Javascript_javascript

L'héritage est un moyen très important lorsque nous mettons en œuvre une programmation orientée objet. Même si nous disons qu'il ne faut pas trop hériter et utiliser la composition au lieu de l'héritage, l'héritage est toujours inévitable. Ce dont nous voulons discuter ici, c'est le mécanisme d'héritage en Javascript.

Il n'y a en fait aucun concept d'héritage en Javascript, mais nous pouvons l'imiter par certains moyens. Ce type d'héritage copie en fait un objet dans un autre objet. Vous devez noter que toutes les classes locales et classes hôtes ne peuvent pas être héritées en tant que classes de base, principalement pour des raisons de sécurité.

Il existe environ trois types d'héritage en Javascript : 1. L'usurpation d'identité d'objet ; 2. L'héritage prototypique ; 3. Un mélange des deux ;

1. Usurpation d'identité d'objet

En fait, l'usurpation d'identité d'objet est étroitement liée au mot-clé this (il est donc très important de bien comprendre le mot-clé this en Javascript :P). Le constructeur l'utilise pour attribuer des valeurs aux propriétés et aux méthodes, et le constructeur peut également être considéré comme une fonction ordinaire, nous pouvons donc faire du constructeur de notre classe de base le constructeur de la sous-classe, puis l'appeler dans la fonction de sous-classe , alors la sous-classe obtiendra les attributs et les méthodes de la classe parent.

Le principe est très simple, alors comment le mettre en œuvre ? Vous trouverez ci-dessous un exemple de code pour le fonctionnement réel.

Méthode d'implémentation d'usurpation d'identité d'objet 1, notre méthode la plus couramment utilisée pour créer de nouveaux objets :

Copier le code Le code est le suivant :

var classeA = fonction(nom){
this.name = nom;
this.alertName = function(){
alert(this.name);
>
>

var classB = fonction (nom, âge) {
this.myConstructor = classA;
this.myConstructor(name);
supprimez this.myConstructor ;

this.age = âge;
this.alertAge = function(){
alert(this.age);
>
>

Afin de vérifier si la méthode ci-dessus est correcte, vous pouvez la tester vous-même. J'écrirai le code de test ci-dessous :

Copier le code Le code est le suivant :

var objA = new classA('DK');
objA.alertName();//NSP

var objB = nouvelle classeB('DS',20);

objB.alertName();//DS
objB.alertAge();//20

C'est ce qu'on appelle l'usurpation d'identité d'objet. De plus, il existe deux autres façons d'implémenter l'usurpation d'identité d'objet. Bien que leurs méthodes d'implémentation soient différentes, leurs principes sont les mêmes.

Méthode d'implémentation de l'usurpation d'identité d'objet 2, utilisez la méthode d'appel :

Copier le code Le code est le suivant :

var classeA = fonction(nom){
this.name = nom;
this.alertName = function(){
alert(this.name);
>
>

var classB = fonction (nom, âge) {
classA.call(this,name);

this.age = âge;
this.alertAge = function(){
alert(this.age);
>
>

Cela peut également être vu dans le code. Dans la première méthode, nous créons un nouveau pointeur de fonction pointant vers la classe parent, appelons la fonction, puis supprimons le pointeur. Ici, nous utilisons la méthode call pour exécuter le constructeur de la classe parent sous cet objet pour atteindre le même objectif. De plus, l’opposé de la méthode call est la méthode apply.

Méthode d'implémentation de l'usurpation d'identité d'objet trois , utilisez la méthode apply :

Copier le code Le code est le suivant :

var classeA = fonction(nom){
this.name = nom;
this.alertName = function(){
alert(this.name);
>
>

var classB = fonction (nom, âge) {
classA.apply(this,new Array(name));

this.age = âge;
this.alertAge = function(){
alert(this.age);
>
>

En fait, vous pouvez voir que la méthode apply est très similaire à la méthode call, sauf que les paramètres passés sont légèrement différents.

2. Héritage prototype

Tout le monde devrait savoir quelque chose sur l'objet prototype. Toutes les propriétés et méthodes de l'objet prototype seront transmises à toutes les instances de la classe. Ainsi, lorsque nous paierons toutes les propriétés et méthodes de la classe parent à l'objet prototype de la sous-classe. , c'est-à-dire que cela équivaut à réaliser notre héritage.

Si une sous-classe veut obtenir tous les attributs et méthodes de la classe parent, alors nous payons une instance de la classe parent directement à l'objet prototype de la sous-classe. Ensuite, notre sous-classe équivaut à obtenir tous les objets et méthodes de. la classe mère ?

Service d'exemple de code :

Copier le code Le code est le suivant :

var classeA = fonction(){
this.name = 'NSP';
this.alertName = function(){
alert(this.name);
>
>

var classB = fonction (nom, âge) {
this.name = nom;
this.age = âge;
>

classB.prototype = new classA();

classB.prototype.alertAge = function(){
alert(this.age);
>

Notez que le constructeur de la classe parent doit ici s'assurer qu'il n'y a pas de paramètres. Parce que même s'il existe des paramètres de construction, vous ne pouvez pas les transmettre =.=!

lors de l'implémentation de l'héritage prototypique

3. Héritage mixte

Comme son nom l'indique, l'héritage mixte est un mélange des deux premières méthodes.

Copier le code Le code est le suivant :

var classeA = fonction(nom){
this.name = nom;
>

classA.prototype.alertName = function(){
alert(this.name);
>

var classB = fonction (nom, âge) {
classA.call(this,name);
this.age = âge;
>

classB.prototype = new classA();

classB.prototype.alertAge = function(){
alert(this.age);
>

Utilisez l'usurpation d'identité d'objet pour transmettre des paramètres à la classe parent et utilisez l'héritage prototypique pour hériter des méthodes publiques.

Maintenant que nous avons parlé de ces trois méthodes d'héritage, il est temps de parler du problème.

Vous vous demandez peut-être pourquoi il y a l'usurpation d'identité d'objet et l'héritage prototypique, mais il existe toujours un héritage hybride Oui, la chose la plus importante est ce problème.

1. Si vous le testez réellement, vous constaterez que grâce à l'héritage via l'usurpation d'identité d'objet, la sous-classe ne peut pas accéder aux méthodes de la chaîne de prototypes de la classe parent.

2. L'utilisation de l'héritage prototypique transformera toutes les propriétés en propriétés partagées. Si vous implémentez deux instances de la même sous-classe, vous constaterez que toutes vos instances partagent toutes les propriétés.

3. Mais c’est définitivement inapproprié. Il existe donc un héritage hybride, qui permet aux propriétés de rester privées tout en permettant aux sous-classes d'accéder aux méthodes de la chaîne de prototypes de la classe parent.

Vous pouvez l'essayer vous-même. Lorsqu'un objet prétend être hérité, la sous-classe ne peut pas accéder à la méthode de chaîne prototype de la classe parent. Toutes les instances de la sous-classe d'héritage de chaîne prototype partagent tous les attributs de la classe parent. Je n'écrirai pas d'exemples ici.