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

 更新时间:2014年09月25日 10:47:11   投稿:junjie   我要评论

这篇文章主要介绍了从JQuery源码分析JavaScript函数的apply方法与call方法,本文结合JQuery源码和js高级程序设计再次探究apply方法与call方法,需要的朋友可以参考下

最近在使用jQuery的$.each方法时很,突然想到$.each($(‘div'),function(index,entity){});中的这个index和entity是哪冒出来的,而且可有可无的,而且这么高大上的能告诉我们当前遍历的下标和实例。所以看了一下jQuery源代码,是这么写的:

调试的时候走的是标红的这段代码,然后用到了callback.call这个函数,于是翻看了一下《js高级程序设计》,其中有比较深的解释。

首先,function是一个指向Function对象,函数名是一个指向函数的指针。那么在函数体内,就会有一个作用域,即this关键字。

this关键字指的是函数运行的作用域,举个例子来说:

复制代码 代码如下:

<script type="text/javascript">
        function funcA() {
            alert(this);
            alert("Function A");
        }
</script>

上面这段代码中的函数funcA定义在全局环境中,那么函数体内的this即window对象。

下面该到call和apply的说明了。以call函数为例,call的第一个参数,就是改变函数的作用域,后面的参数为传入函数的所需的参数,必须与原函数的参数一直,举例说明:

复制代码 代码如下:

<script type="text/javascript">
        var testO = { name: "Lily" };
        function funcA(a,b) {
            alert(this);
            alert("Function A");
        }

        function funcB(a, b) {
            funcA.call(testO, a, b);
        }

        funcB(1,2);  //this变成了testO
    </script>

我们定义funcB函数的中,调用了funcA的call函数,这个时候我们改变了funcA中this的指向,原本指向window的,现在指向了call的第一个参数testO这个对象。而且调用call时,因为funcA函数有两个参数,所以如果要想funcA传递参数,必须一一指出参数,即后面的两个参数a和b,或者可以只穿第一个参数

即:funcA.call(testO);或者只传a,即:funcA.call(testO,a);

而apply与call的区别仅在于,apply的第二个参数可以是数组形式,而且不必一一指出参数,funcA.apply(testO,[a,b])

介绍完call与apply的基本用法,该说说他哥俩真正的用武之地了,扩充函数赖以运行的作用域。

复制代码 代码如下:

<script type="text/javascript">
        window.color = "透明";
        var testObj = { color: "红色" };

        function testFuc() {
            alert(this.color);
        }

        $(function () {
            1.testFuc(); //弹出“透明”
            2.testFuc(this); //弹出“undefined”
            3.testFuc.call(this.parent); //弹出“透明”
            4.testFuc.call(window); //弹出“透明”
            5.testFuc.call(testObj); //弹出“红色”
        });
</script>

上面这段代码演示了call的作用。第一个函数调用,this指向了window,所以弹出了window的color属性。

第二个函数可能有些朋友以为也会弹出透明,但是请先确定我们的函数运行在$(function(){});中,这个jQuery的函数,了解jQuery的朋友都很清楚,在

$(function(){});中this的作用域指向的是document,然后我们调用testFunc,要弹出document的color,当然是未定义的。

第三个函数将testFunc的this指向了document的亲爹window,弹出window的color当然也是没有问题的。

第四个函数就更加直白了,把window传进去了

第五个函数,将testFunc的this指向了testObj,弹出了红色。

讲到这里,用法大家应该都有所了解了,但是具体怎么去理解怎么去使用还是看自己的套路。

我是这么理解的,可以把这种用法看成是C#或者java中的泛型方法。比如一个C#方法的定义

复制代码 代码如下:

public void Test<T>(T a, T b) { }

这样我们就可以实现对方法的扩展,实现通用的目的。

以上都是本人自己的看法和观点,有什么不对之处还请大家指出来共同学习。

相关文章

  • 基于JavaScript操作DOM常用的API小结

    基于JavaScript操作DOM常用的API小结

    DOM(Document Object Model)即文档对象模型,针对 HTML 和 XML 文档的 API(应用程序接口)。本篇文章给大家介绍javascript操作dom常用的api小结,对javascript dom api相关知识感兴趣的朋友一起学习吧
    2015-12-12
  • 本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

    本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

    遇到的本地图片预览的需求,IE6下可以直接从file的value获取图片路径来显示预览,IE7和IE8下通过select获取file的图片路径,再用滤镜来显示预览,至于FireFox祥看本文吧,希望可以帮助到你
    2013-03-03
  • javascript制作sql转换为stringBuffer的小工具

    javascript制作sql转换为stringBuffer的小工具

    这篇文章主要介绍了javascript制作sql转换为stringBuffer的小工具,使用方法很简单,吧写好的sql语句只要格式化好之后放进去就可以了,推荐给大家,有需要的小伙伴可以参考下。
    2015-04-04
  • 全面了解JavaScript的作用域链

    全面了解JavaScript的作用域链

    这是一个非常重要的知识点了,了解了JavaScript的作用域链的话,能帮助我们理解很多‘异常’问题。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 基于Particles.js制作超炫粒子动态背景效果(仿知乎)

    基于Particles.js制作超炫粒子动态背景效果(仿知乎)

    本文给大家分享Particles.js基于Canvas画布创建粒子颗粒效果,代码非常简单,需要的朋友参考下吧
    2017-09-09
  • 详解webpack介绍&安装&常用命令

    详解webpack介绍&安装&常用命令

    本篇文章主要介绍了详解webpack介绍&安装&常用命令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 微信上传视频文件提示(推荐)

    微信上传视频文件提示(推荐)

    晚上要下班了老板发来一个任务:把一个300M左右的视频压缩到100M以内,以便在微信上发送。于是就是抽空搞了起来,下面小编把过程分享到脚本之家平台,需要的朋友参考下吧
    2018-11-11
  • 解决javascript:window.close()在chrome,Firefox下失效的问题

    解决javascript:window.close()在chrome,Firefox下失效的问题

    本篇文章是对javascript:window.close()在chrome,Firefox下失效问题的解决方法进行了分析介绍。需要的朋友参考下
    2013-05-05
  • JavaScript实现学生在线做题计时器功能

    JavaScript实现学生在线做题计时器功能

    这篇文章主要为大家详细介绍了JavaScript实现学生在线做题计时器功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • JavaScript基本数据类型及值类型和引用类型

    JavaScript基本数据类型及值类型和引用类型

    大家经常可以见到javascript中的一些数据类型,比如“undefined”、“boolean”、“string”等等,这篇文章就和大家一起来学习JavaScript基本数据类型及值类型和引用类型,有需要的童鞋参考下,本文写的不好地方,还望大家提出,共同学习进步
    2015-08-08

最新评论