理解javascript中bind的使用和模拟实现

// bind 函数的特点：返回一个函数，可以传入参数
function sayName(name, age) {
  this.name = name;
  this.age = age;
  console.log(this.name, this.age, this.gender);
}
var foo = { gender: "man" };
sayName.bind(foo)("bar", 11); // foo 11 man
 
// 可以把返回的绑定函数当作构造函数，用new操作符创建实例
var bindFun = sayName.bind(foo);
var obj = new bindFun("bar", 12); // bar 12 undefined
console.log(obj); // sayName {name: "bar", age: 12}

Function.prototype.bindSub = function(context) {
  var self = this;
  return function(){
    return self.apply(context)
  }
}; 

Function.prototype.bindSub = function(context) {
  var self = this;
  // 获取绑定时的参数
  var bindArgs = Array.prototype.slice.call(arguments, 1);
  return function() {
    // 获取调用时的参数 ：需要绑定和调用是的参数合并
    var invokeArgs = Array.prototype.slice.call(arguments);
    return self.apply(context, bindArgs.concat(invokeArgs));
  };
};

Function.prototype.bindSub = function(context) {
  var self = this;
  // 获取绑定时的参数
  var bindArgs = Array.prototype.slice.call(arguments, 1);
  var fBound = function() {
    var fbContext; //函数内的上下文
    var invokeArgs = Array.prototype.slice.call(arguments);
    // 当作为构造函数时，this指向实例，将绑定函数的this指向实例，可以让实例获取绑定函数的值
    if (this instanceof fBound) {
        fbContext = this; // 指向实例
    } else {
        // 当作为绑定函数调用时，this指向被绑定函数的上下文context
        fbContext = context;
    }
    return self.apply(fbContext, bindArgs.concat(invokeArgs));
  };
  // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
  fBound.prototype = this.prototype;
  return fBound;
};

Function.prototype.bindSub = function(context) {
  // 不是绑定函数则报类型错误
  if (typeof this !== "function") {
    throw new Error(
      "Function.prototype.bind - what is trying to be bound is not callable"
    );
  }
  var self = this;
  // 获取绑定时的参数
  var bindArgs = Array.prototype.slice.call(arguments, 1);
  var fNOP = function() {};
  var fBound = function() {
    var invokeArgs = Array.prototype.slice.call(arguments);
    // 当作为构造函数时，this指向实例，将绑定函数的this指向实例，可以让实例获取绑定函数的值
    // 当作为绑定函数调用时，this指向被绑定函数的上下文context
    return self.apply(
      this instanceof fNOP ? this : context,
      bindArgs.concat(invokeArgs)
    );
  };
  // 修改返回函数的 prototype 为绑定函数的 prototype，实例就可以继承绑定函数的原型中的值
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
  fBound.prototype.constructor = fBound;
  return fBound;
};
 
// 测试
function sayName(name, age) {
  this.name = name;
  this.age = age;
  console.log(this.name, this.age, this.gender);
}
var foo = { gender: "man" };
 
// 当作一般返回函数调用
sayName.bindSub(foo)("haha", 12); // haha 12 man
var bindFun = sayName.bindSub(foo);
var newFun = new bindFun("xixi", 15); // xixi 15 undefined
console.log(newFun); //fBound {name: "xixi", age: 15}
console.log(newFun instanceof sayName) // true