全面解析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学习笔记7 原型链的原理
Jan 11 Javascript
javascript+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
ExtJS 下拉多选框lovcombo
May 19 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jQuery实现统计复选框选中数量
Nov 24 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
Javascript实现字数统计
Jul 03 Javascript
javascript实现随机读取数组的方法
Aug 03 Javascript
使用CDN和AJAX加速WordPress中jQuery的加载
Dec 05 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 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中var_dump,var_export,print_r三个函数的区别
2013/06/21 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP缓冲区用法总结
2016/02/14 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
PHP rsa加密解密算法原理解析
2020/12/09 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
jquery ajax提交表单数据的两种实现方法
2010/04/29 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
JavaScript数据结构之二叉树的计数算法示例
2017/04/13 Javascript
vue.js的安装方法
2017/05/12 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
2017/08/21 Javascript
vue下跨域设置的相关介绍
2017/08/26 Javascript
Mac中安装nvm的教程分享
2017/12/11 Javascript
mint-ui 时间插件使用及获取选择值的方法
2018/02/09 Javascript
实例详解ztree在vue项目中使用并且带有搜索功能
2018/08/24 Javascript
nodejs更新package.json中的dependencies依赖到最新版本的方法
2018/10/10 NodeJs
实例分析Array.from(arr)与[...arr]到底有何不同
2019/04/09 Javascript
layui use 定义js外部引用函数的方法
2019/09/26 Javascript
[03:36]DOTA2完美大师赛coL战队趣味视频——我演你猜
2017/11/23 DOTA
[05:08]DOTA2-DPC中国联赛3月6日Recap集锦
2021/03/11 DOTA
python计算书页码的统计数字问题实例
2014/09/26 Python
python实现员工管理系统
2018/01/11 Python
Python闭包思想与用法浅析
2018/12/27 Python
django的csrf实现过程详解
2019/07/26 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
简单html5代码获取地理位置
2014/03/31 HTML / CSS
志愿者服务感言
2014/02/27 职场文书
领导干部廉政承诺书
2014/03/27 职场文书
2014年档案管理工作总结
2014/11/17 职场文书
歼十出击观后感
2015/06/11 职场文书
python 进阶学习之python装饰器小结
2021/09/04 Python