原生javascript实现call、apply和bind的方法

var context = {id: 12};
function fun (name, age) {
  console.log(this.id, name, age)
}

bind

bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。

　原生 bind

1. var a = fun.bind(context, 'bind');
2. a(1); // 12, 'bind', 1  ：作为普通函数
3. new a('1'); // undefined, 'bind', '1'  ：作为构造函数

以上例子可以看出

　　　　 bind作为普通函数使用时，改变的this的指向，指向context对象；fun函数执行了；传入参数不确定，可以在第一步bind传值，也可以在第二步执行函数fun传值。

　　　　 bind最为构造函数使用时，不同点是this指向实例的对象。

bind的实现代码

Function.prototype.mybind = function (context) {
  if (this && this.constructor !== Function) // 抛错
    throw new Error("Function.prototype.mybind - what is trying to be bound is not callable");
  // this =>绑定函数 fun
  var self = this;
  // 获取mybind函数从第二个参数到最后一个参数
  var arg = Array.prototype.slice.call(arguments, 1);
  function fbound() {
    // 普通函数： this => window  构造函数： this => 实例对象
    // 获取mybind返回函数传入的函数
    var args = Array.prototype.slice.call(arguments);
    self.apply(this instanceof self ? this : context, arg.concat(args));
  }
  var FNOP = function () {};
  FNOP.prototype = this.prototype;
  fbound.prototype = FNOP.prototype;
  return fbound;
}

var a = fun.mybind(context, 'mybind');
a('12') // a: 普通函数
var b = new a(12) // a: 构造函数  b: 实例对象

　　兼容写法

Function.prototype.bind = Function.prototype.bind || function () {
    ……
};

call

　　call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法。

原生 call

1. fun.call(context, 'call', 2) // 12, call, 2

　　

call 的实现代码

Function.prototype.mycall = function (context) {
  if (this && this.constructor !== Function)
    throw new Error(this.name + ".mycall is not a function");
  context = context || window;
  context.fn = this;
  var arg = [];
  for (var i =1; i< arguments.length; i++) {
    arg.push('arguments[' + i + ']');
  }
  eval('context.fn(' + arg + ')');
  delete context.fn;
}

fun.mycall(context, 'mycall', 3);  // 12, 'mycall', 3

　　

apply

apply与call的实现原理差不多，只是apply第二个参数是数组；

1. fun.apply(context, ['call', '4']) // 12, call, '4'

　　

Function.prototype.myapply = function (context, arr) {
  if (this && this.constructor !== Function)
    throw new Error(this.name + ".myapply is not a function");
  context = context || window;
  context.fn = this;
  var arrs = [];
  if (arr && arr.constructor === Array) { // 判断第二个参数是数组类型
    for (var i =0; i <arr.length; i++) {
      arrs.push('arr[' + i + ']');
    }
    eval('context.fn(' + arrs + ')');
  } else if (!arr) { // 第二个参数不传
    delete context.fn();
  } else { // 第二个参数不是数组类型
    throw new Error ("CreateListFromArrayLike called on non-object");
  }
  delete context.fn;
}

fun.myapply(context, ['myapply', 4]);