谢谢你请我吃鸡腿*^_^*
支付宝扫一扫打赏
微信扫一扫打赏
this在js中是至关重要的，相信很多人在这个上面都栽过跟头，众所周知apply、call和bind都是用来在函数执行过程中手动去改变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返回的仍然是一个函数，所以我们还可以在调用的时候再进行传参。
上一篇：JS获取网站地址栏URL中的参数值并转换成json对象
下一篇：chrome jsonView-在线格式化json数据
支付宝扫一扫打赏
微信扫一扫打赏
电话支持
173xxxx7240在线交流
微信添加
共 0 条评论关于"javascript中apply、call和bind的区别汇总实例详解"
最新评论