this
是元素,$(this)
是使用该元素构造的jQuery对象
$(".class").each(function(){
//the iterations current html element
//the classic JavaScript API is exposed here (such as .innerHTML and .appendChild)
var HTMLElement = this;
//the current HTML element is passed to the jQuery constructor
//the jQuery API is exposed here (such as .html() and .append())
var jQueryObject = $(this);
});
深入了解
this
MDN包含在执行上下文中
范围是指当前的执行上下文ECMA。为了理解this
,理解执行上下文在JavaScript中的运行方式非常重要。
执行上下文将其绑定
当控件进入执行上下文(在该范围内执行代码)时,将设置变量环境(词法和变量环境-本质上,这将设置一个供变量输入的区域,该区域已经可以访问,并为局部变量设置一个区域)。存储),并且this
发生绑定。
jQuery将此绑定
执行上下文形成逻辑堆栈。结果是,堆栈深处的上下文可以访问以前的变量,但是它们的绑定可能已更改。每次jQuery调用回调函数时,它都会使用apply
MDN更改此绑定。
callback.apply( obj[ i ] )//where obj[i] is the current element
调用的结果apply
是在jQuery回调函数内部,this
是指该回调函数正在使用的当前元素。
例如,在中.each
,常用的回调函数允许.each(function(index,element){/*scope*/})
。在此范围内,this == element
是正确的。
jQuery回调使用apply函数将正在调用的函数与当前元素绑定。该元素来自jQuery对象的element数组。构造的每个jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的选择器jQuery API匹配。
$(selector)
调用jQuery函数(请记住,它$
是对jQuery
,code:的引用window.jQuery = window.$ = jQuery;
)。在内部,jQuery函数实例化一个函数对象。因此,虽然可能不会立即显而易见,但在$()
内部使用new jQuery()
。该jQuery对象的部分构造是查找选择器的所有匹配项。构造函数还将接受html字符串和元素。当您传递this
给jQuery构造函数时,您正在传递要使用构建的jQuery对象的当前元素。然后,jQuery对象包含与选择器匹配的DOM元素的类似数组的结构(对于则仅包含单个元素this
)。
构造jQuery对象后,便会公开jQuery API。调用jQuery api函数时,它将在内部遍历此类似数组的结构。对于数组中的每个项目,它都会调用api的回调函数,将回调函数绑定this
到当前元素。可以在上面的代码段中看到此调用,其中obj
是类似于数组的结构,并且i
是用于当前元素数组中位置的迭代器。