[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 可以理解就是一个能够借用他人方法的工具,充当“借”的功能。

相关内容

热门资讯

山海邂逅悦来玥美!青岛银丰玥美... 时光淬炼初心,山海见证成长。三百余日夜匠心耕耘,青岛银丰玥美酒店与崂山为伴,与黄海为邻,融青岛山海风...
摸鱼、钓虾、吃瓜、赏荷…初夏时... 这个周末,一场场充满野趣的“田园嘉年华”在沪郊金山多个农场上演,吸引众多市民带着孩子下乡来,赛跑、吃...
原创 戚... 5月28日,北京环球影城迎来了一对温暖的家庭画面:戚薇和李承铉携三岁半的儿子Seven现身游玩。现场...
滹沱河畔 遇见“诗和远方” 图为市民在滹沱河畔休闲娱乐。 初夏五月,惠风和畅。徜徉在石家庄滹沱河生态区(城区段),澄澈河水蜿蜒...
在迪士尼排队两小时,我才看清V... 文丨沈理 在网上看到一则新闻: 上海迪士尼,创极速光轮排队区。一个父亲牵着七八岁的儿子,已经在烈日...