`
gallon00
  • 浏览: 31410 次
  • 性别: Icon_minigender_1
  • 来自: 运城
文章分类
社区版块
存档分类
最新评论

【抄】jQuery each的实现与Function 对象的call方法的详细介绍

阅读更多
先贴上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`中,`each()`有两种主要的使用场景,一种是针对数组或对象,另一种是针对`jQuery`...

    jQuery each()方法的使用方法

    在jQuery的`each()`方法的实现中,它会根据对象是否为数组来决定使用`for`循环还是`for...in`循环。如果提供了额外的`args`参数,回调函数将使用`apply()`方法来调用,这允许传递一个数组作为参数。如果没有提供`...

    jquery的each方法使用示例分享

    jQuery的`each`方法是其核心功能之一,用于遍历jQuery对象中的每个元素或对象的每个属性,并执行指定的函数。这个方法有两种主要的使用场景:遍历数组/类数组对象和遍历对象属性。 首先,`jQuery.prototype.each`...

    each()详细介绍

    通过上述介绍,我们可以看到`each()`方法的强大之处不仅在于其能够轻松地遍历各种类型的对象,还在于它极大地简化了遍历逻辑,提高了代码的清晰度和可维护性。无论是处理数组、对象还是DOM元素,`each()`都是一个...

    jquery监听div内容的变化具体实现思路

    通常,元素内容变化的监听可以通过绑定一些内置的jQuery事件来实现,但对于div这样的非输入型元素,标准的change事件就无能为力了。本文将详细探讨如何监听div元素内容的变化。 首先,传统的change()方法并不能监听...

    jquery1.43源码分析之工具方法.doc

    接下来将详细介绍文档中提到的部分方法实现: - **`jQuery.isArray()`** 这个方法用于判断一个对象是否为数组类型。早期版本中存在多种方式来实现这一功能,但都存在一定的缺陷: - 使用`typeof`只能区分出对象...

    ajax+jquery二级联动实现

    首先,为了防止jQuery库中的`$`符号与其他库或代码产生冲突,我们通常会使用`jQuery.noConflict()`方法来释放`$`变量,然后用`jQuery`代替`$`。在示例代码中,我们看到`var jQuery = $;`这行代码就是将`jQuery`对象...

    jQuery_的原型关系图

    此外,jQuery还利用了JavaScript的`Function.prototype.call()`和`Function.prototype.apply()`方法,使得函数可以改变上下文(`this`关键字的指向),这样jQuery的一些方法就可以应用于非jQuery对象。例如,`call()...

    jQuery.each使用详解

    `jQuery.each`是jQuery库中的一个核心方法,用于遍历对象和数组。它是一个非常灵活且功能强大的工具,尤其在处理数据迭代时非常有用。这个方法有两个主要的参数:`object`,即需要遍历的对象或数组,以及`callback`...

    jquery插件开发

    本文将详细介绍如何开发jQuery插件,包括类级别插件和对象级别插件的开发方法,并提供实际的示例代码。 #### 二、类级别插件开发 类级别的插件开发是指给jQuery添加新的全局函数,相当于在jQuery类本身添加方法。...

    Jquery实现$.fn.extend和$.extend函数_.docx

    在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...

    jQuery插件开发详解

    一个基本的jQuery插件通常以$.fn作为扩展点,这是因为$.fn是jQuery对象方法的原型,这样我们就能在所有jQuery选择器的结果集上添加新的方法。例如: ```javascript $.fn.myPlugin = function(options) { return ...

    jQuery使用$.each遍历json数组的简单实现方法

    通过上述内容的介绍和分析,开发者可以更加熟练地使用jQuery的$.each方法来遍历JSON数组和对象。这不仅增强了代码的可读性和可维护性,而且还能够灵活地处理各种数据结构。掌握$each方法是编写高效jQuery代码的重要...

    jquery each的几种常用的使用方法示例

    在深入探讨`jQuery.each`之前,我们先来了解一下JavaScript中的`call`方法,因为`jQuery.each`的实现原理与`call`密切相关。 `call`方法是JavaScript中的一个函数属性,它可以改变函数的执行上下文(即`this`的指向...

    HTML5-jQuery插件开发的流程.pdf

    要使jQuery选择的对象能够直接调用插件方法,我们需要将自定义对象的方法添加到jQuery的原型对象 `$.fn` 上。 ```javascript $.fn.myPlugin = function(options) { return this.each(function() { var ...

    从JQuery源码分析JavaScript函数的apply方法与call方法

    2. `apply`方法:与`call`类似,`apply`也用于改变`this`的值,但它接受两个参数:第一个参数同样是`this`的值,第二个参数是一个数组或类数组对象,其中的元素会被作为单独的参数传递给目标函数。例如: ```...

    jquery翻书效果

    $(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')...

Global site tag (gtag.js) - Google Analytics