手撕call、aplly、bind原理实现

call、apply、bind

call、apply、bind都是修改函数this指向的方法。不同在于call和apply都是立即执行，而bind是返回一函数，等待后续调用。

而call和apply非常类似，call除了第一个参数接收一个this指向的对象外，后续参数是接收一个参数列表call(obj,arg1,arg2…) 这里可以采用函数内置的arguments接收后续参数列表也可以采用拓展运算符…args进行收集；而bind(obj,arr)函数是接收一个数组。

注：这里是采用了ES6的拓展运算符实现。（也可以采用eval()纯ES5实现().)

call(obj,arg1,arg2…)

// call、apply、bind都是用来修改当前函数的this指向的
// 手写Function.prototype.call
Function.prototype.newCall = function (obj, ...args) {
    if (obj === undefined || obj === null) {
        obj = window
    }
    obj.fn = this  //将函数设置为对象的属性，让obj对象设置一个方法，且此方法就是调用的方法
    // 这里要传入参数
    let res = obj.fn(...args)  //让其执行
    delete obj.p //当执行后就把此方法删去，这里利用delete关键字来删除对象上的属性
    return res
}
var egg = {
    name: "wh"
}
person.newCall(egg)  //在未修改this绑定是，this指向person，也就是谁调用，this就指向谁

function person() {
    console.log(this.name);  //wh
}

apply(obj,argsArr)

// apply其实和call类似，只是apply的第二个参数是一个数组
Function.prototype.newApply = function (obj, arr) {
    if (obj === undefined || obj === null) {
        obj = window
    }
    obj.fn = this
    let res
    // 是否传递arr参数
    if (arr) {
        res = obj.fn(arr)
    } else {
        res = obj.fn()
    }
    delete obj.fn
    return res
}
function person() {
    console.log(this.name);
}
let obj = {
    name: "wd"

}
person.newApply(obj, 2, 3)

bind(obj,arg1,arg2…)

Function.prototype.newBind = function (obj, ...args) {
    let that = this
    // 与call和apply不同，bind()绑定this的函数不会立即执行当前函数，而是返回一个函数等待以后调用
    return function () {
        // 其实返回的函数里面逻辑与call()绑定相同
        obj.fn = that
        let res = obj.fn(obj, ...args)
        delete obj.fn
        return res
    }
}
function person() {
    console.log(this.name);
}
let obj = {
    name: "wd"

}
let fn = person.newBind(obj, 2, 3)
fn()  //输出:wd