今天来看看面试常问到的call、apply、bind到底是怎么实现的
call
Function.prototype._cnCall = function(thisArg, ...args) {
// 1.获取需要被执行的函数
const fn = this
// 2.对thisArg转成对象类型(防止它传入的是非对象类型)
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
// 3.调用需要被执行的函数
thisArg.fn = fn
const result = thisArg.fn(...args)
delete thisArg.fn
// 4.将最终的结果返回出去
return result
}
apply
Function.prototype._cnApply = function(thisArg, argArray) {
// 1.获取需要被执行的函数
const fn = this
// 2.对thisArg转成对象类型(防止它传入的是非对象类型)
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
// 3.调用需要被执行的函数
thisArg.fn = fn
// 3.1 判断参数是否为空
argArray = argArray || []
const result = thisArg.fn(...argArray)
delete thisArg.fn
// 4.将最终的结果返回出去
return result
}
bind
Function.prototype._cnBind = function(thisArg, ...argArray) {
// 1.获取需要被执行的函数
const fn = this
// 2.对thisArg转成对象类型(防止它传入的是非对象类型)
thisArg = (thisArg !== null && thisArg !== undefined) ? Object(thisArg) : window
// 3. 创建代理返回函数
function proxyFn(...args) {
// 4.调用需要被执行的函数
thisArg.fn = fn
// 4.1 合并参数
const finalArgs = [...argArray, ...args]
const result = thisArg.fn(...finalArgs)
delete thisArg.fn
return result
}
// 5. 返回函数
return proxyFn
}
其实最核心的就是 通 过 隐 式 绑 定 来 改 变 t h i s 指 向 \color{red}{通过隐式绑定来改变this指向} 通过隐式绑定来改变this指向,更多的边界情况这边就不在处理了,如有需要可自行去补充。
感谢阅读,下个文章再见!