全面解析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系列(26):设计模式之构造函数模式详解
Mar 03 Javascript
D3.js中data(), enter() 和 exit()的问题详解
Aug 17 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
如何利用AngularJS打造一款简单Web应用
Dec 05 Javascript
Bootstrap学习笔记之环境配置(1)
Dec 07 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
在ES5与ES6环境下处理函数默认参数的实现方法
May 13 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
详解webpack 热更新优化
Sep 13 Javascript
使用vue2.0创建的项目的步骤方法
Sep 25 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
May 20 Javascript
WebPack工具运行原理及入门教程
Dec 02 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
PHP使用mysql与mysqli连接Mysql数据库用法示例
2016/07/07 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
List Information About the Binary Files Used by an Application
2007/06/18 Javascript
JQuery SELECT单选模拟jQuery.select.js
2009/11/12 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
Three.js源码阅读笔记(物体是如何组织的)
2012/12/27 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js控制表单不能输入空格的小例子
2013/11/20 Javascript
Jquery调用iframe父页面中的元素及方法
2016/08/23 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
2016/09/04 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
jQuery实现拖拽可编辑模块功能代码
2017/01/12 Javascript
React学习笔记之事件处理(二)
2017/07/02 Javascript
layui select获取自定义属性方法
2018/08/15 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
vue 更改连接后台的api示例
2019/11/11 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
2020/05/12 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
[03:34]2014DOTA2西雅图国际邀请赛 淘汰赛7月15日TOPPLAY
2014/07/15 DOTA
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
详解tensorflow载入数据的三种方式
2018/04/24 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Ticketmaster德国票务网站:购买音乐会和体育等门票
2016/11/14 全球购物
欧舒丹比利时官网:L’OCCITANE比利时
2017/04/25 全球购物
Gap加拿大官网:Gap Canada
2017/08/24 全球购物
WoolOvers澳洲官方网站:英国针织服装公司
2018/05/13 全球购物
医药类个人求职的自我评价
2014/02/12 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
电话客服专员岗位职责
2014/06/28 职场文书
公司活动总结范文
2014/07/01 职场文书
干部对照检查材料范文
2014/08/26 职场文书
新生儿未入户证明
2015/06/23 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书