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 オブジェクトへの参照が壊れ、クラスから継承するときにエラーが発生します。この問題に対処するために、さまざまな戦略を検討できます:

コントロール クラスの作成:

1 つのアプローチは、次のように別個の Controls クラスを定義することです:

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

var Carousel = function () {
    this.controls = new Controls(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);
    };
// ..

var carousel = new Carousel();
carousel.addController(new Controls(carousel));

これにより、複数のコントローラーを作成してカルーセルに動的に追加できるようになり、実装をオーバーライドする柔軟性と機能が提供されます。

以上がJavaScript プロトタイプを整理し、継承中に「この」コンテキストを維持するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。