唯品秀前端博客
当前位置: 前端开发 > JavaScript > javascript中apply、call和bind的区别汇总实例详解

javascript中apply、call和bind的区别汇总实例详解

2018-05-17 分类:JavaScript 作者:管理员 阅读(590)

this在js中是至关重要的,相信很多人在这个上面都栽过跟头,众所周知apply、call和bind都是用来在函数执行过程中手动去改变this指向问题,那么具体怎么使用有啥区别呢?

三者相似点

  • 1、都是用来改变函数的this对象的指向的。
  • 2、第一个参数都是this要指向的对象。
  • 3、都可以利用后续参数传参。

this指向

我觉得首先有必要用实例来说个我们经常用的函数中可能忽略的概念,例如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var xm = {
  name : "小明",
  sex : "男",
  age : 22,
  say : function(school,grade) {
     alert(this.name + " , " + this.sex+ " ,今年" + this.age + " ,在" + school + "上" + grade);                                
  }
}
var xc = {
  name : "小翠",
  sex: "女",
  age : 18
}
xm.say() //小明 , 男 ,今年22 ,在undefined上undefined
xm.xc() //小翠 , 女 ,今年18 ,在undefined上undefined

分析,我们如何理解上面这段代码?可能有人听的最多的就是this就是当前谁调用指向谁,好像是那么回事,不讨论,其实我们通过融入apply、call或者bind去理解上面这段代码,例如:

1
2
xm.say.call(xm,'清华大学','大四') //小明 , 男 ,今年22 ,在清华大学上大四
xc.say.call(xc,'北京大学','大一') //小翠 , 女 ,今年18 ,在北京大学上大一

深入浅出

1
2
3
4
5
function add(){
  return 100
}
add();
//由此可以理解为平时常见函数调用的形式是这样的add() => window.add() => add.call(window)这样的;

三者差异

1
xm.say.call(xc,"实验小学","六年级");  //小翠在实验小学上六年级

1
xm.say.apply(xc,["实验小学","六年级"]); //小翠在实验小学上六年级

1
xm.say.bind(xc,"实验小学","六年级")(); //小翠在实验小学上六年级

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

1
xm.say.bind(xc)("实验小学","六年级"); //小翠在实验小学上六年级

小结

居上示例总结:call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。那么bind怎么传参呢?它可以像call那样传参,bind比较特殊,bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

「三年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

谢谢你请我吃鸡腿*^_^*

支付宝
微信
0

谢谢你请我吃鸡腿*^_^*

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

0 条评论关于"javascript中apply、call和bind的区别汇总实例详解"

博客简介

唯品秀博客: weipxiu.com,一个关注Web前端开发技术、关注用户体验、坚持更多原创实战教程的个人网站,愿景:成为宇宙中最具有代表性的前端博客,期待您的参与,主题源码 

精彩评论

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

站点统计

  • 文章总数: 259 篇
  • 草稿数目: 0 篇
  • 分类数目: 16 个
  • 独立页面: 6 个
  • 评论总数: 913 条
  • 链接总数: 17 个
  • 标签总数: 461 个
  • 注册用户: 8421 人
  • 访问总量: 9300253 次
  • 最近更新: 2020年8月6日
服务热线:
 173xxxx7240

 QQ在线交流

 旺旺在线