通过自己实现函数 call,apply,bind 来了解他们的原理

我们知道函数中的call，apply，bind都是可以修改函数的this指向。关于函数的this指向问题可以转到Javascript this 指向问题这篇文章。

在Javascript this 指向问题一篇中我们知道函数运行时候this是取决于调用这个函数的对象。如果一个函数定义在了全局，那么这个this就指向window。

来看一段代码

var name = "tal"
var sex = "boy"

var tal = {
  name: "踏浪",
  sex: "男"
}

function person() {
  console.log(this.name)
  console.log(this.sex)
}
person() // tal boy

上面的person是定义在全局中的一个函数，person()调用的时候相当于是window.person()，是由window调用的，所以，this.name和this.sex都需要在window对象中寻找，即全局变量中找。所以，最后的值会是tal与boy。

再来。我们来调用一下原生的call函数

var name = "tal"
var sex = "boy"

var tal = {
  name: "踏浪",
  sex: "男"
}

function person() {
  console.log(this.name)
  console.log(this.sex)
}
person.call(tal) // 踏浪 男

在调用了call函数以后，最后的值是踏浪男。得到的是对象tal中的两个属性值。此时函数中的this指向了对象tal。结合上面的例子，直接调用person函数的时候，相当于是window.person()的执行，所以那时this指向了window。那现在既然指向了tal，换言之，就是相当于tal.person()执行了。

call 的实现

所以我们可以这样实现mycall函数

Function.prototype.mycall = function (context) {
  context.fn = this
  context.fn()
  delete context.fn
}

mycall接收一个参数，即一个对象，最终的this指向这个对象。函数内部实现在这个传入的对象中绑定上我们需要执行的这个函数，即context.fn = this一行。最后调用context.fn()。因为我们这样操作修改了传入对象的属性（添加了一个fn属性），所以最后需要删除这个fn属性。这样，第一版的call的实现已经完成。

接下来，原生 call 函数是可以接收参数的

var tal = {
  name: "踏浪",
  sex: "男"
}

function person(age) {
  console.log(age)
  console.log(this.name)
  console.log(this.sex)
}
person.call(tal, 18) // 踏浪 男

那我们自己实现的mycall要想能够接收参数，怎么实现呢

Function.prototype.mycall = function (context) {
  var args = [];
  var len = arguments.length;
  for (var i = 1; i < len; i++) {
    args.push(arguments[i]);
  }
  context.fn = this
  eval('context.fn(' + args.join(",") + ')')
  delete context.fn
}

因为我们需要在 mycall 调用的时候传递参数，而且参数的个数不确定，所以需要使用 arguments 。同时因为第一个参数以及确定了是我们需要的一个对象，this指向这个对象。所以 arguments 需要从 1 开始。我们用一个数组把需要的东西存放起来。

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

如果是这样的话，我传递过去后数组 args = [18, "成都"] 里面的每一项要怎么传递到 context.fn() 里面并且执行呢？或许你会想到时候 join(",") 方法，OK，没有问题。

1 2	var res = args.join(","); context.fn(res);

这样么？不是。res的值是 18,成都 没问题，但是这就是一个字符串而已，我们要实现传递两个参数，所以，想到了把字符串与函数拼接。即有了 'context.fn(' + args.join() + ')'。这样最后就可以了。但是这只是一个字符串，怎么运行呢？这个时候就需要用到 ES3中的eval 直接传递这个参数进度即可。

上面的 join 方法其实就是把一个数组转换成了字符串，除了 join，你还能想到什么呢？对。可以使用字符转换来实现。

1
2
3

res = "" + args + ""
// or
res = args.toString()

因为每一个隔开的方式是 , 所以可以使用上面的两种，其他的就不行咯。

所以最终的 mycall

Function.prototype.mycall = function (context) {
  var args = [];
  var len = arguments.length;
  for (var i = 1; i < len; i++) {
    args.push(arguments[i]);
  }
  context.fn = this
  eval('context.fn(' + args.join(",") + ')')
  delete context.fn
}

apply的实现

有个实现call的过程，在来实现apply就容易多了。唯一不同的就是apply传递的参数是一个数组，而call是具体的每一项。只需要在参数上面做处理即可。

Function.prototype.myapply = function (context) {
  var args = [];
  var array = arguments[1];
  if ( typeof array !== "object" || !(array instanceof Array) ) {
    throw new Error("The 2'rd args must be Array.")
  }
  for (var i = 0; len = array.length, i < len; i++) {
    args.push('array[' + i + ']');
  }
  context.fn = this
  eval('context.fn(' + args.toString() + ')')
  delete context.fn
}

这里的 arguments[1] 是一个数组了。我们需要对它遍历，并且判断它是不是一个数组。其余的与 call 一样。

bind的实现

原生的bind有两种方式

var tal = {
  name: "踏浪",
  sex: "男"
}

function person(age) {
  console.log(age)
  console.log(this.name)
  console.log(this.sex)
}

person.bind(tal)(18)

// 或者
person.bind(tal, 18)()

所以。使用bind都需要调用两次，而第一次就是返回一个函数。原函数的参数可以在bind中调用，也可以在第二次运行时候调用。所以，根据调用bind时候传递的参数的个数确定最后是返回那种函数，有了下面的这段代码。

Function.prototype.mybind = function (context) {
  var args = [];
  var len = arguments.length;
  for (var i = 1; i < len; i++) {
    args.push(arguments[i]);
  }
  context.fn = this
  if (len === 1) {
    // 如果 mybind 的参数的个数只有一个，那么剩余参数在调用的时候传入
    return function(){
      var sub_args = [];
      for (var i = 0; len = arguments.length, i < len; i++) {
        sub_args.push('arguments[' + i + ']');
      }
      eval('context.fn(' + sub_args.toString() + ')')
      delete context.fn
    }
  } else {
    return function(){
      // 这里不能使用 arguments，这里面的 arguments 是这个 return 函数的而不是最开始的。
      var str = 'context.fn('
      for (var i = 0; len = args.length, i < len; i++) {
        str += "args["+i+"],"
      }
      var newStr = str.replace(/,$/, ")")
      eval(newStr)
      delete context.fn
    }
  }
}

总结

通过自己实现 call， apply， bind 这三种方法，能够更深刻的理解到这三个函数的原理，同时涉及到的只是点也多：this指向，arguments类数组，每一个对象都要的toSting方法（另一个是valueOf），eval方法的使用（不是滥用，webpack中就使用了这个方法），函数对象可以使用 delete 删除（使用var 定义的无法使用delete删除）。或许你已经明白了，但是代码种东西，还是自己动动手，印象更深刻。

补充于2020年5月12日

因为我们已经实现了 bind，所以之前的 call 和 apply 就可以直接使用 bind 来实现了。

new call

Function.prototype.myCall = function(context) {
  var otherArgs = [].slice.call(arguments, 1);
  eval('this.mybind(context)(' + otherArgs.join(',') + ')')
}

new apply

Function.prototype.myApply = function(context) {
  var arguments_1_length = arguments[1].length;
  var type = typeof arguments[1];
  if (!arguments[1] instanceof Array) {
    throw new TypeError('The 2rd argument must be an Array. But get ' + type);
  }
  var args = [];
  for (var i = 0; i < arguments_1_length; i++) {
    args.push(arguments[1][i]);
  }
  eval('this.myBind(context)(' + args.join(',') + ')')
}