this
是元素,$(this)
是用该元素构造的 jQuery 对象
$(".class").each(function(){
var HTMLElement = this;
var jQueryObject = $(this);
});
更深入的观察
this
MDN包含在执行上下文中
范围是指当前的执行上下文ECMA。为了理解this
,重要的是理解 JavaScript 中执行上下文的操作方式。
执行上下文绑定 this
当控制进入执行上下文(代码正在该范围内执行)时,变量的环境被设置(词法和变量环境 - 本质上这为变量设置了一个区域,这些区域已经可以访问,而局部变量则设置了一个区域存储),并且this
发生绑定。
jQuery 绑定了这个
执行上下文形成一个逻辑堆栈。结果是堆栈中更深的上下文可以访问先前的变量,但它们的绑定可能已被更改。每次 jQuery 调用回调函数时,它都会使用apply
MDN更改 this 绑定。
callback.apply( obj[ i ] )
调用的结果apply
是在 jQuery 回调函数内部,this
指的是回调函数正在使用的当前元素。
例如,在 中.each
,常用的回调函数允许.each(function(index,element){/*scope*/})
. 在那个范围内,this == element
是真的。
jQuery 回调使用 apply 函数将被调用的函数与当前元素绑定。这个元素来自 jQuery 对象的元素数组。构造的每个 jQuery 对象都包含一个元素数组,这些元素与用于实例化 jQuery 对象的选择器jQuery API相匹配。
$(selector)
调用 jQuery 函数(请记住,这$
是对jQuery
, 代码:的引用window.jQuery = window.$ = jQuery;
)。在内部,jQuery 函数实例化一个函数对象。因此,虽然它可能不是很明显,但在$()
内部使用new jQuery()
. 这个 jQuery 对象的部分构造是找到选择器的所有匹配项。构造函数还将接受 html 字符串和元素。当您传递this
给 jQuery 构造函数时,您正在传递要使用 .js 构造的 jQuery 对象的当前元素。然后,jQuery 对象包含与选择器匹配的 DOM 元素的类似数组的结构(或者在 的情况下仅包含单个元素this
)。
一旦构造了 jQuery 对象,就可以公开 jQuery API。当调用 jQuery api 函数时,它将在内部迭代这个类似数组的结构。对于数组中的每个项目,它调用 api 的回调函数,将回调绑定this
到当前元素。这个调用可以在上面的代码片段中看到,其中obj
是类数组结构,i
是用于当前元素在数组中的位置的迭代器。