如何组织 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);
};
// ..

这允许我们维护对原始对象的引用，但不允许覆盖 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));

这允许我们创建多个控制器并将它们动态添加到轮播中，提供灵活性和覆盖实现的能力。

以上是如何组织 JavaScript 原型并在继承过程中维护'this”上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！