从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 相关文章推荐
Jquery 扩展方法
May 06 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
javascript 数字格式化输出的实现代码
Dec 10 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
js动态添加onclick事件可传参数与不传参数
Jul 29 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
JavaScript验证知识整理
Mar 24 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
element vue validate验证名称重复 输入框与后台重复验证 特殊字符 字符长度 及注意事项小结【实例代码】
Nov 20 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 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技术开发技巧分享
2010/03/23 PHP
PHP 强制性文件下载功能的函数代码(任意文件格式)
2010/05/26 PHP
三个思路解决laravel上传文件报错:413 Request Entity Too Large问题
2017/11/13 PHP
Javascript 兼容firefox的一些问题
2009/05/21 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
JavaScript DOM学习第八章 表单错误提示
2010/02/19 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
2016/01/12 Javascript
3种不同的ContextMenu右键菜单实现代码
2016/11/03 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
深入理解Promise.all
2018/08/08 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
vue路由前进后退动画效果的实现代码
2018/12/10 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python进程通信之匿名管道实例讲解
2015/04/11 Python
Python单元测试框架unittest使用方法讲解
2015/04/13 Python
python进程管理工具supervisor的安装与使用教程
2017/09/05 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Django中Middleware中的函数详解
2019/07/18 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python几种常用功能实现代码实例
2019/12/25 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
CSS3 画基本图形,圆形、椭圆形、三角形等
2016/09/20 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
师德师风自查材料
2014/10/14 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
思品教学工作总结
2015/08/10 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电