从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查看对象功能代码
Apr 25 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Javascript设计模式之装饰者模式详解篇
Jan 17 Javascript
Node.js和Express简单入门介绍
Mar 24 Javascript
jQuery 循环遍历改变a标签的href(实例讲解)
Jul 12 jQuery
switchery按钮的使用方法
Dec 18 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
js获取浏览器地址(获取第1个斜杠后的内容)
Sep 03 Javascript
Vue混入mixins滚动触底的方法
Nov 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
php下实现折线图效果的代码
2007/04/28 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
ThinkPHP的截取字符串函数无法显示省略号的解决方法
2014/06/25 PHP
PHP面向对象程序设计子类扩展父类(子类重新载入父类)操作详解
2019/06/14 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JS location几个方法小姐
2008/07/09 Javascript
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
非主流的textarea自增长实现js代码
2011/12/20 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
jquery解析xml字符串示例分享
2014/03/25 Javascript
实现placeholder效果的方案汇总
2015/06/11 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
Jquery Ajax Error 调试错误的技巧
2015/11/20 Javascript
学习jQuey中的return false
2015/12/18 Javascript
如何让一个json文件显示在表格里【实现代码】
2016/05/09 Javascript
微信小程序 教程之注册页面
2016/10/17 Javascript
谈谈target=_new和_blank的不同之处
2016/10/25 Javascript
javascript 实现文本使用省略号替代(超出固定高度的情况)
2017/02/21 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
微信网页授权并获取用户信息的方法
2018/07/30 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
Python实现抓取网页并且解析的实例
2014/09/20 Python
python异常和文件处理机制详解
2016/07/19 Python
python中的turtle库函数简单使用教程
2018/07/23 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
解决tensorflow/keras时出现数组维度不匹配问题
2020/06/29 Python
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
新浪网技术部笔试题
2016/08/26 面试题
兼职学生的自我评价
2013/11/24 职场文书
新闻发布会主持词
2014/03/28 职场文书
反腐倡廉警示教育活动总结
2014/05/05 职场文书
国情备忘录观后感
2015/06/04 职场文书
二年级数学教学反思
2016/02/16 职场文书
导游词之桂林山水
2019/09/20 职场文书