在组织基于 JavaScript 原型的代码时如何维护'this”值？

面向对象 JavaScript 中的代码组织和“this”值

在组织基于 JavaScript 原型的代码时，会出现一个常见的挑战保留对象引用和继承。假设您有一个带有各种函数（如 next()、prev() 和 bindControls()）的 Carousel 类。为了增强代码组织，您希望将这些函数分组在控件属性下，如下所示：

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

但是，这种方法破坏了“this”值，而“this”值对于访问对象属性和方法至关重要。要保持原始上下文中的“this”值，可以采用以下解决方案：

创建一个 Controls 类，该类在 Controls 构造函数中保留对可控对象的引用。 Controls 中处理操作的方法，例如 next()，使用引用来调用可控对象中相应的方法。

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

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

这确保了继承性，并允许您通过像依赖注入这样的机制。

以上是在组织基于 JavaScript 原型的代码时如何维护'this”值？的详细内容。更多信息请关注PHP中文网其他相关文章！