JS基础 - bind 用法及简单实现原理

bind 的用法

bind 和 call/apply 一样，都是用来改变上下文 this 指向的，不同的是，call/apply 是直接使用在函数上，而 bind 绑定 this 后返回一个函数（闭包），如下：

let obj = {
    init: 1,
    add: function(a, b) {
        return a + b + this.init;
    }
}
obj.add(1, 2); // 4
let plus = obj.add;
plus(3, 4); // NaN，因为 this.init 不存在，这里的 this 指向 window/global
plus.call(obj, 3, 4) // 8
plus.apply(obj, [3, 4]); // 8， apply 和 call 的区别就是第二个参数为数组
plus.bind(obj, 3, 4); // 返回一个函数，这里就是 bind 和 call/apply 的区别之一，bind 的时候不会立即执行
plus.bind(obj, 3, 4)(); // 8 

bind 的简单实现

// 将 bind 方法的参数提取出来拼接到返回的闭包函数中
Function.prototype.myBind = function () {
    const self = this;
    /** 参数转换为数组 第一项是this */
    const args = Array.prototype.slice.call(arguments);
    /** shift() 方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。 */
    const t = args.shift();
    return function () {
        /** 利用 apply 改变 this 指向 */
        return self.apply(t, args);
    }
}