Question

以下是一段简单的代码，可用于创建图像翻转（取自我正在经历的教程）。作者说：在attach事件处理程序部分下，构造函数在这里创建了两个事件处理程序。在这些事件处理程序中，名为“that”的变量必须用于引用Rollover对象。那是因为事件处理程序中的“this”关键字是指图像对象，而不是Rollover对象。

我的问题是：我了解this.image是指图片对象，但您不想将this.image.src设置为this.newImageURL吗？我想我只是不明白为什么that是必要的。如何更改that.image的src属性最终会改变`this.image的src属性？'

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

这是指在创建构造函数时实例化的对象的实例。这就是为什么它很重要 - 或者clr不知道要调用什么对象？用。（这是我的第一个答案，请善待;））

Answer 2

您不再需要使用javascript进行翻转。

尝试CSS：悬停！ http://tinkerbin.com/ze1Y32ZP

Answer 3

在javascript中，此变量随范围而变化。 var that = this; 此的第一行是指Rollover对象。设置=这基本上只是创建一个指向Rollover的指针。

在任何后续的事件调用中，如

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

在函数回调中，现在引用事件范围 - 此现在指向已翻转的对象。这就是为什么this.image不会指向任何东西，因为被鼠标悬停的DOM元素没有图像属性。因为您已经将另一个变量（那个）设置为Rollover实例（原始 this ），所以现在可以在任何其他范围中使用它。

图像翻转对象 - JavaScript

3 个答案: