在保留对象引用和继承的同时组织原型javascript

一尘不染

在保留对象引用和继承的同时组织原型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”的值丢失。我可以使用全局实例来跟踪它，但是当类被继承时这会引起问题，例如，在另一个文件中，我有类似的东西可以覆盖父类。

BigCarousel.prototype.next = function () {...}

我的继承是这样完成的：

Function.prototype.inheritsFrom = function (parentClass) {
    if (parentClass.constructor === Function) {
        //Normal Inheritance
        this.prototype              = $.extend(this.prototype , new parentClass);
        this.prototype.constructor  = this;
        this.prototype.parent       = parentClass.prototype;
    }
    else {
        //Pure Virtual Inheritance
        this.prototype = $.extend(this.prototype, parentClass);
        this.prototype.constructor = this;
        this.prototype.parent = parentClass;
    }
    return this;
};

所以我可以做：

BigCarousel.inheritsFrom(Carousel)

有谁知道我该如何处理“ this”值？

阅读 236

2020-04-25

共1个答案

一尘不染

您可以自己制作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));

2020-04-25