bind用法及简单实现原理

前言

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

var obj = {
        num: 1,
        add: function(a, b){
              return a + b + this.num;
        }
}
obj.add(1,2)  // 4
var test = obj.add
test(1,2) // NaN, 此时this指定全局window

test.call(obj, 1, 2) // 4
test.apply(obj, 1, 2) // 4 
test.bind(obj, 1, 2)  // 此时返回一个函数，不会立即执行
test.bind(obj, 1, 2)  // 4

bind的实现

// 1.传递一个参数context
Function.prototype.bind = function(context) {
        var _this = this;
        return function() {
            return _this.apply(context, arguments)
        }
}

// 2. 修改传递多个参数
Function.prototype.bind = function(context) {
        var _this = this;
        var args = Array.prototype.slice.call(arguments, 1)

        return function() {
            return that.apply(context, args.concat(Array.prototype.slice.call(arguments)))
        }
}

// 3.作为构造函数
Function.prototype.bind = function(context) {
    var that = this;
    var args = Array.prototype.slice.call(arguments, 1);

    var bound = function() {
       if(this instanceof bound) { // 如果是作为构造函数，那么第一个参数 context 就不需要了
            return that.apply(this, args.concat(Array.prototype.slice.call(arguments)));
       } else {
            return that.apply(context, args.concat(Array.prototype.slice.call(arguments))) 
       }
    }

    // 维护原型关系
    if(this.prototype) {
        bound.prototype = this.prototype;
    }

    return bound;
}