JS: Почему this.images[i] является undefined?

Question

Необходимо сделать ООП слайдер. HTML-конструкция:

<div class="gallery gallery-1">
            <div class="photos">
                <img src="img/Chrysanthemum.jpg" class="showed" alt="">
                <img src="img/Desert.jpg" alt="">
                <img src="img/Hydrangeas.jpg" alt="">
                <img src="img/Jellyfish.jpg" alt="">
                <img src="img/Koala.jpg" alt="">
                <img src="img/Lighthouse.jpg" alt="">
                <img src="img/Penguins.jpg" alt="">
                <img src="img/Tulips.jpg" alt="">
            </div>
            <div class="buttons">
                <input type="button" value="Назад" class="prev">
                <input type="button" value="Вперёд" class="next">
            </div>
        </div>

Картинки в позиции Absolute. У первой картинки стоит класс 'showed', который показывает картинку. При нажатии на кнопку назад или вперёд, этот класс у текущий картинки удаляется, счётчик увеличивается (или уменьшается) на единицу и добавляет класс 'showed' следующей картинке. CSS 'showed':

.gallery .photos img.showed{
    opacity: 1;
} 

Функции-конструктору, в качестве параметра, передаётся объект:

var slider = new Slider({
      images: '.gallery-1 .photos img',
      btnPrev: '.gallery-1 .buttons .prev',
      btnNext: '.gallery-1 .buttons .next',
      auto: true //флаг автопрокрутки изображений
  });
}

Описание функции-конструктора:

function Slider(obj) {
    var i = 0;    
    this.images = document.querySelectorAll(obj.images);
    this.btnPrev = document.querySelector(obj.btnPrev);
    this.btnNext = document.querySelector(obj.btnNext);
    this.auto = obj.auto;

    this.btnNext.onclick = function(){

        this.images[i].classList.remove('showed');
        i++;
        if(i >= this.images.length) {
            i = 0;
        }
        this.images[i].classList.add('showed'); 
    }
    this.btnPrev.onclick = function(){
        this.images[i].classList.remove('showed');
        i--;
        if (i < 0) {
            i = this.images.length-1;
        }
        this.images[i].classList.add('showed');
    }


    if(this.auto) {
        setInterval(function(){

        this.images[i].classList.remove('showed');
        i++;
        if(i >= images.length) {
            i = 0;
        }
        this.images[i].classList.add('showed'); 
    }, 1000);
    }
}

Этот код не работает. Однако, если я сделаю вот так:

var img = this.images;

Подставив после этого переменную img вместо this.images, код работает. А так же он работает, если сразу делать:

var images = document.querySelectorAll(obj.images);

Как я понимаю, this.images виден только на верхнем уровне функции. И из любой другой вложенной функции (например обработчика) виден не будет? То есть контекст потеряется?

Только вхожу в ООП. Прошу понять и простить. Если есть материалы на тему this, которые именно Вам помогли его полностью понять - поделитесь!