从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 事件查询综合 推荐收藏
Mar 10 Javascript
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
鼠标滑在标题上显示图片的JS代码
Nov 19 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery菜单插件用法实例
Jul 25 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
Dec 24 Javascript
详解Bootstrap插件
Apr 25 Javascript
angular-ui-sortable实现可拖拽排序列表
Dec 28 Javascript
vue小图标favicon不显示的解决方案
Sep 19 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
mpvue跳转页面及注意事项
Aug 03 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 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简洁函数(PHP简单明了函数语法)
2012/06/10 PHP
crontab无法执行php的解决方法
2016/01/25 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
JavaScript 轻松搞定快捷留言功能 只需一行代码
2010/04/01 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
2013/12/04 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JS无缝滚动效果实现方法分析
2016/12/21 Javascript
基于jquery二维码生成插件qrcode
2017/01/07 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
分分钟学会vue中vuex的应用(入门教程)
2017/09/14 Javascript
VSCode 配置React Native开发环境的方法
2017/12/27 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
使用Vue中 v-for循环列表控制按钮隐藏显示功能
2019/04/23 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
JavaScript实现鼠标经过表格某行时此行变色
2020/11/20 Javascript
Python win32com 操作Exce的l简单方法(必看)
2017/05/25 Python
200行python代码实现2048游戏
2019/07/17 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
幼儿园教师培训制度
2014/01/16 职场文书
北体毕业生求职信
2014/02/28 职场文书
个人租房协议书
2014/04/09 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
签证工作证明模板
2015/06/15 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书
创业计划书之熟食店
2019/10/16 职场文书
nginx如何将http访问的网站改成https访问
2021/03/31 Servers
python 命令行传参方法总结
2021/05/25 Python
SpringBoot深入分析讲解监听器模式下
2022/07/15 Java/Android