如何在保留「this」引用和繼承的同時組織 JavaScript 原型？

使用保留的引用和繼承組織JavaScript 原型

為了在使用JavaScript 原型和繼承時有效地組織程式碼，會出現一個常見問題：遺失定制原型中的“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);
};
// ..

透過定義作為一個單獨的類別的控件，即使在自訂原型中，「this」引用也保持不變。但是，此解決方案存在不允許重寫 Controls 實現的限制。

依賴注入解決方案：

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

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

此解決方案通過允許動態新增和修改來提供靈活性控制器，可以選擇性地覆寫繼承類別中的功能。

以上是如何在保留「this」引用和繼承的同時組織 JavaScript 原型？的詳細內容。更多資訊請關注PHP中文網其他相關文章！