从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隐藏控件的方法
Sep 21 Javascript
js 页面传参数时 参数值含特殊字符的问题
Dec 13 Javascript
JS替换字符串中字符即替换全部而不是第一个
Jun 04 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
解决jQuery ajax请求在IE6中莫名中断的问题
Jun 20 Javascript
详解javascript获取url信息的常见方法
Dec 19 Javascript
详解vue嵌套路由-params传递参数
May 23 Javascript
VUE中的无限循环代码解析
Sep 22 Javascript
基于vue.js无缝滚动效果
Jan 25 Javascript
使用Vue写一个datepicker的示例
Jan 27 Javascript
详解javascript replace高级用法
Feb 17 Javascript
JavaScript设计模式之策略模式实现原理详解
May 29 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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
php auth_http类库进行身份效验
2009/03/19 PHP
PHP文件打开、关闭、写入的判断与执行代码
2011/05/24 PHP
php文件夹与文件目录操作函数介绍
2013/09/09 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
js简单实现HTML标签Select联动带跳转
2013/10/23 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
JS简单实现tab切换效果的多窗口显示功能
2016/09/07 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
vue 动态绑定背景图片的方法
2018/08/10 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
使用vue2实现带地区编号和名称的省市县三级联动效果
2018/11/05 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
2019/05/10 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JavaScript实现简单进度条效果
2020/03/25 Javascript
如何利用Node.js与JSON搭建简单的动态服务器
2020/06/16 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
Python实现的简单算术游戏实例
2015/05/26 Python
python中range()与xrange()用法分析
2016/09/21 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
详解Python 正则表达式模块
2018/11/05 Python
python实现单目标、多目标、多尺度、自定义特征的KCF跟踪算法(实例代码)
2020/01/08 Python
jupyter notebook 调用环境中的Keras或者pytorch教程
2020/04/14 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
怎样自定义一个异常类
2016/09/27 面试题
战友聚会主持词
2014/04/02 职场文书
求职信范文大全
2014/05/26 职场文书
企业宣传口号
2014/06/12 职场文书
水利水电建筑施工应届生求职信
2014/07/04 职场文书
硕士论文致谢范文
2015/05/14 职场文书
2019年大学推荐信
2019/06/24 职场文书