Maison > interface Web > Questions et réponses frontales > A quoi sert super dans es6

A quoi sert super dans es6

WBOY
Libérer: 2022-05-05 18:40:49
original
2358 Les gens l'ont consulté

Utilisation de super : 1. Lorsque super est utilisé comme fonction, il est utilisé pour représenter le constructeur de la classe parent. La syntaxe est "constructor(){super();}" ; un objet, il est utilisé pour pointer vers les méthodes ordinaires. L'objet prototype de la classe parent est utilisé pour pointer vers la classe parent dans les méthodes statiques.

A quoi sert super dans es6

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

À quoi sert super dans es6

Le premier cas : lorsque super est utilisé comme fonction, il représente le constructeur de la classe parent

ES6 nécessite que le constructeur de la sous-classe exécute la super fonction une fois

class A {}
class B extends A {
  constructor() {
    super();//子类的构造函数,必须执行一次super函数,代表父类的构造函数
  }
}
Copier après la connexion

Remarque : bien que super représente le constructeur de la classe parent, ce qui est renvoyé à ce moment est l'instance de B, c'est-à-dire que cet intérieur super fait référence à l'instance de B, donc super() est équivalent à A.prototype .constructor.call(this)

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B
Copier après la connexion

Dans le code ci-dessus, new.target pointe vers la fonction en cours d'exécution. Lorsque super() est exécuté, il pointe vers le constructeur de la sous-classe B, pas le constructeur de la classe parent A. Dans en d'autres termes, la fonction à l'intérieur de super() pointe vers B

Lorsque super est utilisé comme fonction, il doit apparaître dans le constructeur de la sous-classe, sinon une erreur sera signalée

class A {}
class B extends A {
  m() {
    super(); // 报错
  }
}
Copier après la connexion

Deuxième cas : Lorsque super est utilisé en tant qu'objet, dans la méthode ordinaire, il pointe vers l'objet prototype de la classe parent, dans la méthode statique, il pointe vers la classe parent

class A {
  p() {
    return 2;
  }
}
class B extends A {
  constructor() {
    super();//父类的构造函数
    console.log(super.p()); // 2
  }
}
let b = new B();
Copier après la connexion

Dans le code ci-dessus, lorsque super est utilisé comme fonction, il représente la méthode de construction de la classe parent. Lorsqu'elle est utilisée comme objet, elle pointe vers l'objet prototype de la classe parent, c'est-à-dire A.prototype, donc super.p() est équivalent à A.prototype.p()

Il convient également de noter ici que puisque super pointe vers le prototype de la classe parent, les attributs ou méthodes de l'instance de la classe parent ne peuvent pas être appelés via super

class A {
  constructor() {
    this.p = 2;
  }
}
class B extends A {
  get m() {
    return super.p;
  }
}
let b = new B();
b.m // undefined
Copier après la connexion

Dans le code ci-dessus, p est les attributs de l'instance de la classe parent. A ne peut pas être référencé par super.p

Si l'attribut est défini sur le prototype de la classe parent, vous pouvez y accéder en utilisant super

class A {}
A.prototype.x = 2;
class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();
Copier après la connexion

Dans le code ci-dessus, l'attribut x est défini sur le prototype de l'objet de la classe parent, vous pouvez donc utiliser super.

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!

Étiquettes associées:
es6
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal