組織基於原型的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」行為。

解決方案

子物件包裝

一種方法是將Controls 定義為單獨的類別並儲存引用到輪播實例：

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

雖然此解決方案解決了「this」問題，但它阻止了 Controls 實作的重寫。

依賴注入

更靈活的方法涉及依賴注入:

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

在這種情況下，輪播類別可以添加多個控制器，容納多組功能並允許輕鬆覆蓋。