Organize prototype javascript while perserving object reference and inheritance

Question

I have built a large application using JavaScript prototype and inheritance. But I am having a hard time organizing my code. For example I have a class carousel which has ma

Answer 1

My inheritance is done like this:

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

Ouch. This is not inheritance (with new BigCarousel instanceof Carousel), but just copying properties. Maybe this is enough for you, but then you should call it mixin. Also, you should avoid using new for inheritance.

---

But this will cause the value of "this" being lost. How can I work around that?

It's impossible to have this point to the parent object with nested properties (as long as you don't want to explicitly set it every time). You have only two choices:

• Forget it, and organize your methods by prefixing them (controlNext, controlBind, …)

• Give each of your carousels its own controls object. For inheritance, make them CarouselControls instances for example. This especially fits well if those controls are quite independent from the carousel, and don't need to access the carousel they're attached to everywhere. If they are not, you still can pass a reference to the parent carousel into their constructor for example:

  this.controls = new CarouselControls(this);
  

  Also, for customizing the controls in different carousels, you might have to subclass the CarouselControls as well - or you prepare your Controls object to serve for different carousels in general, so that from BigCarousel you can

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