模拟实现JS的bind方法 #

var obj = {};
obj;
typeof Function.prototype.bind; // function
typeof Function.prototype.bind();  // function
Function.prototype.bind.name;  // bind
Function.prototype.bind().name;  // bound 
console.dir(Function.prototype.bind()); // 可以自行在浏览器控制台打印看看
// f bound ()
//    length: 0
//    name: "bound "

var obj = {
  name: 'test',
};
function original(a, b){
  console.log(this.name);
  console.log([a, b]);
  return false;
}
var bound = original.bind(obj, 1);
var boundResult = bound(2); // 'test', [1, 2]
boundResult; // false
original.bind.name; // 'bind'
original.bind.length; // 1
original.bind().length; // 2 返回original函数的形参个数
bound.name; // 'bound original'
(function(){}).bind().name; // 'bound '
(function(){}).bind().length; // 0

var obj = {
  name: '轩辕Rowboat',
};
function original(a, b){
  console.log('this', this); // original {}
  console.log('typeof this', typeof this); // object
  this.name = b;
  console.log('name', this.name); // 2
  console.log('this', this);  // original {name: 2}
  console.log([a, b]); // 1, 2
}
var bound = original.bind(obj, 1);
var newBoundResult = new bound(2);
console.log(newBoundResult, 'newBoundResult'); // original {name: 2} this指向了new bound()生成的新对象。

// 第三版 实现new调用
Function.prototype.bindFn = function bind(thisArg){
  if(typeof this !== 'function'){
    throw new TypeError(this + ' must be a function');
  }
  // 存储调用bind的函数本身
  var self = this;
  // 去除thisArg的其他参数 转成数组
  var args = [].slice.call(arguments, 1);
  var bound = function(){
    // bind返回的函数 的参数转成数组
    var boundArgs = [].slice.call(arguments);
    var finalArgs = args.concat(boundArgs);
    // new 调用时，其实this instanceof bound判断也不是很准确。es6 new.target就是解决这一问题的。
    if(this instanceof bound){
      // 这里是实现上文描述的 new 的第 1, 2, 4 步
      // 1.创建一个全新的对象
      // 2.并且执行[[Prototype]]链接
      // 4.通过`new`创建的每个对象将最终被`[[Prototype]]`链接到这个函数的`prototype`对象上。
      // self可能是ES6的箭头函数，没有prototype，所以就没必要再指向做prototype操作。
      if(self.prototype){
        // ES5 提供的方案 Object.create()
        // bound.prototype = Object.create(self.prototype);
        // 但 既然是模拟ES5的bind，那浏览器也基本没有实现Object.create()
        // 所以采用 MDN ployfill方案 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create
        function Empty(){}
        Empty.prototype = self.prototype;
        bound.prototype = new Empty();
      }
      // 这里是实现上文描述的 new 的第 3 步
      // 3.生成的新对象会绑定到函数调用的`this`。
      var result = self.apply(this, finalArgs);
      // 这里是实现上文描述的 new 的第 5 步
      // 5.如果函数没有返回对象类型`Object`(包含`Functoin`, `Array`, `Date`, `RegExg`, `Error`)，
      // 那么`new`表达式中的函数调用会自动返回这个新的对象。
      var isObject = typeof result === 'object' && result !== null;
      var isFunction = typeof result === 'function';
      if(isObject || isFunction){
        return result;
      }
      return this;
    }
    else{
      // apply修改this指向，把两个函数的参数合并传给self函数，并执行self函数，返回执行结果
      return self.apply(thisArg, finalArgs);
    }
  };
  return bound;
}

function Student(name){
  if(this instanceof Student){
    this.name = name;
    console.log('name', name);
  }
  else{
    throw new Error('必须通过new关键字来调用Student。');
  }
}
var student = new Student('轩辕');
var notAStudent = Student.call(student, 'Rowboat'); // 不抛出错误，且执行了。
console.log(student, 'student', notAStudent, 'notAStudent');

function Student2(name){
  if(typeof new.target !== 'undefined'){
    this.name = name;
    console.log('name', name);
  }
  else{
    throw new Error('必须通过new关键字来调用Student2。');
  }
}
var student2 = new Student2('轩辕');
var notAStudent2 = Student2.call(student2, 'Rowboat');
console.log(student2, 'student2', notAStudent2, 'notAStudent2'); // 抛出错误

Object.defineProperties(bound, {
  'length': {
    value: self.length,
  },
  'name': {
    value: 'bound ' + self.name,
  }
});

var $Array = Array;
var ArrayPrototype = $Array.prototype;
var $Object = Object;
var array_push = ArrayPrototype.push;
var array_slice = ArrayPrototype.slice;
var array_join = ArrayPrototype.join;
var array_concat = ArrayPrototype.concat;
var $Function = Function;
var FunctionPrototype = $Function.prototype;
var apply = FunctionPrototype.apply;
var max = Math.max;
// 简版 源码更复杂些。
var isCallable = function isCallable(value){
    if(Object.prototype.toString.call(value) !== '[Object Function]'){
      return false;
    }
    return true;
};
var Empty = function Empty() {};
// 源码是 defineProperties
// 源码是bind笔者改成bindFn便于测试
FunctionPrototype.bindFn = function bind(that) {
  var target = this;
  if (!isCallable(target)) {
      throw new TypeError('Function.prototype.bind called on incompatible ' + target);
  }
  var args = array_slice.call(arguments, 1);
  var bound;
  var binder = function () {
    if (this instanceof bound) {
      var result = apply.call(
        target,
        this,
        array_concat.call(args, array_slice.call(arguments))
      );
      if ($Object(result) === result) {
        return result;
      }
      return this;
    } else {
      return apply.call(
        target,
        that,
        array_concat.call(args, array_slice.call(arguments))
      );
    }
  };
  var boundLength = max(0, target.length - args.length);
  var boundArgs = [];
  for (var i = 0; i < boundLength; i++) {
    array_push.call(boundArgs, '$' + i);
  }
  // 这里是Function构造方式生成形参length $1, $2, $3...
  bound = $Function('binder', 'return function (' + array_join.call(boundArgs, ',') + '){ return binder.apply(this, arguments); }')(binder);

  if (target.prototype) {
    Empty.prototype = target.prototype;
    bound.prototype = new Empty();
    Empty.prototype = null;
  }
  return bound;
};