Organizing Prototype-Based JavaScript While Preserving Object Reference and Inheritance

Dilemma: Reorganizing Code to Enhance Structure

Prototypal inheritance is a powerful JavaScript paradigm, but managing large applications can be challenging. Consider a carousel class with numerous functions:

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

Refactoring for better code organization might involve grouping functions into sub-objects:

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

However, this change introduces a problem: the "this" keyword within these functions no longer refers to the carousel instance.

Overcoming the "this" Issue

Maintaining the "this" context is crucial, especially in scenarios where classes inherit from parent classes. Overriding functions in inherited classes must preserve proper "this" behavior.

Solutions

Sub-Object Wrapping

One approach is to define Controls as a separate class and store a reference to the carousel instance:

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

While this solution addresses the "this" issue, it prevents the overriding of Controls' implementation.

Dependency Injection

A more flexible approach involves dependency injection:

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

In this scenario, the carousel class can add multiple controllers, accommodating multiple sets of functionality and allowing for easy overrides.