объект ролловера изображения - JavaScript

Question

Ниже приведен простой фрагмент кода, который можно использовать для создания ролловеров изображений (взятых из учебника, который я прохожу). Автор говорит: в разделе обработчиков событий присоединения конструктор создает здесь два обработчика событий. Именно в этих обработчиках событий переменная с именем «that» должна использоваться для ссылки на объект Rollover. Это потому, что ключевое слово "this" в обработчиках событий относится к объекту изображения, а не к объекту Rollover.

Мой вопрос: я понимаю, что this.image относится к объекту изображения, но не хотите ли вы просто установить this.image.src равным this.newImageURL? Наверное, я просто не понимаю, зачем нужна that. И как получается, что изменение свойства src that.image приводит к изменению свойства src `this.image? '

var $ = function (id) { return document.getElementById(id); }

var Rollover = function ( imageId, newImageURL ) {
    var that = this;
    this.newImageURL = newImageURL;
    this.image = $(imageId);

    // Validate node
    if ( ! this.image ) {
        throw new Error("Rollover: Image ID not found.");
    }
    if ( this.image.nodeType !== 1 || this.image.nodeName !== "IMG" ) {
        throw new Error("Rollover: Image ID is not an img tag.");
    }

    var newObj = that;
    // Copy original image url
    this.oldImageURL = this.image.src;

    // Attach event handlers
    this.image.onmouseover = function () {
        that.image.src = that.newImageURL;
    }
    this.image.onmouseout = function () {
        that.image.src = that.oldImageURL;
    }
}

Answer 1

Вам больше не следует использовать javascript для ролловеров.

Попробуйте CSS: hover!http://tinkerbin.com/ze1Y32ZP

Answer 2

В javascript переменная эта изменяется в зависимости от области видимости.Первая строка var that = this; this относится к объекту Rollover.Установка этого = в основном просто создает указатель на Rollover.

При любом последующем вызове события, например

this.image.onmouseover = function () {
    that.image.src = that.newImageURL;
}

В функции обратного вызова this теперь относится к области действия события- this теперь указывает на объект, который был перевернут.Вот почему this.image ни на что не указывает, потому что элемент DOM, на который наведен курсор, не имеет свойства изображения.Поскольку вы уже задали другую переменную (ту) для экземпляра Rollover (оригинальная this ), теперь вы можете использовать ее в любой другой области.

Answer 3

Это относится к экземпляру объекта, созданного в то время, когда создается конструктор.Вот почему это важно - или клиент не будет знать, какой объект вызывать?с.(это мой первый ответ, будьте добры;))