Bonne façon d'appeler super-classe des fonctions de la sous-classe

J'ai un "super-classe" avec "info" comme une variable d'instance. "Superclasse" a la fonction "printInfo()". "printInfo()" doit accéder à la variable d'instance "info".
Je veux créer une "sous-classe" qui a aussi la méthode "printInfo()". Je veux l'appeler printInfo() de "super-classe" à partir de "printInfo()" de la "sous-classe". 

SuperClass = function()
{
    this.info = "I am superclass";
    console.log("SuperClass:");
};

SuperClass.prototype.printInfo = function(that)
{
    console.log("printing from superclass printInfo");
    console.log(that.info);
};

SubClass = function(){};

SubClass.prototype = new SuperClass();

SubClass.prototype.printInfo = function()
{
    console.log("calling superclass");
    this.constructor.prototype.printInfo(this);
    console.log("called superclass");
};

var sc = new SubClass();
sc.printInfo();

Vous pouvez le constater, je suis de passage "que" en tant que paramètre à printInfo. Sans que "paramètre", "info" est imprimé en tant que "undefined". Comme dans le cas suivant, "this.info" n'est pas définie lorsque cette fonction est appelée à partir de l'objet de la "sous-classe".

SuperClass.prototype.printInfo = function()
    {
        console.log("printing from superclass printInfo");
        console.log(this.info);
    };

Quelle est la bonne façon de remplacer et appeler des méthodes de la super-classe en javascript, permettant à des fonctions pour accéder aux variables d'instance de la classe?

InformationsquelleAutor coolscitist | 2014-04-15
  1. 27

    Vous êtes de jouer avec le SubClasss'prototype avec l' SuperClasss'objet, dans cette ligne

    SubClass.prototype = new SuperClass();

    de l'enfant prototype doit dépendre de la Mère du prototype. Donc, vous pouvez hériter comme ce

    SubClass.prototype = Object.create(SuperClass.prototype);

    Aussi, il est tout à fait normal de modifier le constructeur de la fonction elle-même, comme ce

    SubClass.prototype.constructor = SubClass;

    De conserver votre mise en œuvre générique, vous pouvez utiliser de l'Objet.getPrototypeOf, pour obtenir le parent prototype dans la chaîne d'héritage et ensuite invoquer printInfo, à l'instar de ce

    SubClass.prototype.printInfo = function() {
    Object.getPrototypeOf(SubClass.prototype).printInfo(this);
};

    Depuis, info est définie dans le SubClass pourtant, il va imprimer undefined. Vous pouvez également appeler le parent pas de constructeur, à l'instar de ce

    var SubClass = function() {
    SuperClass.call(this);
};

    Remarque: Vous êtes à la création de variables globales, en omettant var mot-clé avant de SuperClass et SubClass.

    • Pour garder générique, j'ai appelé super constructeur de l'Objet.getPrototypeOf(sous-classe.prototype).constructeur.appel(ce). C'est même la voie de l'appel de la super-classe de la fonction. Bien que je ne suis pas sûr si ce est la bonne façon, je ne suis pas un expert sur la façon js fonctionne.
    • Ne serait pas à l'appel de Subclass.printInfo() à Superclass.printInfo() être Object.getPrototypeOf(SubClass.prototype).printInfo.call(this) plutôt que de simplement ...printInfo(this)? je demande parce que je l'ai essayé votre chemin et vous avez une erreur à propos de undefined. Je ne suis pas un expert JS, donc il n'est pas clair pour moi pourquoi de toute façon serait de travailler ou ne pas travailler.
    • veuillez mettre à jour pour ES2015
    • Si vous voulez être vraiment propre, vous pourriez dire Object.getPrototypeOf(Object.getPrototypeOf(this)).
    • Correct. Vous avez besoin .call(this) de sorte que this à l'intérieur de la méthode appelée sera la même que l'intérieur de la méthode appelante.
    InformationsquelleAutor thefourtheye
  2. 8

    Après avoir lu toutes les réponses, je suis en utilisant le suivant mécanisme d'héritage:

    var SuperClass = function()
{
    this.info = "I am superclass";
    console.log("SuperClass:");
};

SuperClass.prototype.printInfo = function()
{
    console.log("printing from superclass printInfo");
    console.log("printinfo");
    console.log(this.info);
};

var SubClass = function(){
    SuperClass.call(this);
};

SubClass.prototype = Object.create(SuperClass.prototype);
SubClass.prototype.constructor = SubClass;

SubClass.prototype.printInfo = function()
{
    console.log("calling superclass");
    Object.getPrototypeOf(SubClass.prototype).printInfo.call(this);
    console.log("called superclass");
};

var sc = new SubClass();
sc.printInfo();
    • Vous devez définir le constructeur de trop, sous-classe.le prototype.constructeur = sous-classe
    InformationsquelleAutor coolscitist
  3. 6

    Vous pouvez l'écrire comme ceci :

    SuperClass.prototype.printInfo = function(){
  console.log("printing from superclass printInfo");
  console.log(this.info); 
};

SubClass.prototype.printInfo = function(){
  console.log("calling superclass");
  SuperClass.prototype.printInfo.call(this);
  console.log("called superclass");
};
    InformationsquelleAutor Camille Wintz
  4. 3

    @coolscitist

    Au lieu de

    SubClass.prototype.printInfo = function()
{
    Object.getPrototypeOf(SubClass.prototype).printInfo.call(this);
};

    utiliser cette

    SubClass.prototype.printInfo = function()
{
    Object.getPrototypeOf(this.constructor.prototype).printInfo.call(this);
};
    • Merci. Seulement votre solution a fonctionné pour moi. Les autres réponses appelée la méthode de la superclasse ok, mais j'ai reçu undefined 'cette' erreur.
    • Non, ce n'est pas ok. Disons une nouvelle classe Class3 hériter de SubClass, appelant Class3's printInfo() va provoquer une boucle infinie. C'est parce que le this.constructor ci-dessus donnera toujours Class3 au lieu de SubClass, c'est à dire l'appel de printInfo fonction de Class3's super-classe (sous-classe) encore & encore une fois.
    InformationsquelleAutor Lo HaBuyshan
  5. 3

    Pour quelqu'un qui vient d'un monde Java, je voudrais ignorer tous les ci-dessus et utilisez la syntaxe suivante à la place qui a été introduit en 2015 

    class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

    Plus d'infos sur https://developer.mozilla.org/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

    Et soudainement u peut utiliser super comme mot-clé pour accéder ancêtre etc.... Pour moi, trouver cet a été un grand soulagement

    • Juste ce que je cherchais.
    • Malheureusement, super ne peut être utilisé dans le constructeur.
    InformationsquelleAutor Tom