从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中为String对象添加trim,ltrim,rtrim方法
Sep 22 Javascript
JavaScript的eval JSON object问题
Nov 15 Javascript
javascript 面向对象全新理练之原型继承
Dec 03 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
理解Javascript_05_原型继承原理
Oct 13 Javascript
js前台判断开始时间是否小于结束时间
Feb 23 Javascript
等待指定时间后自动跳转或关闭当前页面的js代码
Jul 09 Javascript
使用jquery+CSS实现控制打印样式
Dec 31 Javascript
Javascript数据结构与算法之列表详解
Mar 12 Javascript
浅谈js script标签中的预解析
Dec 30 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
layui点击数据表格添加或删除一行的例子
Sep 12 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
桌面中心(一)创建数据库
2006/10/09 PHP
解析ajax事件的调用顺序
2013/06/17 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
PHP实现统计在线人数功能示例
2016/10/15 PHP
PHPExcel导出2003和2007的excel文档功能示例
2017/01/04 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
PHP实现新型冠状病毒疫情实时图的实例
2020/02/04 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
js模拟类继承小例子
2010/07/17 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
解决json日期格式问题的3种方法
2014/02/02 Javascript
js实现表单Radio切换效果的方法
2015/08/17 Javascript
javascript适合移动端的日期时间拾取器
2015/11/10 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
layer弹窗插件操作方法详解
2017/05/19 Javascript
JavaScript实现图片拖曳效果
2017/09/08 Javascript
javascript 判断用户有没有操作页面
2017/10/17 Javascript
vue中如何自定义右键菜单详解
2020/12/08 Vue.js
Python读写Excel文件的实例
2013/11/01 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Python解决pip install时出现的Could not fetch URL问题
2019/08/01 Python
python tornado使用流生成图片的例子
2019/11/18 Python
flask框架蓝图和子域名配置详解
2020/01/25 Python
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
2018/01/10 HTML / CSS
俄罗斯园林植物网上商店:Garshinka
2020/07/16 全球购物
介绍一下MD5加密算法
2016/11/12 面试题
婚礼主持词
2014/03/13 职场文书
贫困证明书格式及范文
2014/10/15 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
安全教育观后感
2015/06/17 职场文书