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


Posted in Javascript onSeptember 25, 2014

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

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

调试的时候走的是标红的这段代码,然后用到了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 相关文章推荐
JavaScript 模式之工厂模式(Factory)应用介绍
Nov 15 Javascript
关于jQuery object and DOM element
Apr 15 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
通过JS来动态的修改url,实现对url的增删查改
Sep 01 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
Sep 19 Javascript
jquery中object对象循环遍历的方法
Dec 18 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
vue实现重置表单信息为空的方法
Sep 29 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 #Javascript
JS小游戏之宇宙战机源码详解
Sep 25 #Javascript
JS小游戏之极速快跑源码详解
Sep 25 #Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 #Javascript
我用的一些Node.js开发工具、开发包、框架等总结
Sep 25 #Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 #Javascript
用C/C++来实现 Node.js 的模块(二)
Sep 24 #Javascript
You might like
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
php更新mysql后获取改变行数的方法
2014/12/25 PHP
禁用键盘上的(全局)指定键兼容iE、Chrome、火狐
2013/05/14 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
JavaScript字符串常用的方法
2016/03/10 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
jQuery绑定事件的几种实现方式
2016/05/09 Javascript
AngularJS实现分页显示数据库信息
2016/07/01 Javascript
js实现小窗口拖拽效果
2016/12/03 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
vue实现图片加载完成前的loading组件方法
2018/02/05 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
JS实现图片切换效果
2018/11/17 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
element-ui 本地化使用教程详解
2019/10/28 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
解决Djang2.0.1中的reverse导入失败的问题
2019/08/16 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
2020/01/14 HTML / CSS
非凡女性奢华谦虚风格:The Modist
2017/10/28 全球购物
在线课程:Skillshare
2019/04/02 全球购物
Fossil德国官网:化石手表、手袋、珠宝及配件
2019/12/07 全球购物
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
半年思想汇报
2013/12/30 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
幼儿园春游活动方案
2014/01/19 职场文书
深入开展党的群众路线教育实践活动方案
2014/02/04 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
爱国主义影片观后感
2015/06/18 职场文书