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

我使用JavaScript原型和继承构建了一个大型应用程序。 但是我很难组织我的代码。 例如，我有一个类carousel，它具有以下许多功能：

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

$.extend(this.prototype , new parentClass);

我想这样组织我的代码：

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)

---

有人知道我如何绕过“this”值吗

您可以将

控件

作为自己的一个类：

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

var Carousel = function () {
    this.controls = new Controls(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);
    };
// ..

var carousel = new Carousel();
carousel.addController(new Controls(carousel));

我的遗产是这样做的：

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

$.extend(this.prototype , new parentClass);

哎哟。这不是继承（使用旋转木马的新BigCarousel实例
），而是复制属性。也许这对你来说已经足够了，但是你应该叫它mixin。而且，你应该


但这将导致“此”的价值丢失。我怎样才能解决这个问题

不可能让
此
指向具有嵌套属性的父对象（只要您不希望每次都显式设置它）。您只有两个选择：


忘记它，通过在方法前面加前缀来组织它们（
controlNext
，
controlBind
，…）
为每个转盘提供自己的
控件
对象。例如，对于继承，将它们设置为
CarouselControls
实例。如果这些控件完全独立于旋转木马，并且不需要访问它们连接到任何地方的旋转木马，那么这尤其适合。如果它们不是，您仍然可以将对父旋转木马的引用传递到它们的构造函数中，例如：

this.controls = new CarouselControls(this);

此外，为了自定义不同转盘中的控件，您可能还必须对
转盘控件
进行子类化，或者准备
控件
对象，以便通常为不同的转盘服务，以便从
BigCarousel
可以

Carousel.call(this); // make this a carousel
this.controls.activate({big: true, fast: false}); // or something


您可以使用函数的.bind方法

在Javascript中，函数继承自对象，因此它们有自己的方法。其中一种方法是.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”，这很混乱。
谢谢你的提醒，我知道这一点，但浅拷贝暂时还可以，我不能正确地执行多重继承，比如：
Carousel.inheritsFrom（Base）Carousel.inheritsFrom（Images）
好的，是的，对于多重继承，你需要使用这样的混合。仅设置单个
父属性就没有意义了：-）这似乎是最符合逻辑的事情，但假设我有很多函数处理旋转木马项目，它们是否也应该在自己的类中？例如：
Carousel.prototype.getItemsPassed=function（）{…}Carousel.prototype.setItemsPassed=function（）{…}Carousel.prototype.getThumbData=function（）{…}Carousel.prototype.setThumbData=function（）{…}
，在控件的情况下，分解是有意义的，但它肯定不是您一直想要的。只需遵循OO和继承设计的一般准则即可。另请参见