[Js进阶]bind、call、apply三个方法

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