Самописный ООП-слайдер на javascript — почему ошибка (замыкания)?

Question

[Алексей Дзюба]

Пытаюсь делать свой слайдер в ооп-стиле. Вот код:

spoiler

var prevBtn = document.querySelector('.btn-prev--js');
var nextBtn = document.querySelector('.btn-next--js');

  var sliderImgs = document.querySelectorAll('.slider-img');
  var i = 0;

function Slider(images, prevBtn, nextBtn) {
      this.images = images;
      this.i = 0;

      prevBtn.onclick = function () {
          hide(this.images[this.i], 19);
          this.i--;

          if (this.i < 0) {
              this.i = this.images.length - 1;
          }

          show(this.images[this.i], 19);
      };

      nextBtn.onclick = function () {
          hide(this.images[this.i], 19);
          this.i++;

          if (this.i > this.images.length - 1) {
              this.i = 0;
          }

          show(sliderImgs[this.i], 19);
      }
  }

  var mySlider = new Slider(sliderImgs, prevBtn, nextBtn);

Я хочу сделать так, чтобы можно было указывать в конструкторе собственные кнопки управления. И в теле функции я написал .onclick, но, боюсь, в этом и кроется ошибка. Что-то с замыканиями? Вот ошибка:

common.js:47 Uncaught TypeError: Cannot read property 'undefined' of undefined
    at HTMLButtonElement.Slider.nextBtn.onclick (common.js:47)

Comments

[Алексей Дзюба]

Как я понимаю, дело в this. Но можно ли реализовать такой функционал вообще, о котором я пишу?

[twobomb]

Алексей Дзюба, Попробуй в начале добавить

function Slider(images, prevBtn, nextBtn) {
      this.images = images;
      this.i = 0;
     var _this = this;

И в обрабочиках onclick использовать _this вместо this.

[Kovalsky]

Алексей Дзюба, эээ, ну как бы обработчики исполняются в контексте элемента к которому они привязаны, то есть this указывает на ваши кнопки, у которых естественно нету ни свойства i, ни свойства images.

[Алексей Дзюба]

twobomb, ОХРЕНЕТЬ оно работает!!! А как это так получилось? Это же прием какой-то, верно??

Answer 1

[eRKa]

function Slider(images, prevBtn, nextBtn) {
      var self = this;
      this.images = images;
      this.i = 0;

      prevBtn.onclick = function () {
          hide(self.images[self.i], 19);
          self.i--;

          if (self.i < 0) {
              self.i = self.images.length - 1;
          }

          show(self.images[self.i], 19);
      };

      nextBtn.onclick = function () {
          hide(self.images[self.i], 19);
          self.i++;

          if (self.i > self.images.length - 1) {
              self.i = 0;
          }

          show(sliderImgs[self.i], 19);
      }
  }

Comments

[Алексей Дзюба]

Спасибо! А почему так получается вообще, что нужно еще одну ссылку создавать?

[eRKa]

this это текущий контекст объекта, т.е все его свойства и методы. Для объекта Slider в текущем контексте есть images и i. А вот для объекта на котором произошло событие this будет указывать на другой контекст, на свой и в этом контексте этих свойств уже не будет.

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

[Алексей Дзюба]

eRKa, круто! Спасибо за ответ!

Answer 2

[Stalker_RED]

Если прописать в обработчике console.log(this), то вы увидите, что там не ваш слайдер, а кнопка по которой кликнули.

Можно переписать так:

function Slider(images, prevBtn, nextBtn) {
      this.images = images;
      var self = this;
      // ...
      prevBtn.onclick = function () {
          hide(self.images[self.i], 19);
          self.i--;
          // ...
      };
  }

Другой вариант, использовать в качестве обработчика стрелочную функцию. Эти функции захватывают контекст в котором были объявлены, а не тот, где были вызваны.

// ...
  nextBtn.onclick = () => {
    console.log(this.images)
  };
// ...

https://jsfiddle.net/06v3j7f3/

И вообще, лучше избегать onclick. Я понимаю, что в первых главах большинства учебников его упоминают, так как по сравнению с addEventListener он кажется милым и пушистым, но вообще это неудобный привет из девяностых, имхо. Достаточно того факта, что вы не можете сделать два разных onclick'а на одной кнопке.

Подкину вам еще пищу для размышлений: что будет, если на странице будет ДВА ваших слайдера? Или больше.

Comments

[Алексей Дзюба]

Спасибо! А почему так получается вообще, что нужно еще одну ссылку создавать?

P.S. Вот знаете, Сталкер Рэд, спасибо Вам за помощь. Вы уже не раз мне помогали. Да и так, когда захожу на какие-то вопросы, вижу Ваши ответы и понимаю, что Вы очень толковый человек. Жаль в тостере нельзя подписаться на ответы пользователя)) Без шуток, спасибо Вам

[Stalker_RED]

Алексей Дзюба, Специально сделано, что в обработчик события в качестве this передается объект, на котором висит listener.
https://jsfiddle.net/zcg3jaL3/

Добавил в ответ вариант со стрелочной функцией.