全面解析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 22 Javascript
50款非常棒的 jQuery 插件分享
Mar 29 Javascript
js查错流程归纳
May 04 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
jQuery实现简单的tab标签页效果
Sep 12 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
微信小程序缓存过期时间的使用详情
May 12 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
js实现简单的贪吃蛇游戏
Apr 23 Javascript
解决vue一个页面中复用同一个echarts组件的问题
Jul 19 Javascript
JavaScript实现与web通信的方法详解
Aug 07 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 命令行参数详解及应用
2011/05/18 PHP
php生成html文件方法总结
2014/12/01 PHP
thinkPHP学习笔记之安装配置篇
2015/03/05 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
2011/03/05 Javascript
浅析XMLHttpRequest的缓存问题
2013/12/13 Javascript
JS+JSP checkBox 全选具体实现
2014/01/02 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
jQuery的事件委托实例分析
2015/07/15 Javascript
EasyUI中在表单提交之前进行验证
2016/07/19 Javascript
BootStrap与validator 使用笔记(JAVA SpringMVC实现)
2016/09/21 Javascript
Bootstrap CSS布局之图像
2016/12/17 Javascript
setTimeout函数的神奇使用
2017/02/26 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
2017/06/12 Javascript
JS实现li标签的删除
2019/04/12 Javascript
vue 移动端注入骨架屏的配置方法
2019/06/25 Javascript
vue 里面的 $forceUpdate() 强制实例重新渲染操作
2020/09/21 Javascript
跟老齐学Python之集合(set)
2014/09/24 Python
使用Python制作获取网站目录的图形化程序
2015/05/04 Python
python实现机械分词之逆向最大匹配算法代码示例
2017/12/13 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
flask中过滤器的使用详解
2018/08/01 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Python替换NumPy数组中大于某个值的所有元素实例
2020/06/08 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
中介业务员岗位职责
2014/04/09 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
奉献演讲稿范文
2014/05/21 职场文书
海洋科学专业求职信
2014/08/10 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
2014年行政后勤工作总结
2014/12/06 职场文书
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python