Question

我使用JavaScript原型和继承构建了一个大型应用程序。但我很难组织我的代码。例如，我有一个类旋转木马，它有许多这样的功能：

Carousel.prototype.next = function () {...}
Carousel.prototype.prev = function () {..}
Carousel.prototype.bindControls = function () {..}

我想像这样组织我的代码：

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

但这会导致“这个”的价值丢失。我可以使用全局实例跟踪它，但这会在继承类时导致问题，例如在另一个文件中我有类似的东西来覆盖父类

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)

有谁知道如何解决“这个”值？

Answer 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));

Answer 2

我的继承是这样完成的：
$.extend(this.prototype , new parentClass);

哎哟。这不是继承（使用new BigCarousel instanceof Carousel），而只是复制属性。也许这对你来说已经足够了，但是你应该把它叫做 mixin 。此外，您应该avoid using new for inheritance。

但这会导致“这个”的价值丢失。我该如何解决这个问题？

将this指向具有嵌套属性的父对象是不可能的（只要您不希望每次都明确设置它）。您只有两个选择：

忘记它，并通过为它们添加前缀来组织您的方法（controlNext，controlBind，...）
为每个轮播提供自己的controls对象。对于继承，例如，将它们设为CarouselControls个实例。如果这些控件完全独立于旋转木马，并且不需要访问它们附着在任何地方的旋转木马，这尤其适用。如果不是，您仍然可以将对父轮播的引用传递给它们的构造函数，例如：
```
this.controls = new CarouselControls(this);
```
此外，为了自定义不同轮播中的控件，您可能还必须继承CarouselControls - 或者您准备Controls对象以便为不同的轮播提供服务，以便从{{{ 1}}你可以
```
BigCarousel
```

Answer 3

您可以使用Function的.bind方法。

在Javascript函数中继承自Object，因此它们有自己的方法。其中一种方法是.bind：

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind

你也在做继承错误，原始Javascript的正确方法是：

ChildClass= function() {
    ParentClass.apply(this, arguments); //calling parent constructor
    //constructor
};

ChildClass.prototype= new ParentClass();

然后你可以在构造函数上执行此操作：

Courossel= function() {
    ParentClass.apply(this, arguments); //calling parent constructor
    this.controls.next.bind(this);
    this.controls.prev.bind(this);
    this.controls.bindControls.bind(this);
}

但是我必须说Frits建议更好，让控件成为他们自己的类，并在Carousel构造函数上实例化它，并传递对Carousel实例的引用（this关键字）。只是不要把它称为“.ref”，这很令人困惑。

在持久化对象引用和继承的同时组织原型javascript

3 个答案: