手写实现apply,call,bind

apply和call的区别就是传的参数形式不一样。call是一个一个的传，apply可以将参数以数组的形式传进去。而bind是传入第二个和后面的参数，且绑定this，返回一个转化后的函数。

考虑两点

• 第一个参数为undefined或null的时候，那么会转变为window
• 改变了this执行，让新的对象可以执行该函数。

call 实现

Function.prototype.myCall = function(context) {
 // 判断是否是undefined和null
 if (typeof context === 'undefined' || context === null) {
 context = window
 }
 context.fn = this
 let args = [...arguments].slice(1)
 let result = context.fn(...args)
 delete context.fn
 return result
}

apply的实现

Function.prototype.myApply = function(context) {
 if (typeof context === 'undefined' || context === null) {
 context = window
 }
 context.fn = this
 let args = arguments[1] 

 let result
 if (args) {
 result = context.fn(...args)
 } else {
 result = context.fn()
 }
 delete context.fn
 return result
}

bind实现

这里需要注意下，因为bind转换后的函数可以作为构造函数使用，此时this应该指向构造出的实例，而bind函数绑定的第一个参数。

Function.prototype.myBind = function(context) {
 if (typeof this !== 'function') {
 throw new TypeError('Error')
 }
 let _this = this
 let args = [...arguments].slice(1)
 return function F() {
 // 判断是否被当做构造函数使用
 if (this instanceof F) {
 return _this.apply(this, args.concat([...arguments]))
 }
 return _this.apply(context, args.concat([...arguments]))
 }
}

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

https://yuchengkai.cn/docs/zh/frontend/#call-apply-bind-区别

都看到这里，转发一下呗，关注并私信“前端资源”有小惊喜哦