3

我知道如何使用 jQuery 的$(this)选择器，也了解 Javascript 中的 OOP 原理。我总是接受它只是工作，因为其他人实现了它，但我很想知道它为什么以及如何工作。

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

鉴于此代码。我知道它会$('.foo')找到一组 HTML 元素并返回一个jQuery 对象，该对象能够使用.each(...). 然后方法的内部结构each()可能会调用已作为参数传递的闭包。

但是为什么还要this引用闭包内的特定 HTML 元素呢？我一直认为这this只会引用一个新的范围，只要它的包装器已经使用new. this那么如果引用它会不会更加一致window？

4

3 回答 3

8

最后，您始终可以使用or强制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 回答