JavaScript深入之call,apply,bind的模拟实现

[chenshuhong]

参考 JavaScript深入之call,apply的模拟实现 JavaScript深入之bind的模拟实现

Function.prototype.apply和Function.prototype.call 的作用是一样的，区别在于传入参数的不同； 第一个参数都是，指定函数体内this的指向，this 参数可以传 null，当为 null 的时候，视为指向 window 第二个参数开始不同，apply是传入带下标的集合，数组或者类数组，apply把它传给函数作为参数，call从第二个开始传入的参数是不固定的，都会传给函数作为参数。 call比apply的性能要好，平常可以多用call,尤其是es6 引入了 Spread operator (延展操作符) 后，即使参数是数组，可以使用 call

[chenshuhong]

Function.prototype.call2 = function (context) {
    var context = context || window;
    context.fn = this;

    var args = [];
    for(var i = 1, len = arguments.length; i < len; i++) {
        args.push('arguments[' + i + ']');
    }

    var result = eval('context.fn(' + args +')');

    delete context.fn
    return result;
}

[chenshuhong]

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;

    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }

    delete context.fn
    return result;
}

[chenshuhong]

• 返回一个函数
• 可以分两次传入参数

• 一个绑定函数也能使用new操作符创建对象：这种行为就像把原函数当成构造器。提供的 this 值被忽略，同时调用时的参数被提供给模拟函数。

  Function.prototype.bind2 = 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 args = Array.prototype.slice.call(arguments, 1);
  
  var fNOP = function () {};
  
  var fBound = function () {
      var bindArgs = Array.prototype.slice.call(arguments);
      return self.apply(this instanceof fNOP ? this : context, args.concat(bindArgs));
  }
  
  fNOP.prototype = this.prototype;
  fBound.prototype = new fNOP();
  return fBound;
  }