在看手写之前,浏览这篇文章更能加深理解: js中call,apply,bind如何使用,使用场景及区别
前言:函数中的 this 指向,一般是指向其调用者,未指明调用者,者指向 window,构造函数中 this 指向当前实例,事件回调函数指向其绑定的 DOM 元素……而 call,apply 的原理则可以利用谁调用函数就指向谁的思想,将需要改变 this 指向的函数赋值给指向的对象,通过对象调用该方法就能达到改变this指向的目的,两者只是传参不同;bind 手写则需要借助 call 或者 apply 结合闭包来实现。
- call
Function.prototype.myCall = function(obj, ...rest) {
obj.fn = this
const res = obj.fn(...rest)
delete obj.fn
return res
}
- apply
Function.prototype.myApply = function(obj, arr) {
if(!(arr instanceof Array)) {
throw new Error('第二个参数必须为数组类型!')
}
obj.fn = this
const res = obj.fn(...arr)
delete obj.fn
return res
}
- bind
Function.prototype.myBind = function(obj, ...arr) {
const [_that, object, params] = [this, obj, arr]
return function() {
return _that.call(object, ...params)
}
}