全面解析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 相关文章推荐
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery.form插件的使用及跨域异步上传文件
Apr 27 Javascript
JavaScript中this的四个绑定规则总结
Sep 26 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
JavaScript该如何学习 怎样轻松学习JavaScript
Jun 12 Javascript
老生常谈JavaScript面向对象基础与this指向问题
Oct 16 Javascript
jQuery实现checkbox即点即改批量删除及中间遇到的坑
Nov 11 jQuery
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
Mar 10 Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
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
咖啡的种类和口感
2021/03/03 新手入门
详解PHP安装mysql.so扩展的方法
2016/12/31 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
14个有用的Jquery技巧分享
2015/01/08 Javascript
NodeJs基本语法和类型
2015/02/13 NodeJs
jquery mobile 移动web(5)
2015/12/20 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
2016/08/01 Javascript
Node 自动化部署的方法
2017/10/17 Javascript
AngularJS使用ui-route实现多层嵌套路由的示例
2018/01/10 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
小程序图片长按识别功能的实现方法
2018/08/30 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python中的True,False条件判断实例分析
2015/01/12 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
Python计算库numpy进行方差/标准方差/样本标准方差/协方差的计算
2018/12/28 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python 实现多线程下载视频的代码
2019/11/15 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
使用python创建生成动态链接库dll的方法
2020/05/09 Python
Collection和Collections的区别
2016/05/02 面试题
动物学专业毕业生求职信
2013/10/11 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
教室标语大全
2014/06/21 职场文书
节能标语大全
2014/06/21 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
庐山导游词
2015/02/03 职场文书