3

jQueryのセレクターの使用方法を知って$(this)おり、JavascriptでのOOPの原則も理解しています。他の誰かがそれを実装したので、私はいつもそれがうまくいくことを受け入れました、しかし私はそれがなぜそしてどのように働くのか知りたいです。

$(function(){
   $('.foo').each(function(){
      console.log($(this));
   });
});

このコードを考えると。HTML要素のセットを見つけて、を使用してそれらを反復処理できるjQueryオブジェクト$('.foo')を返すことを私は知っています。次に、メソッドの内部構造は、パラメーターとして渡されたクロージャーを呼び出す可能性があります。.each(...)each()

しかし、なぜthisクロージャー内の特定のHTML要素を参照するのでしょうか。thisラッパーが。を使用してインスタンス化されている限り、これは新しいスコープのみを参照すると常に思っていnewました。それで、代わりにthis参照された場合、それははるかに一貫性がありませんか？window

4

3 に答える 3

8

最終的には、またはthisを使用して関数内の値をいつでも強制できます。jQueryはこれを行います。のソースを見てください：.call.apply.each

if ( callback.call( object[ i ], i, object[ i++ ] ) === false ) {
//                  ^ `this` value

ここでは、this値が要素（object[i]）に設定され、カウンター（i）と要素が引数として関数（である）に渡されますcallback。

于 2012-06-11T17:09:11.270 に答える
4

これは、クラスと一致するすべての要素の単純な反復であり、.fooを使用して内部関数を呼び出します.call/.apply。

.each実装を確認してくださいhttp://james.padolsey.com/jquery/#v=git&fn=jQuery.each

以下のコードの.call/.apply呼び出しに注意してください。これにより、次のようになりますthis。.foo[i]

jQueryの.each実装

function (object, callback, args) {
    var name, i = 0,
        length = object.length,
        isObj = length === undefined || jQuery.isFunction(object);
    if (args) {
        if (isObj) {
            for (name in object) {
                if (callback.apply(object[name], args) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.apply(object[i++], args) === false) {
                    break;
                }
            }
        }
    } else {
        if (isObj) {
            for (name in object) {
                if (callback.call(object[name], name, object[name]) === false) {
                    break;
                }
            }
        } else {
            for (; i < length;) {
                if (callback.call(object[i], i, object[i++]) === false) {
                    break;
                }
            }
        }
    }
    return object;
}
于 2012-06-11T17:09:41.440 に答える
3

「理由」は、それが動作するようjQuery(selector).eachに定義されているためです。

...コールバックは現在のDOM要素のコンテキストで発生するため、キーワードthisは要素を参照します。

このようにする必要はありませんでしたが、そうしました。（使用される「方法」メカニズムについては、を参照Function.callしてください。）Function.apply

ハッピーコーディング！

于 2012-06-11T17:10:00.713 に答える