从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 相关文章推荐
JS实现商品倒计时实现代码
May 03 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
JavaScript中的标签语句用法分析
Feb 10 Javascript
JS实现常见的TAB、弹出层效果(TAB标签,斑马线,遮罩层等)
Oct 08 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】
Nov 02 Javascript
学习vue.js表单控件绑定操作
Dec 05 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 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
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
php4与php5的区别小结(配置异同)
2011/12/20 PHP
PHP中创建空文件的代码[file_put_contents vs touch]
2012/01/20 PHP
php程序内部post数据的方法
2015/03/31 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
js 蒙版进度条(结合图片)
2010/03/10 Javascript
json格式化/压缩工具 Chrome插件扩展版
2010/05/25 Javascript
jquery attr 设定src中含有&amp;(宏)符号问题的解决方法
2011/07/26 Javascript
javascript 在firebug调试时用console.log的方法
2012/05/10 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jQuery中insertBefore()方法用法实例
2015/01/08 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
jquery层级选择器的实现(匹配后代元素div)
2016/09/05 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
通过修改360抢票的刷新频率和突破8车次限制实现方法
2017/01/04 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
实例讲解DataTables固定表格宽度(设置横向滚动条)
2017/07/11 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
layuiAdmin循环遍历展示商品图片列表的方法
2019/09/16 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
python中的lambda表达式用法详解
2016/06/22 Python
深入理解Python中的super()方法
2017/11/20 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Pyecharts地图显示不完成问题解决方案
2020/05/11 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
轻松掌握CSS3中的字体大小单位rem的使用方法
2016/05/24 HTML / CSS
SVG实现多彩圆环倒计时效果的示例代码
2017/11/21 HTML / CSS
英国女性化妆品收纳和家具网站:Beautify
2019/12/07 全球购物
教育科学研究生自荐信
2013/10/09 职场文书
环境科学毕业生自荐信
2013/11/21 职场文书
文明生主要事迹
2014/05/25 职场文书
公司优秀员工推荐信
2015/03/24 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python