利用call或apply实现bind方法

550 10-12

1、apply方法和call、bind方法的不同之处是它们的传参形式，前者是通过数组的方式去传参，而后者则是通过参数列表的方式传参。
2、那么bind方法和call、apply方法的不同之处是，bind 是创建一个新的函数，我们必须要手动去调用，而后者不会。
3、总之它们的共同特点就是改变this的指向，下面呢。就给大家看看我使用call以及apply方法去实现自己的bind方法。

<script>
// 利用call或者apply实现bind方法
// 在函数原型上面定义myBind方法
Function.prototype.myBind = function () {
    // 判断调用它的是否为函数，不是的话就抛出错误
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    // 保存this的指向obj2
    const _this = this;
    const arg = [].shift.call(arguments); //将删除的obj1对象返回给arg接收
    const args = [].slice.call(arguments); //["动物"]

    return function () {
        // 通过apply方法参数传的是数组
        // _this.apply(arg,[].slice.call(args,[].slice.call(arguments)))
        // 通过call方法传的是参数列表
        _this.call(arg, ...args, ...[].slice.call(arguments))
    }
}
let obj1 = {
    name: "猫",
    color: "red",
    food: "鱼"
}
let obj2 = {
    name: "狗子",
    color: "yellow",
    food: "骨头",
    run(animal) {
        console.log(`${this.name}喜欢吃${this.food}它是${animal}`);
    }
}
// obj2.run('动物');//此时this指向的是obj2
// 使用新的变量接收myBInd返回的新的函数
const newF = obj2.run.myBind(obj1, "动物");//通过myBind方法改变this指向，让其指向obj1
newF();
</script>

以上就是利用call或apply实现bind方法。

标签： Vue.js