オブジェクトの参照と継承を保持しながら、プロトタイプベースの JavaScript コードを編成するにはどうすればよいですか?

オブジェクトの参照と継承を維持しながらプロトタイプベースの 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();
}
// ..

この解決策は「this」の問題に対処しますが、コントロールの実装。

依存関係の注入

より柔軟なアプローチには、依存関係の注入が含まれます。

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);
    };
// ..

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

以上がオブジェクトの参照と継承を保持しながら、プロトタイプベースの JavaScript コードを編成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。