web-dev-qa-db-fra.com

Héritage Javascript et méthode surchargée

Supposons que j'ai un cours comme celui-ci:

function Widget() {
    this.id = new Date().getTime();
    // other fields
}
Widget.prototype = {
    load: function(args) {
        // do something
    }
}

A partir de cette classe, j'ai créé d'autres classes qui héritent du même prototype mais qui ont des méthodes supplémentaires. Ce que je veux faire, c'est pouvoir définir une méthode load () dans les sous-classes, qui appelle d'abord la méthode parente, puis exécute du code. Quelque chose comme:

SpecialWidget.prototype = {
    load: function(args) {
        super.load(args);
        // specific code here
    }
}

Je sais qu'il n'y a pas de mot-clé super en Javascript, mais il doit y avoir un moyen de le faire.

javascriptinheritanceprototype
30
The Coding Monk

Vous pouvez le simuler comme ceci:

SpecialWidget.prototype = {
    load: function(args) {
        Widget.prototype.load.call(this, args);
        // specific code here
    }
}

Ou vous pouvez créer votre propre super propriété comme ceci:

SpecialWidget.prototype.parent = Widget.prototype;

SpecialWidget.prototype = {
    load: function(args) {
        this.parent.load.call(this,args);
        // specific code here
    }
}
40
karim79

alors tout d'abord, vous configurez votre "sous-classe" comme si

function SubClass(name) {
    Super.call(this);

    // stuff here
}

SubClass.prototype = new SuperClass(null);
SubClass.prototype.constructor = SubClass;

et alors vous pouvez faire 

SuperClass.prototype.theMethod.apply(this);

depuis une implémentation de sous-classe pour invoquer spécifiquement l'implémentation du super.

2
hvgotcodes

Je ne sais pas si c'est la meilleure solution, mais vous pourriez faire quelque chose comme ça:

function Widget() {
    this.id = new Date().getTime();
}
Widget.prototype.load = function(args) {
   alert( 'parent load' );
};

SpecialWidget = function(){};

   // Make the prototype of SpecialWidget an instance of Widget
var proto = SpecialWidget.prototype = new Widget;

   // Give the prototype a function that references the "load" from Widget
proto.parent_load = proto.load;

   // Give SpecialWidget its own "load" that first calls the parent_load
proto.load = function( args ) {
    this.parent_load( args );
    alert( 'special load' );
};

var inst = new SpecialWidget;

inst.load();

Cela fait du prototype de SpecialWidget une instance de Widget de sorte qu'il hérite de tout ce que Widget possède.

Ensuite, il fait référence à la load() de Widget appelée parent_load() et crée sa propre load() qui appelle la parent_load() lorsqu’elle est appelée.

1
user113716

Utiliser Simple Javascript Class :

Class.extend('Widget', {
  load: function () {
    alert('foo');
  }
});

Widget.extend('SpecialWidget', {
  load: function () {
    this.super();
    alert('bar');
  }
});

new Widget().load(); // Alert: 'foo'
new SpecialWidget().load(); // Alert: 'foo' and 'bar'

Jetez un coup d'œil à Projet de classe Javascript simple , Héritage JavaScript simple et Modèles d'héritage en JavaScript .

0
Eduardo Cuomo

Il serait possible de stocker l'ancienne valeur de la méthode load dans une fermeture, si vous effectuiez votre substitution de la manière suivante:

function Widget() {
    this.id = new Date().getTime();
    // other fields
}

Widget.prototype = {
    load: function(args) {
        // do something
        alert("Widget Prototype Load");
    }
};

function SpecialWidget(){
};

SpecialWidget.prototype = new Widget();

(function(){
    var oldLoad = SpecialWidget.prototype.load;
    SpecialWidget.prototype.load = function(){
        oldLoad();
        alert("new Load");
    };
}());


var x = new SpecialWidget();
x.load();

Cela fonctionne, mais je ne suis pas sûr que ce soit la meilleure méthode. 

0
david