也谈如何实现bind、apply、call
我们知道，JavaScript的bind、apply、call是三个非常重要的方法。bind可以返回固定this、固定参数的函数包装；apply和call可以修改成员函数this的指向。实现bind、apply、call是前端面试的高频问题，也能让我们更好地理解和掌握JavaScript的函数的相关知识。本文将介绍如何自行实现bind、apply和call。
前情提要
本文先给出如下类定义和实例定义。
// Person类，每个人有姓名，有打印姓名的方法
function Person(_name) {
this.name = _name
this.sayMyName = function (postfix) {
console.log(this.name + postfix)
}
}
// 两个实例
let alex = new Person(‘Alex‘)
let bob = new Person(‘Bob‘)
实现bind
不妨先回顾一下bind的使用方法：
let sayBobName = alex.sayMyName.bind(bob, ‘?‘)
sayBobName() // Bob?
可见：
- bind返回一个函数副本（包装过的函数），固定this和实参。this可不指向调用者
- bind是函数原型上的一个方法
了解了这两点，就不难写出实现：
function MyBind(context, ...args) {
let that = this // this是调用者，也就是被包装的函数（alex.sayMyName）
return function () { // 返回一个包装过的函数
return that.call(context, ...args) // 其返回值是以context为this的执行结果
}
}
Function.prototype.bind = MyBind
实现call
在实现bind的过程中我们用到了call。那么如何实现一个call？不妨也回顾一下call的使用方法：
alex.sayMyName.call(bob, ‘!‘) // Bob!
可见：
- bind修改当前函数的this，可使其不指向调用者
- 参数以...rest形式传入
了解了这两点，也不难写出实现：
function MyCall(context, ...args) {
context._fn = this // this是调用者，也就是当前函数。此步给context绑上该函数
// 有个细节问题是，可能需要备份原先的context._fn，避免意外覆盖
let ret = context._fn(..args) // 模仿context自己调用_fn
delete context._fn // 移除绑的函数
return ret
}
Function.prototype.call = MyCall
实现apply
apply和call的作用相同，使用方法基本类似，唯一的不同是：
- 参数以数组形式传入
故可写出实现：
function MyApply(context, args) {
return MyCall(context, ...args)
}
Function.prototype.apply = MyApply
稳定的三角
从上面我们看出，apply和call可以实现bind，那么怎么用bind实现apply和call，从而打造这一铁三角关系呢？
bind
/ \ 两两都可互相实现的三角形！
call -- apply
简单！立即执行这个函数副本就可以了！
function AnotherMyCall(context, ...args) {
return (this.bind(context, ...args))()
}