javascript —— 如何理解Function.prototype.bind.apply

最近在学习javascript的时候，发现了一个有趣东西，那就是Function.prototype.call.apply(handleFn,obj)。咋一看，还有点懵逼，这用法有啥用啊？别急，我们来一步一步分析它。

首先我们先来看一个最基本的例子:

var obj = {
}
function fn(payload) {
    this.name = payload || "默认值"
}
fn.call(obj, "张三");
console.log(obj);//{name:"张三"}
复制代码

上述代码输出为{name:"张三"},这个结果不奇怪，就是call的简单用法，至于apply、bind这里不做演示，不知道的读者，请自行查阅。

接下来分析Function.prototype.call.apply(handleFn,obj):

参数分析：handleFn（函数） obj（想要绑定的对象）

• 你可以把Function.prototype.call看出一个整体，将参数按照apply的形式传进去

  Function.prototype.call.apply(handleFn,[obj,1,2,3])
  //相当于
  handleFn.apply(obj,[1,2,3])
  复制代码

• 如果不明白我们继续看另一种

  Function.prototype.call.call(handleFn,obj,1,2,3)
  //相当于
  handleFn.call(obj,1,2,3)
  复制代码

写一段代码，看一下输出，验证我们上面说的结果

• 示例代码：

  var obj = {
      name: "杨志强",
  }
  function fn(arg1, arg2) {
      console.log(this.name);
      console.log(arg1);
      console.log(arg2);
  
  }
  复制代码

• 输出验证：

  Function.prototype.call.apply(fn, [obj, "参数一", "参数二"]);//杨志强 参数一 参数二
  // 等价于
  Function.prototype.call.call(fn,obj,"参数一"，"参数二");//杨志强 参数一 参数二
  复制代码

  从上面结果我们可以看出，Function.prototype.XXX.YYY,这个XXX是call或者apply都可以，但是YYY是决定传递参数形式的。

• 实际场景：计算每个学生的成绩

  var stu1 = {
      chinese: 58,
      math: 68,
      english: 90
  }
  var stu2 = {
      chinese: 80,
      math: 38,
      english: 90
  }
  
  
  var utils = {
      getSum() {
          return this.chinese + this.math + this.english
  
      }
  }
  const calc = Function.prototype.call.bind(utils.getSum);
  const res = calc(stu1);
  const res2 = calc(stu2);
  console.log(res);
  console.log(res2);
  复制代码