Apply, Call, Bind 三者对比

1. Apply

• 作用: apply() 方法调用一个具有给定this值的函数，以及以一个数组（或类数组对象）的形式提供的参数。

• 用法: func.apply(thisArg, [argsArray])

const numbers = [5, 6, 2, 3, 7];

const max = Math.max.apply(null, numbers);

console.log(max);
// expected output: 7

const min = Math.min.apply(null, numbers);

console.log(min);
// expected output: 2

2. Call

• 作用: call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

• 用法: function.call(thisArg, arg1, arg2, ...)

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

console.log(new Food('cheese', 5).name);
// expected output: "cheese"

3. Bind

• bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

function foo(x, y) {
    this.b = 100
      this.x = x
      this.y = y
    return this.a + x + y
}

function log(value) {
    console.log(value)
}

const a = {a: 100}

log(foo()) // NaN

const fn = foo.bind(a, 1, 2)

log(fn(10,10)) // 103

const test = new fn()
// 如果构造函数返回的不是对象, 那么默认返回当前作用域的 this
log(test) // {"b":100,"x":1,"y":2}

• thisArg:

  • 调用绑定函数时作为 this 参数传递给目标函数的值。 如果使用new运算符构造绑定函数，则忽略该值。当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。

    实际情况下, 非严格模式, thisArg 为空或 null 或 undefiend 时. 浏览器下指向 widnow. 严格模式下空或 undefiend 是 undefiend. null 是 null

• arg1, arg2:

  • 当目标函数被调用时，被预置入绑定函数的参数列表中的参数。

• 返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。