web-dev-qa-db-ja.com

JavaScriptの継承とメソッドのオーバーライド

私がこのようなクラスを持っていると仮定します：

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

このクラスから、同じプロトタイプを継承する他のクラスをいくつか作成しましたが、いくつかのメソッドが追加されています。私がやりたいのは、最初に親メソッドを呼び出し、次にいくつかのコードを実行するサブクラスでload（）メソッドを定義できることです。何かのようなもの：

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

Javascriptにはsuperキーワードがないことは知っていますが、これを行う方法があるはずです。

javascriptinheritanceprototype
31
The Coding Monk

次のようにシミュレーションできます。

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

または、次のように独自のスーパープロパティを作成できます。

SpecialWidget.prototype.parent = Widget.prototype;

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

最初に、次のように「サブクラス」を設定します

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

    // stuff here
}

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

そしてあなたはできる

SuperClass.prototype.theMethod.apply(this);

サブクラスの実装内から特別にスーパーの実装を呼び出します。

2
hvgotcodes

これが最善の解決策かどうかはわかりませんが、次のようなことができます：

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();

これにより、SpecialWidgetのプロトタイプがWidgetのインスタンスになり、Widgetが持つすべてのものが継承されます。

次に、load()と呼ばれるWidgetのparent_load()への参照を作成し、呼び出されたときにload()を呼び出す独自のparent_load()を作成します。

1
user113716

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'

Simple Javascript Class Project 、 Simple JavaScript Inheritance および JavaScriptの継承パターン をご覧ください。

0
Eduardo Cuomo

次のようにオーバーライドを行った場合、loadメソッドの古い値をクロージャーに保存することができます。

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();

それは機能しますが、それが最善の方法であるかどうかはわかりません。

0
david