这是元素,$(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);
});
更深层次的观察
这个mdn包含在一个执行上下文中
范围引用当前的执行上下文。为了理解这一点,理解JavaScript中执行上下文的操作方式是很重要的。
执行上下文将其绑定
当控制进入一个执行上下文(代码在该范围内执行)时,变量的环境就被设置好了(词法和变量环境——本质上,这为变量设置了一个已经可以访问的区域,以及一个用于存储局部变量的区域),然后就会发生绑定。
jQuery绑定了这个
执行上下文形成一个逻辑堆栈。结果是堆栈中较深的上下文可以访问先前的变量,但它们的绑定可能已经更改。每次jQuery调用回调函数时,它都会使用applyMDN来改变这个绑定。
callback.apply( obj[ i ] )//where obj[i] is the current element
调用apply的结果是在jQuery回调函数中,this指向回调函数使用的当前元素。
例如,在.each中,通常使用的回调函数允许使用.each(function(index,element){/*scope*/})。在这个范围内,this ==元素为真。
jQuery回调使用apply函数将被调用的函数绑定到当前元素。这个元素来自jQuery对象的元素数组。每个构造的jQuery对象都包含一个元素数组,这些元素与用于实例化jQuery对象的selectorjQuery API相匹配。
$(selector) calls the jQuery function (remember that $ is a reference to jQuery, code: window.jQuery = window.$ = jQuery;). Internally, the jQuery function instantiates a function object. So while it may not be immediately obvious, using $() internally uses new jQuery(). Part of the construction of this jQuery object is to find all matches of the selector. The constructor will also accept html strings and elements. When you pass this to the jQuery constructor, you are passing the current element for a jQuery object to be constructed with. The jQuery object then contains an array-like structure of the DOM elements matching the selector (or just the single element in the case of this).
一旦构造了jQuery对象,jQuery API现在就公开了。当jQuery api函数被调用时,它会在内部遍历这个类似数组的结构。对于数组中的每一项,它调用api的回调函数,将回调的this绑定到当前元素。这个调用可以在上面的代码片段中看到,其中obj是类数组结构,i是用于当前元素在数组中的位置的迭代器。