JavaScriptオーバーライドメソッド

以下のコードがあるとしましょう：

function A() {
    function modify() {
       x = 300;
       y = 400;
    }

    var c = new C();
}

function B() {
    function modify(){
       x = 3000;
       y = 4000;
    }

    var c = new C();
}

C = function () {
   var x = 10;
   var y = 20;

   function modify() {
      x = 30;
      y = 40;
   };

   modify();
   alert("The sum is: " + (x+y));
}

私はメソッドをオーバーライドすることが可能な任意の方法があれば今の質問は、あるmodifyからCであるメソッドを持つAとB。Javaではsuper-keywordを使用しますが、JavaScriptでこのようなことをどのように実現できますか？

編集：元の回答が書かれてから6年が経ち、多くの変更が加えられました。

• Babelなどのツールでコンパイルされた新しいバージョンのJavaScriptを使用している場合は、実際のクラスを使用できます。
• AngularまたはReactが提供するクラスのようなコンポーネントコンストラクターを使用している場合は、そのフレームワークのドキュメントを確認することをお勧めします。
• ES5を使用していて、プロトタイプを使用して手作業で「偽の」クラスを作成している場合、以下の答えはこれまでと同じように正しいです。

幸運を！

JavaScriptの継承はJavaとは少し異なります。ネイティブJavaScriptオブジェクトシステムの外観は次のとおりです。

// Create a class
function Vehicle(color){
  this.color = color;
}

// Add an instance method
Vehicle.prototype.go = function(){
  return "Underway in " + this.color;
}

// Add a second class
function Car(color){
  this.color = color;
}

// And declare it is a subclass of the first
Car.prototype = new Vehicle();

// Override the instance method
Car.prototype.go = function(){
  return Vehicle.prototype.go.call(this) + " car"
}

// Create some instances and see the overridden behavior.
var v = new Vehicle("blue");
v.go() // "Underway in blue"

var c = new Car("red");
c.go() // "Underway in red car"

残念ながら、これは少し醜く、「スーパー」するための非常に優れた方法が含まれていません。呼び出す親クラスのメソッドを手動で指定する必要があります。その結果、クラスの作成をより適切にするためのさまざまなツールがあります。Prototype.js、Backbone.js、またはjsでOOPを実行するためのより優れた構文を含む同様のライブラリを調べてみてください。

これはグーグルのトップヒットなので、私は更新された答えを与えたいと思います。

ES6クラスを使用すると、継承とメソッドのオーバーライドがはるかに簡単になります。

'use strict';

class A {
    speak() {
        console.log("I'm A");
    }
}

class B extends A {
    speak() {
        super.speak();

        console.log("I'm B");
    }
}

var a = new A();
a.speak();
// Output:
// I'm A

var b = new B();
b.speak();
// Output:
// I'm A
// I'm B

superキーワードは、継承するクラスで使用されるとき、親クラスを指します。また、親クラスのすべてのメソッドは子のインスタンスにバインドされているため、を記述する必要はありませんsuper.method.apply(this);。

互換性について：ES6互換性テーブルには、主要なプレーヤーのサポートクラスの最新バージョンのみが表示されます（ほとんど）。V8ブラウザは今年の1月からそれらを持っており（ChromeとOpera）、FirefoxはSpiderMonkey JSエンジンを使用して、公式のFirefox45リリースで来月クラスを見る予定です。モバイル側では、Androidはまだこの機能をサポートしていませんが、5か月前にリリースされたiOS9は部分的にサポートしています。

幸い、HarmonyコードをES5コードに再コンパイルするためのJSライブラリであるBabelがあります。クラス、およびES6の他の多くの優れた機能により、Javascriptコードをより読みやすく保守しやすくすることができます。

かつては、従来のOOのエミュレートを避け、代わりにプロトタイプのOOを使用する必要があります。プロトタイプOOの優れたユーティリティライブラリは特性です。

メソッドを上書きして継承チェーンを設定するのではなく（オブジェクト継承よりもオブジェクトコンポジションを優先する必要があります）、再利用可能な関数をトレイトにバンドルし、それらを使用してオブジェクトを作成する必要があります。

実例

var modifyA = {
    modify: function() {
        this.x = 300;
        this.y = 400;
    }
};

var modifyB = {
    modify: function() {
        this.x = 3000;
        this.y = 4000;
    }
};

C = function(trait) {
    var o = Object.create(Object.prototype, Trait(trait));

    o.modify();
    console.log("sum : " + (o.x + o.y));

    return o;
}

//C(modifyA);
C(modifyB);

あなたの例のmodify（）はプライベート関数であり、A、B、またはC定義内以外の場所からはアクセスできません。あなたはそれを次のように宣言する必要があります

this.modify = function(){}

Cに渡さない限り、Cはその親を参照しません。CがAまたはBから継承するように設定されている場合、Cはパブリックメソッドを継承します（modify（）を定義したようなプライベート関数ではありません）。Cが親からメソッドを継承すると、継承されたメソッドをオーバーライドできます。

modify()最後に呼び出したメソッドは、オーバーライドmodify()する場合はグローバルコンテキストで呼び出され、最初にAまたはを継承する必要がありBます。

多分あなたはこれをやろうとしている：

この場合、C継承しますA

function A() {
    this.modify = function() {
        alert("in A");
    }
}

function B() {
    this.modify = function() {
        alert("in B");
    }
}

C = function() {
    this.modify = function() {
        alert("in C");
    };

    C.prototype.modify(); // you can call this method where you need to call modify of the parent class
}

C.prototype = new A();

すべての変数を「パブリック」にしない限り、つまりFunction、直接またはprototypeプロパティを介してそれらをメンバーにします。

var C = function( ) {
    this.x = 10 , this.y = 20 ;
    this.modify = function( ) {
        this.x = 30 , this.y = 40 ;
        console.log("(!) C >> " + (this.x + this.y) ) ;
    } ;
} ;

var A = function( ) {
    this.modify = function( ) {
       this.x = 300 , this.y = 400 ;
       console.log("(!) A >> " + (this.x + this.y) ) ;
    } ;
} ;
    A.prototype = new C ;

var B = function( ) {
    this.modify = function( ) {
       this.x = 3000 , this.y = 4000 ;
       console.log("(!) B >> " + (this.x + this.y) ) ;
    } ;
} ;


new C( ).modify( ) ;
new A( ).modify( ) ;
new B( ).modify( ) ; 

• ここでテストしてください

いくつかの変更に気付くでしょう。

最も重要なのは、想定される「スーパークラス」コンストラクターの呼び出しが、この行内で暗黙的に行われるようになったことです。

<name>.prototype = new C ;

どちらAとB今持っているだろう、個別に変更可能なメンバーをxしてyいるが、我々が書かれているかどうケースではないでしょう... = C代わりに。

その後、x、yおよびmodifyすべての「パブリック」メンバーであるので、別のを割り当てることFunction、それらに

 <name>.prototype.modify = function( ) { /* ... */ }

Functionその名前でオリジナルを「上書き」します。

最後に、想定される「スーパークラス」を想定される「サブクラス」のプロパティに設定すると、「スーパークラス」への暗黙的な呼び出しが再度実行されるためmodify、Function宣言での呼び出しを行うことはできませんprototype。

しかし、まあ、これは多かれ少なかれ、JavaScriptでこの種のことを行う方法です。

HTH、

FK