从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 相关文章推荐
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
js中小数转换整数的方法
Jan 26 Javascript
js实现iframe跨页面调用函数的方法
Dec 13 Javascript
js实现商城星星评分的效果
Dec 29 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Vue.js开发环境搭建
Nov 10 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
Vue2.2.0+新特性整理及注意事项
Aug 22 Javascript
JS前后端实现身份证号验证代码解析
Jul 23 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 13 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
PHP与javascript实现变量交互的示例代码
2013/07/23 PHP
zf框架的db类select查询器join链表使用示例(zend框架)
2014/03/14 PHP
yii实现model添加默认值的方法(2种方法)
2016/01/06 PHP
详解PHP多个进程配合redis的有序集合实现大文件去重
2019/03/06 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
Javascript模板技术
2007/04/27 Javascript
用js实现的页面关键字密度查询代码
2007/12/27 Javascript
Javascript浅谈之this
2013/12/17 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery固定元素插件scrolltofixed使用指南
2015/04/21 Javascript
vue.js指令v-for使用及索引获取
2016/11/03 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
jquery实现输入框实时输入触发事件代码
2016/12/21 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
2017/01/21 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
利用ctypes提高Python的执行速度
2016/09/09 Python
python二维码操作:对QRCode和MyQR入门详解
2019/06/24 Python
利用Python实现手机短信监控通知的方法
2019/07/22 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
pandas 对group进行聚合的例子
2019/12/27 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
Python分类测试代码实例汇总
2020/07/23 Python
Python try except finally资源回收的实现
2021/01/25 Python
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
小学生组织委员竞选稿
2015/11/21 职场文书
加薪申请书应该这样写!
2019/07/04 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python