在組織基於 JavaScript 原型的程式碼時如何維護「this」值？

物件導向JavaScript 中的程式碼組織和「this」值

在組織基於JavaScript 原型的程式碼組織和「this」值

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

在組織基於JavaScript 原型的程式碼時，常見的挑戰是保留物件引用和繼承。假設您有一個帶有各種函數（如 next()、prev() 和 bindControls()）的 Carousel 類別。為了增強程式碼組織，您希望將這些函數分組在控制項屬性下，如下所示：

但是，這種方法破壞了「this」值，而「this」值對於存取物件屬性和方法至關重要。若要保持原始上下文中的「this」值，可以採用以下解決方案：

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

var Carousel = function () {
    this.controls = new Controls(this);
};
// ..

建立一個 Controls 類，該類別在 Controls 建構子中保留對可控物件的參考。 Controls 中處理操作的方法，例如 next()，使用參考來呼叫可控制物件中對應的方法。

這確保了繼承性，並允許您透過像依賴注入這樣的機制。

以上是在組織基於 JavaScript 原型的程式碼時如何維護「this」值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！