[Js进阶]bind、call、apply三个方法
admin
2024-03-20 19:44:49

Js中bind、call、apply三个方法

自己几年前写的东西了,翻出来复习一下…

bind()

Function.*prototype.*bind()的使用与实现

call()

Function.*prototype.*call()的使用与实现

apply

Function.*prototype.*apply()的使用和实现

使用场景

为什么需要 call, apply, bind 来改变函数中的 this 指向呢?因为有些实例中是没有一些方法的,需要通过 call, apply, bind 来改变 this 指向当前实例,这样函数执行时就会作用到当前实例,从而达到没有该方法的实例借用该方法的效果。举个生活中的例子:我(实例A)有一个铁哥们小王(实例B),他家里有一台 PS5(工具/方法),我呢非常想玩一款 PS5 游戏,但是自己又没钱去买 PS5,于是,我就去找小王“借”(call/apply/bind)来 PS5 来玩一段时间(这段时间 PS5 归属人就是我,不再是小王),玩完后再还给他。简单地说,就是 call, apply, bind 相当于“借用”的功能。

示例:将类数组对象或者其它可迭代对象转为数组,通过使用数组的方法 slice() 实现,但对象里是没有这个方法的,所以需要通过 call/apply/bind 借用 slice()。

var obj = {0:'a',1:'b',2:'c',length:3}
var arr = Array.prototype.slice.call(obj, 0)
// Array.prototype.slice.call(obj, 0) 相当于 obj.slice(0),但 obj 属于对象类型,对象是没有该方法的,所以直接这样使用会报错,这时就得使用 call 等来借用数组的方法。
console.log(arr) // ['a','b','c']

call/apply/bind 区别

call 和 apply 都会执行函数,而 bind 不会执行,会返回改变 this 指向后的函数; call 和 bind 传参方式都一样,第一个参数都是所要指向的对象,第二个及后续参数都为要传入给函数的参数,而 apply 的传参区别在于第二个参数是数组,数组里存放的就是要传进去的参数。

总结:call/apply/bind 都是用来改变函数中的 this 指向,只不过 call 传参是个序列, apply 是个数组,call/apply都会执行函数,而 bind 不会执行,会返回改变 this 指向后的函数。call/apply/bind 可以理解就是一个能够借用他人方法的工具,充当“借”的功能。

相关内容

热门资讯

山水皆有情!丽江两山一江的千年... 去过丽江、走过虎跳峡的人,大概率都听过哈巴雪山和金沙江的传说。很多人站在峡谷之下,望着奔腾不息的金沙...
活力中国调研行丨“殷”你而来 ... 9月12日,游客在殷墟博物馆“甲骨文展厅”内参观。位于河南省安阳市的殷墟博物馆新馆是首个全景式展现商...
浦江之夜赴美好相逢,第37届上... 9月12日晚,黄浦江畔灯火璀璨,第37届上海旅游节大巡游在外滩中山东一路上演。不少观众早早便来到外滩...
美丽中国丨秋韵紫鹊界 梯田入画... 这是9月11日拍摄的紫鹊界梯田(无人机照片)。 金秋九月,湖南省娄底市新化县紫鹊界梯田稻谷渐次成熟。...
中国之巅奏响《共同的节日》,千... 千吨阻尼器,“迎世赛、游上海旅游节”。9月13日,由上海市文化和旅游局指导推出上海旅游·会客│巅峰之...