如何组织基于原型的 JavaScript 代码，同时保留对象引用和继承？

组织基于原型的 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”问题，但它防止了覆盖

依赖注入

更灵活的方法涉及依赖注入：

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

在这种情况下，轮播类可以添加多个控制器，容纳多个功能集并允许轻松覆盖。

以上是如何组织基于原型的 JavaScript 代码，同时保留对象引用和继承？的详细内容。更多信息请关注PHP中文网其他相关文章！