画像のロールオーバーオブジェクト - javascript

Question

以下は、画像のロールオーバーを作成するのに使用できる簡単なコードです（チュートリアルから抜粋します）。著者は言う：attachイベントハンドラ部分の下で、コンストラクタはここに2つのイベントハンドラを作成します。これらのイベントハンドラ内には、ロールオーバーオブジェクトを参照するために "that"という名前の変数を使用する必要があります。これは、イベントハンドラ内の "this"キーワードが、ロールオーバーオブジェクトではなくイメージオブジェクトを参照するためです。

私の質問は：this.imageはイメージオブジェクトを参照していますが、this.image.srcをthis.newImageURLに設定したいとは思いませんか？なぜthatが必要なのか分かりません。 srcプロパティーをthat.imageに変更すると、 `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

JavaScriptでこのは、スコープで変数が変わります。 var that = this;の最初の行は、このは、ロールオーバーオブジェクトを指します。これを設定すると、基本的にはロールオーバーへのポインタが作成されます。関数コールバックで

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

ような任意の後続のイベントの呼び出しでは、このは、現在のイベントの範囲を指す

- この現在、ロールオーバーされたオブジェクトを指します。そういうわけで、画像のプロパティを持たないDOM要素があるため、this.imageが何かを指していないのです。ロールオーバーインスタンス（元this）に既に別の変数を設定しているので、これを他のスコープで使用できるようになりました。

Answer 2

これは、その時点でインスタンス化されたオブジェクトのインスタンスを参照します。 それが重要な理由です - あるいは、clrはどのオブジェクトを呼び出すべきか分からないでしょうか？と。 （これは私の最初の答えです。親切にしてください））

Answer 3

あなたはもはやロールオーバーのためにjavascriptを使うべきではありません。

CSSを試す：ホバー！ http://tinkerbin.com/ze1Y32ZP