从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根据指定下标或对象删除数组元素
Dec 21 Javascript
jQuery中bind,live,delegate与one方法的用法及区别解析
Dec 30 Javascript
js实现的彩色方块飞舞奇幻效果
Jan 27 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
May 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
js智能获取浏览器版本UA信息的方法
Aug 08 Javascript
bootstrap选项卡扩展功能详解
Jun 14 Javascript
基于daterangepicker日历插件使用参数注意的问题
Aug 10 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
在Vue中使用this.$store或者是$route一直报错的解决
Nov 08 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实现仿百度文库,豆丁在线文档效果(word,excel,ppt转flash)
2016/03/10 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
用js代码改变单选框选中状态的简单实例
2013/12/18 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
巧用replace将文字表情替换为图片
2014/04/17 Javascript
js计算任意值之间随机数的方法
2015/01/16 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
Javascript数组中push方法用法分析
2016/10/31 Javascript
微信小程序学习之数据处理详解
2017/07/05 Javascript
js如何编写简单的ajax方法库
2017/08/02 Javascript
微信小程序实现点击按钮修改字体颜色功能【附demo源码下载】
2017/12/05 Javascript
JS函数节流和函数防抖问题分析
2017/12/18 Javascript
vue使用iframe嵌入网页的示例代码
2020/06/09 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
2019/06/06 Javascript
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python入门篇之面向对象
2014/10/20 Python
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python中类型检查的详细介绍
2017/02/13 Python
python移位运算的实现
2019/07/15 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
keras的load_model实现加载含有参数的自定义模型
2020/06/22 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
python实现图片转字符画
2021/02/19 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
世界上最大的巴士旅游观光公司:Big Bus Tours
2016/10/20 全球购物
团队队名口号大全
2014/06/06 职场文书
2014年为民办实事工作总结
2014/12/20 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
golang 实现时间戳和时间的转化
2021/05/07 Golang