オブジェクト参照と継承を維持しながらプロトタイプ ベースの JavaScript を編成

ジレンマ: 構造を強化するためにコードを再編成

プロトタイプ継承は強力な JavaScript パラダイムです。ただし、大規模なアプリケーションの管理は困難な場合があります。多数の関数を持つカルーセル クラスを考えてみましょう:

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

コードをより適切に構成するためのリファクタリングには、関数をサブオブジェクトにグループ化することが含まれる場合があります。

Carousel.prototype.controls = {
   next: function () { ... } , 
   prev: function() { ... },
   bindControls: function () { .. }
}

ただし、この変更により問題が発生します。これらの関数内の「this」キーワードはカルーセル インスタンスを参照しなくなりました。

「this」問題の克服

メンテナンス「this」コンテキストは、特にクラスが親クラスから継承するシナリオでは非常に重要です。継承されたクラスのオーバーライド関数は、適切な「this」動作を保持する必要があります。

ソリューション

サブオブジェクト ラッピング

1 つの方法は、コントロールを別のクラスとして定義し、参照を保存することです。カルーセル インスタンスへ:

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

この解決策は「この」問題に対処しますが、コントロールの実装のオーバーライドを防ぎます。

依存性の注入

より柔軟なアプローチには依存性の注入が含まれます:

var Controls = function (controllable_object) {
    this.ref = controllable_object;
};
Controls.prototype.next = function () {
    this.ref.foo();
}
// ..

var Carousel = function () {
        this.controllers = [];
    };
Carousel.prototype.addController = function (controller) {
        this.controllers.push(controller);
    };
// ..

このシナリオでは、カルーセル クラスは複数のコントローラーを追加して、複数の機能セットに対応し、簡単なオーバーライドを可能にします。