先贴上jquery实现each功能的源代码(把常用的call部分提取出来,为了方便理解,就进行了一定的修改)
// A special, fast, case for the most common use of each
function( object, function) {
if ( object.length == undefined ) {
for ( var name in object )
if ( function.call( object[ name ], name, object[ name ] ) === false )
break;
} else
for ( var i = 0, length = object.length, value = object[0];
i < length && function.call( value, i, value ) !== false; value = object[++i] ){}
}
return object;
}
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象、数组的属性值并进行处理。
jQuery和jQuery对象都实现了该方法,对于jQuery对象,只是把each方法简单的进行了委托:把jQuery对象作为第一个参数传递给jQuery的each方法。换句话说:jQuery提供的each方法是对参数一提供的对象的中所有的子元素逐一进行方法调用。而jQuery对象提供的each方法则是对jQuery内部的子元素进行逐个调用。
简单的可以理解为
//当我们使用object.each(function(){..})时,实际是进行的调用是
for(var i = i;i<object.length;i++){
var value = object[i];
//function中的this指向value,传入的参数为object的索引和索引处的值
function.call(value,i,value);
}
从each传入的参数说起
object就是调用each方法的对象,function就是每一个object都要执行的方法
在了解each实现之前,我们需要了解这个call方法
应用于:Function 对象
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数:thisObj -可选项,将被用作当前对象的对象。
arg1, arg2, , argN -可选项,将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
简单的例子一个:
function Class1()
{
this.name = “class1″;
//js闭包
this.showName = function()
{
alert(this.name);
}
}
function Class2()
{
this.name = “class2″;
}
var c1 = new Class1();
var c2 = new Class2();
c1.showName.call(c2);
c1.showName.call(c2)中call方法把c1的方法放到了c2上执行,因为call方法替换的是函数内部this.name = “class2″后执行的方法,也就是说
执行c1.showName.call(c2)等同于执行
function Class2()
{
this.name = “class2″;
this.showName = function()
{
alert(this.name);
}
}
那么回到
//当我们使用object.each(function(){..})时,实际是进行的调用是
for(var i = i;i<object.length;i++){
var value = object[i];
//function中的this指向value,传入的参数为object的索引和索引处的值
function.call(value,i,value);
}
因为function是我们要为object的每一个子集执行的方法,通过function.call(value,i,value)之后,我们把fuction的方法赋予了value,也就是object[i],通过for循环来执行从object索引为0到object.length-1的子集。
我们在实际应用的时候
$obj.each(func);
实际上就是把func通过call的方法给$obj的每一个子集遍历执行。
自己的语言表达能力还不是很好,如果觉得表达有误的可以指出来
分享到:
相关推荐
`jQuery`中的`each()`函数是一个非常重要的工具方法,它允许开发者遍历对象或数组的成员,并对每个成员执行特定的操作。在`jQuery`中,`each()`有两种主要的使用场景,一种是针对数组或对象,另一种是针对`jQuery`...
在jQuery的`each()`方法的实现中,它会根据对象是否为数组来决定使用`for`循环还是`for...in`循环。如果提供了额外的`args`参数,回调函数将使用`apply()`方法来调用,这允许传递一个数组作为参数。如果没有提供`...
jQuery的`each`方法是其核心功能之一,用于遍历jQuery对象中的每个元素或对象的每个属性,并执行指定的函数。这个方法有两种主要的使用场景:遍历数组/类数组对象和遍历对象属性。 首先,`jQuery.prototype.each`...
通过上述介绍,我们可以看到`each()`方法的强大之处不仅在于其能够轻松地遍历各种类型的对象,还在于它极大地简化了遍历逻辑,提高了代码的清晰度和可维护性。无论是处理数组、对象还是DOM元素,`each()`都是一个...
通常,元素内容变化的监听可以通过绑定一些内置的jQuery事件来实现,但对于div这样的非输入型元素,标准的change事件就无能为力了。本文将详细探讨如何监听div元素内容的变化。 首先,传统的change()方法并不能监听...
接下来将详细介绍文档中提到的部分方法实现: - **`jQuery.isArray()`** 这个方法用于判断一个对象是否为数组类型。早期版本中存在多种方式来实现这一功能,但都存在一定的缺陷: - 使用`typeof`只能区分出对象...
首先,为了防止jQuery库中的`$`符号与其他库或代码产生冲突,我们通常会使用`jQuery.noConflict()`方法来释放`$`变量,然后用`jQuery`代替`$`。在示例代码中,我们看到`var jQuery = $;`这行代码就是将`jQuery`对象...
此外,jQuery还利用了JavaScript的`Function.prototype.call()`和`Function.prototype.apply()`方法,使得函数可以改变上下文(`this`关键字的指向),这样jQuery的一些方法就可以应用于非jQuery对象。例如,`call()...
`jQuery.each`是jQuery库中的一个核心方法,用于遍历对象和数组。它是一个非常灵活且功能强大的工具,尤其在处理数据迭代时非常有用。这个方法有两个主要的参数:`object`,即需要遍历的对象或数组,以及`callback`...
本文将详细介绍如何开发jQuery插件,包括类级别插件和对象级别插件的开发方法,并提供实际的示例代码。 #### 二、类级别插件开发 类级别的插件开发是指给jQuery添加新的全局函数,相当于在jQuery类本身添加方法。...
在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...
一个基本的jQuery插件通常以$.fn作为扩展点,这是因为$.fn是jQuery对象方法的原型,这样我们就能在所有jQuery选择器的结果集上添加新的方法。例如: ```javascript $.fn.myPlugin = function(options) { return ...
通过上述内容的介绍和分析,开发者可以更加熟练地使用jQuery的$.each方法来遍历JSON数组和对象。这不仅增强了代码的可读性和可维护性,而且还能够灵活地处理各种数据结构。掌握$each方法是编写高效jQuery代码的重要...
在深入探讨`jQuery.each`之前,我们先来了解一下JavaScript中的`call`方法,因为`jQuery.each`的实现原理与`call`密切相关。 `call`方法是JavaScript中的一个函数属性,它可以改变函数的执行上下文(即`this`的指向...
要使jQuery选择的对象能够直接调用插件方法,我们需要将自定义对象的方法添加到jQuery的原型对象 `$.fn` 上。 ```javascript $.fn.myPlugin = function(options) { return this.each(function() { var ...
2. `apply`方法:与`call`类似,`apply`也用于改变`this`的值,但它接受两个参数:第一个参数同样是`this`的值,第二个参数是一个数组或类数组对象,其中的元素会被作为单独的参数传递给目标函数。例如: ```...
$(function() { var $mybook = $('#mybook'); var $bttn_next = $('#next_page_button'); var $bttn_prev = $('#prev_page_button'); var $loading = $('#loading'); var $mybook_images = $mybook.find('img')...