如何組織 JavaScript 原型並在繼承過程中維護「this」上下文？

使用保留的物件參考和繼承組織JavaScript 原型

在JavaScript 中，隨著應用程式變得越來越大，使用原型和繼承組織程式碼可能會變得具有挑戰性。考慮以下場景：我們有一個具有多個函數的輪播類別：

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

為了改進程式碼組織，我們可能會想要將這些函數分組為一個物件：

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

但是，這種方法破壞了對this 物件的引用，導致從類別繼承時出錯。為了解決這個問題，我們可以探索不同的策略：

建立Controls 類別：

一個方法是定義一個單獨的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 原型並在繼承過程中維護「this」上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！