JS系列-手写call、apply、bind函数

今天来看看面试常问到的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
}

其实最核心的就是$\color{red}{通过隐式绑定来改变this指向}$，更多的边界情况这边就不在处理了，如有需要可自行去补充。

感谢阅读，下个文章再见！