Организация JavaScript на основе прототипов с сохранением ссылок на объекты и наследование

Дилемма: реорганизация кода для улучшения структуры

Наследование прототипов — это мощная парадигма JavaScript, но управление большими приложениями может оказаться сложной задачей. Рассмотрим класс карусели с многочисленными функциями:

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

Рефакторинг для лучшей организации кода может включать группировку функций в подобъекты:

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

Однако это изменение создает проблему: ключевое слово «this» в этих функциях больше не относится к экземпляру карусели.

Решение проблемы «this»

Поддержка контекст «this» имеет решающее значение, особенно в сценариях, где классы наследуются от родительских классов. Переопределение функций в унаследованных классах должно сохранять правильное «это» поведение.

Решения

Обертка подобъектов

Один из подходов — определить Controls как отдельный класс и сохранить ссылку к экземпляру карусели:

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

Хотя это решение решает «эту» проблему, оно предотвращает переопределение реализации элементов управления.

Внедрение зависимостей

Более гибкий подход предполагает внедрение зависимостей :

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

В этом сценарии класс карусели может добавлять несколько контроллеров, поддерживающих несколько наборов функций и позволяющих легко переопределять.