JavaScript 函数call，apply、 bind的区别

call，apply、bind的区别：

bind绑定this的指向之后，不会立即调用当前函数，而是将函数返回。
而call，apply绑定this指向后会立即调用。
如果我们在不知道什么时候会调用函数的时候，需要改变this的指向，那么只能使用bind。

比如：在定时器中，我们想改变this的指向，但是又不能立即执行，需要等待2秒，这个时候只能使用bind来绑定this。

setInterval(function(){
    // ...
}.bind(this), 2000);

---

一、Apply

方法重用

通过 apply() 方法，您能够编写用于不同对象的方法。

---

JavaScript apply() 方法

apply() 方法与 call() 方法非常相似：
在本例中，person 的 fullName 方法被应用到 person1：

实例

var person = {
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

---

二、call

call函数

在Function.prototype上挂载一个newCall函数表示是对call的模拟，具体逻辑看注释

Function.prototype.newCall = function(context){
  // 1 判断context是否为object，如果是object就代表可能是Object 或者 null，如果不是就赋值一个空对象

  if (typeof context === 'object') {
    context = context || window //  context 如果是null就会赋值为window
  } else {
    context = Object.create(null)
  }

  // 2 在context下挂载一个函数，函数所在的key随机生成，防止context上已有同名key
  var fn = +new Date() + '' + Math.random() // 用时间戳+随机数拼接成一个随机字符串作为一个新的key
  context[fn] = this
  // 3 newCall如果还有其他的参数传入也要考虑用到
  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push('arguments['+ i + ']')
  }
  // 4 重点在这里，执行context[fn]这个函数，只能用eval，因为newCall的入参参数不确定
  var result = eval('context[fn]('+args+')') // args是一个数组，但是当它和字符串相加时自动调用内部的toString方法转成字符串

  delete context[fn] // 用完后从context上删除这个函数
  // 5 返回结果
  return result
}

原理：

在要挂载的对象context上临时添加一个方法 f
用eval执行这个临时添加的方法f，并拿到执行后的结果result
删除这个额外的方法f，并返回执行结果result

---

带参数的 apply() 方法

apply() 方法接受数组中的参数：

实例

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);

与 call() 方法对比：

实例

var person = {
  fullName: function(city, country) {
    return this.firstName + " " + this.lastName + "," + city + "," + country;
  }
}
var person1 = {
  firstName:"John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");

在数组上模拟 max 方法

您可以使用 Math.max() 方法找到（数字列表中的）最大数字：

实例

Math.max(1,2,3);  // 会返回 3

由于 JavaScript 数组没有 max() 方法，因此您可以应用 Math.max() 方法。

实例

Math.max.apply(null, [1,2,3]); // 也会返回 3

三、bind方法

bind 是复制的意思，也可以改变调用其的函数或方法的 this 指向，参数可以在复制的时候传进去，也可以在复制之后调用的时候传进去。

使用语法：

1、函数名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个函数
2、方法名.bind(对象, 参数1, 参数2, ...); // 返回值是复制的这个方法
1、函数调用 bind

function f1(x, y) {
    console.log(x + y + this);
}

// 1.参数在复制的时候传入

var ff = f1.bind(null,10,20); // 这只是复制的一份函数，不是调用，返回值才是
ff();

// 2.参数在调用的时候传入

var ff = f1.bind(null); // 这只是复制的一份函数，不是调用，返回值才是
ff(10,20);
2、方法调用 bind

function Person(age) {
    this.age = age;
}

Person.prototype.eat = function () {
    console.log(this.age); // this 指向实例对象
};

function Student(age) {
    this.age = age;
}

var per = new Person(18);
var stu = new Student(20);

var ff = per.eat.bind(stu);
ff(); // 20

作者： LH
时间:2019年6月2日