全面解析JavaScript中apply和call以及bind(推荐)


Posted in Javascript onJune 15, 2016

函数调用方法

在谈论JavaScript中apply、call和bind这三兄弟之前,我想先说下,函数的调用方式有哪些:

•作为函数

•作为方法

•作为构造函数

•通过它们的call()和apply()方法间接调用

前面的三种调用方法,我们都知道且不在这篇文章的讨论范围内,就不说了。

下面我们来说说这第四种调用方法

通过call()和apply()间接调用

其实,我们可以将这两个函数看做是某个对象的方法,通过调用方法的方式来间接调用函数:

function f(){}
f.call(o);
f.apply(o);

call()和apply()的第一个参数是要调用函数的母对象,它是调用上下文,在函数体内通过this来获得对它的引用。

那么他们是一样的,还是有区别的,还有bind方法呢?君莫急,下面详细的解析他们三者的区别和联系。

call()

call()方法给调用它的方法指定特定的this指针(习惯用语,不要和我纠结它的正确性)和参数。例如有这么一个函数:

var fn = function (arg1, arg2) {
console.log(this, arg1, arg2); 
}

我来调用它:

fn.call(null, 'Skylor', 'min'); //1
fn.call(undefined, 'Skylor', 'min'); //2
var fx = function() {}
fn.call(fx, 'Skylor', 'min'); //3

这三个call方法的返回值是什么呢?不废话,请看:

1. null "Skylor" "min"
2. undefined "Skylor" "min"
3. fx "Skylor" "min"

真的是这样吗,机智的你,去浏览器控制台小试了一下,我去,你这坑货,不是这样的:

chrome
1. Window "Skylor" "min"
2. Window "Skylor" "min"
3. fx "Skylor" "min"

好吧,你机智。但这已经很好的说明了call方法了。(window很高级,微软偷笑中...)

我们注意到call方法,第一个参数是指定this指针,后面每个参数指定需要的参数,注意我用的是“每个”,这意味着你需要几个参数就要想调用函数那样,一个个参数写进去。

apply()

apply()是call()的兄弟啊,其他地方长的都一样,都是男的,就一个地方不一样。先看例子:

fn.apply(null, ['Skylor', 'min']); //1
fn.apply(fx, ['Skylor', 'min']); //2

哥们,你是不是写错了,多了个中括号啊。不,不,不,这就是他和call长的不一样的地方,它的第二个参数是个需要的参数Array。

bind()

bind()嘛,他们三个不是仨兄弟嘛,,这个我懂,blabla....不不不,它是和apply、call结拜的兄弟,不是亲兄弟。

当然,bind方法也是允许你指定this指针,但是它不是调用函数,而是返回一个(或者说是拷贝)调用它的函数的函数,并给这个函数指定特定的this指针和参数。惯例,例子说明一切:

var fnbound = fn.bind(null, 'Skylor', 'min');

这时,fnbound是一个函数,一个this指向null,参数为['Skylor', 'min']的另一个函数。调用之:

fnbound();

结果:

null, 'Skylor', 'min'

不要和我纠结Window的事了。。。。。

bind和其他两个兄弟不一样的地方,是,它不是调用函数,而是返回一个新的函数,同样,它也是指定this指针和参数的,指定参数的方式和call一样,是一个一个来的。

最后来一个例子呗:

var shoppingCart = (function(){
var _calculatePrice = function () {
return this.price * this.amount;
};
return {
calculatePrice : _calculatePrice
}
})();
var goods = {
name : ‘hammer',
price: 199,
amount : 2
};
shoppingCart.calculatePrice.call(goods);

到此结束。!

以上所述是小编给大家介绍的JavaScript中apply和call以及bind(推荐)的全部内容,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript 中的 && 和 || 使用小结
Apr 25 Javascript
jquery中ajax学习笔记4
Oct 16 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
怎么判断js脚本加载完成
Feb 28 Javascript
原生js和jQuery写的网页选项卡特效对比
Apr 27 Javascript
jQuery的promise与deferred对象在异步回调中的作用
May 03 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
jQuery动态添加与删除tr行实例代码
Oct 18 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
Aug 08 jQuery
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
JavaScript仿flash遮罩动画效果
Jun 15 #Javascript
jquery中的常见问题及快速解决方法小结
Jun 14 #Javascript
使用递归遍历对象获得value值的实现方法
Jun 14 #Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 #Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 #Javascript
JS递归遍历对象获得Value值方法技巧
Jun 14 #Javascript
全面解析JavaScript中的valueOf与toString方法(推荐)
Jun 14 #Javascript
You might like
40年前的这部特摄片恐龙特级克塞号80后的共同回忆
2020/03/08 日漫
PHP实现获取FLV文件的时间
2015/02/10 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
调试php程序的简单步骤
2019/10/04 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
WordPress 插件——CoolCode使用方法与下载
2007/07/02 Javascript
javascript delete 使用示例代码
2010/03/29 Javascript
Iframe自适应高度绝对好使的代码 兼容IE,遨游,火狐
2011/01/27 Javascript
jquery js 获取时间差、时间格式具体代码
2013/06/05 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
jQuery选择器之子元素选择器详解
2017/09/18 jQuery
vue实现点击展开点击收起效果
2018/04/27 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
微信小程序自定义键盘 内部虚拟支付
2018/12/20 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
python实现傅里叶级数展开的实现
2018/07/21 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
python 实现将多条曲线画在一幅图上的方法
2019/07/07 Python
Django框架 信号调度原理解析
2019/09/04 Python
使用Python和百度语音识别生成视频字幕的实现
2020/04/09 Python
python tkinter实现连连看游戏
2020/11/16 Python
英国时尚运动品牌的合集:The Sports Edit
2017/12/20 全球购物
学校志愿者活动总结
2014/06/27 职场文书
党员剖析材料范文
2014/09/30 职场文书
单位作风建设自查报告
2014/10/23 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
朋友聚会开场白
2015/06/01 职场文书
党员证明信
2015/06/19 职场文书
导游词之苏州阳澄湖
2019/11/15 职场文书
python Tkinter的简单入门教程
2021/04/11 Python
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android