从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将控件隐藏的方法及display属性介绍
Jul 04 Javascript
javaScript面向对象继承方法经典实现
Aug 20 Javascript
jQuery图片特效插件Revealing实现拉伸放大
Apr 22 Javascript
JavaScript中获取Radio被选中的值
Nov 11 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
基于vuejs实现一个todolist项目
Apr 11 Javascript
移动端web滚动分页的实现方法
May 05 Javascript
vue解决跨域路由冲突问题思路解析
Nov 03 Javascript
JavaScript实现省市联动过程中bug的解决方法
Dec 04 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Vue.js实现可编辑的表格
Dec 11 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 iconv() : Detected an illegal character in input string
2010/12/05 PHP
7个超级实用的PHP代码片段
2011/07/11 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
PHP实现APP微信支付的实例讲解
2018/02/10 PHP
响应鼠标变换表格背景或者颜色的代码
2009/03/30 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
javascript写的日历类(基于pj)
2010/12/28 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
获取阴历(农历)和当前日期的js代码
2016/02/15 Javascript
javascript动画系列之模拟滚动条
2016/12/13 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
Angular请求防抖处理第一次请求失效问题
2019/05/17 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
2019/09/16 Javascript
layui扩展上传组件模拟进度条的方法
2019/09/23 Javascript
Javascript实现鼠标点击冒泡特效
2019/12/24 Javascript
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
python 获取计算机的网卡信息
2021/02/18 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
毕业生的自我鉴定该怎么写
2013/12/02 职场文书
创业计划书——互联网商机
2014/01/12 职场文书
库房保管员岗位职责
2014/04/07 职场文书
二手房买卖协议书
2014/04/10 职场文书
宣传部部长竞选演讲稿
2014/04/26 职场文书
班级体育活动总结
2014/07/05 职场文书
律师授权委托书范本
2014/10/07 职场文书
校园广播稿范文
2015/08/19 职场文书
子女赡养老人协议书
2016/03/23 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL
如何用python反转图片,视频
2021/04/24 Python
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
JS实现简单的九宫格抽奖
2022/06/28 Javascript