全面解析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 相关文章推荐
Jquery下判断Id是否存在的代码
Jan 06 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
Jan 08 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
Vue.js常用指令之循环使用v-for指令教程
Jun 27 Javascript
微信小程序使用navigateTo数据传递的实例
Sep 26 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
Vue中的异步组件函数实现代码
Jul 20 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
Apr 24 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
PHP的面试题集
2006/11/19 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP网站备份程序代码分享
2011/06/10 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
jquery.AutoComplete.js中文修正版(支持firefox)
2010/04/09 Javascript
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
13个PHP函数超实用
2015/10/21 Javascript
vue.js开发环境搭建教程
2017/05/04 Javascript
JS实现的小火箭发射动画效果示例
2018/12/08 Javascript
vue elementUI使用tabs与导航栏联动
2019/06/21 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
layui 解决form表单点击无反应的问题
2019/10/25 Javascript
JavaScript工具库MyTools详解
2020/01/01 Javascript
vue随机验证码组件的封装实现
2020/02/19 Javascript
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python使用multiprocessing实现一个最简单的分布式作业调度系统
2016/03/14 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
用TensorFlow实现戴明回归算法的示例
2018/05/02 Python
Python操作Sql Server 2008数据库的方法详解
2018/05/17 Python
python实现简单加密解密机制
2019/03/19 Python
详解Python数据可视化编程 - 词云生成并保存(jieba+WordCloud)
2019/03/26 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
多视角3D可旋转的HTML5 Logo动画
2016/03/02 HTML / CSS
HomeAway的巴西品牌:Alugue Temporada
2018/04/10 全球购物
北美个性化礼品商店:Things Remembered
2018/06/12 全球购物
企划专员岗位职责
2013/12/09 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书