javascript中call,apply,bind的用法对比分析


Posted in Javascript onFebruary 12, 2015

关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点。下边我就来好好总结一下它们三者各自的用法,及常见的应用场景。

首先看call这个函数,可以理解成"借用“,"请求"。想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了,总之你的手机就是用不成。可是你非打这个电话不可,于是你可以去借一下朋友的手机,或者借用一下邻居的手机,或者公用电话,这样呢,你就可以在自己没有手机可用的情况下,完成打电话这个事情,而至于你是用谁的电话打的,就不重要了,反正和用你自己的手机打的电话是一样的效果。call这个函数的初衷也和这个类似,下面我用代码来模拟一下它的应用情景:

var frog = {
    name : 'frog',
    say : function(){
      alert(this.name);
    }
  }
  var rabbit = {
    name : 'rabbit'
  }
  frog.say.call(rubbit) // rabbit

rubbit这个对象是个哑吧,但是他想要说出自己的名字,光凭它自己的能力,是不可能实现的,好在呢,它有一个叫frog的好基友,它可以说话。于是呢,rubbit就请求frog替它实现这个心愿。frog.say.call()的第一个参数,一定是要填写发出请求的人,律师喜欢称为委托人。这里是rubbit请求frog替它say名字,所以填写rubbit。这样一来,在say的时候,就会查找rubbit的name,而不是frog的name了。如果这里填写frog会是什么样子呢?这就好比是自己请求自己做某事,喂自己代盐也是可以的。可以试一下:

var frog = {
    name : 'frog',
    say : function(){
      alert(this.name);
    }
  }
  var rabbit = {
    name : 'rabbit'
  }
  frog.say.call(frog) // frog

自己喂自己袋盐,肯定是说自己的名字啦,这完全没有什么意外的。下面我们来看看call的经典用法:

//把参数转化成真正的数组对象
function frog(){
  var arr = [].slice.call(arguments);
  console.log(arguments.slice,arr.slice)
    // undefined function slice() { [native code] }
}
  frog(1,2,3,4)

能过这么一call,我们就可以把arguments对象当成数组对象来使用了。关于call的用法很多,翻开jquery的源码,很容易就能找到很多运用的地方。在此不一一列举了,还是回到我们前面的情景,借电话这种事太简单了,打完电话,肯定还想捎点什么东西回去,毕竟这么多年漂泊在外,没有好好孝敬下老人,买点当地的特产回去,肯定是极好的。可是外边的生活压力是如此之大,每天除了上班还要加班,如果请假的话,不但工资要扣,还要花费不少的路费,这些钱加起来,估计都够老人在家里一年的用度了。想想不划算,于是又想到call这个函数,请它帮忙,顺道带回去是非常明智的选择,而且它不收费,不限量,不限重,有多少,带多少。我再次用代码来演示一下:

var frog = {
    name : 'frog',
    send : function(money,food,milk,suagate){
      alert(money+food+milk+suagate);
    }
  }
  var rabbit = {
    name : 'rabbit'
  }
  frog.send.call(rubbit,'money','food','milk','suagate')

如果你有钱任性,甚至可以把iphone6 plus什么的也寄几个回去。.^_^.

说到这里call就差不多结束了,我也不知道上面的情景剧,是不是让你明白了call是怎么回事,如果只是勾起了你的思乡之情,那我表示抱歉。

call还有一个同父异母的兄弟,叫apply,如果弄明白了call的用法,那么apply其实也是一回事,唯一的区别呢,就是apply不喜欢传东西的时候,一个东西打一个包,显得很麻烦不说,还不环保。于是他就提供一个装东西的大箱子,你把你要传的东西全放在它提供的箱子里就好了。这个大箱子,就是一个数组。上面的例子,用apply来做的话,就是这样子的:

var frog = {
    name : 'frog',
    send : function(money,food,milk,suagate){
      alert(money+food+milk+suagate);
    }
  }
  var rabbit = {
    name : 'rabbit'
  }







//注意参数的区别
  frog.send.apply(rubbit,['money','food','milk','suagate'])

以上就是apply,call的前世今生了。可是万万没想到,apply和call的爸爸,前些年搞房地产发了财,在外边还有一个叫bind 的私生子。虽然比call和apply这两个哥哥晚出道几年,但是能力也不容小视。只不过,他的身份,在某些地方,是不承认的。比如IE6。下面我还是用代码来演示下他的本领:

var name = 'rubbit';
  var frog = {
    name : 'frog',
    say : function(){
      setTimeout(function(money,milk){
        alert(this.name+money+milk)
      }.bind(this,'money','milk'),1000)
    }
  }
  frog.say();

通过对比发现,bind可以直接连在function(){}后面用。相当于把call 和 apply 都省了,直接在函数后面指定委托人和要传递的参数。从传参的风格上来说,更像call一些。

关于bind ,我们再来看一段经典的用法:

var obj = {
  name : 'frog'
}
document.addEventListener('click',function(){
  alert(this.name); // frog
}.bind(obj),false);

总结一下,apply,call,bind,这三兄弟的相同点是:

 1. 第一个参数都是邦定作用域,即是在谁的地盘上做事。

 2. 都可以传递参数

不同点是:

  apply,call 兼容性更好,bind某些低版本的浏览器不支持。

  apply 传递的参数必须是用数组进行包装的,而 call 和 bind 则是将要传递的参数一一列出。

大家是否对call,apply,bind三个函数的用法有了更深入的认识了呢,希望本文能对大家有所帮助。

Javascript 相关文章推荐
Auntion-TableSort国人写的一个javascript表格排序的东西
Nov 12 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
分享10个优化代码的CSS和JavaScript工具
May 11 Javascript
AngularJS  $modal弹出框实例代码
Aug 24 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
JS闭包用法实例分析
Mar 27 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
vue.js简单配置axios的方法详解
Dec 13 Javascript
vue axios请求拦截实例代码
Mar 29 Javascript
微信小程序上线发布流程图文详解
May 06 Javascript
vue使用自定义指令实现拖拽
Jan 29 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
javascript手工制作悬浮菜单
Feb 12 #Javascript
jquery+javascript编写国籍控件
Feb 12 #Javascript
JS实现的生成随机数的4个函数分享
Feb 11 #Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 #Javascript
Javascript核心读书有感之语句
Feb 11 #Javascript
JavaScript数据结构和算法之二叉树详解
Feb 11 #Javascript
JavaScript中的函数模式详解
Feb 11 #Javascript
You might like
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP正则删除HTML代码中宽高样式的方法
2017/06/12 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
JS TextArea字符串长度限制代码集合
2012/10/31 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
js实现点击向下展开的下拉菜单效果代码
2015/09/01 Javascript
JavaScript中的定时器之Item23的合理使用
2015/10/30 Javascript
RequireJS使用注意细节
2016/05/15 Javascript
Nodejs全局安装和本地安装的不同之处
2016/07/04 NodeJs
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
微信小程序微信支付接入开发实例详解
2017/04/12 Javascript
jquery中有哪些api jQuery主要API
2017/11/20 jQuery
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
再谈Python中的字符串与字符编码(推荐)
2016/12/14 Python
Python实现简易Web爬虫详解
2018/01/03 Python
python实现扫描ip地址的小程序
2019/04/16 Python
Django框架实现的分页demo示例
2019/05/25 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
pandas中read_csv的缺失值处理方式
2019/12/19 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
TensorFlow keras卷积神经网络 添加L2正则化方式
2020/05/22 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
如何填写个人简历自我评价
2013/12/10 职场文书
班级文化标语
2014/06/23 职场文书
公安局负责人查摆问题及整改方案
2014/09/27 职场文书
手机被没收的检讨书
2014/10/04 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
2015年大学生工作总结
2015/04/21 职场文书
成事在人观后感
2015/06/16 职场文书