一文带你认识apply()、call()和bind()方法

apply() 方法

apply() 方法是 JavaScript 中最早出现的一种方法，它是 Function 类型原型对象上的一个方法。apply() 方法接受两个参数，第一个参数是要设置的上下文对象（改变this 关键字的值），第二个参数是一个数组，它包含了要传递给函数的参数。apply() 方法会在设置了上下文对象后立即执行函数，并且传递数组中的参数。如果第二个参数不是数组，那么它会被强制转换成一个数组。
以下是一个使用 apply() 方法的例子:
|

function greeting(greet) {
  console.log(`${greet}, ${this.name}`)
}

const person = { name: 'Alice' }

greeting.apply(person, ['Hello']) // output: Hello, Alice

在这个例子中，我们定义了一个名为 greeting 的函数，并且将 person 对象作为上下文对象传递给了 apply() 方法。在apply方法中，我们传递了一个数组 ['Hello']，该数组包含了一个参数，greeting() 函数在 person 对象的上下文中被执行，输出结果为 Hello, Alice。

值得注意的是，当我们调用函数的 apply() 方法时，它并不会立即执行该函数，而是先创建一个新的执行环境，然后将函数放在这个执行环境中准备执行。在这个执行环境中，this 值会被设置为传递给 apply() 方法的第一个参数（即要设置的上下文对象）。之后，apply() 方法会使用传递给它的第二个参数（如果有的话）作为函数的参数列表，在这个新的执行环境中调用该函数。

所以，apply() 方法可以用来改变函数执行时的上下文对象，以及传递参数给函数。但需要注意的是，如果函数中有 this 关键字，那么在函数中使用 this 时，它将会指向新的上下文对象（即 apply() 方法传入的第一个参数），而不是原始的上下文对象。如果我们想在函数中使用原始的上下文对象，可以在函数内部保存原始的上下文对象，例如：

const person = {
  name: 'Alice',
  greet: function () {
    console.log(`Hello, my name is ${this.name}!`)
  }
}

const context = {
  name: 'Bob'
}

const originalContext = person

person.greet.apply(context)

console.log(originalContext.name) // output: Alice

在这个例子中，我们先将 person 对象赋值给 originalContext 变量，然后使用 apply() 方法将 person 对象的上下文改为 context 对象。在函数执行时，this 值指向了 context 对象，但是在函数执行完毕后，我们仍然可以访问原始的上下文对象 person。

call()方法

call() 方法与 apply() 方法类似，也是 Function 类型原型对象上的一个方法。不同之处在于，call() 方法接受的参数不是数组，而是一个个单独的参数。第一个参数是要设置的上下文对象，之后的参数是作为函数的参数列表传递的。

以下是一个使用 call() 方法的例子：

const person = {
  name: 'Alice',
  greet: function (greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`)
  }
}

const context = {
  name: 'Bob'
}

person.greet.call(context, 'Hi', '!') // output: Hi, my name is Bob!

bind()方法

bind() 方法也可以用来改变函数执行时的上下文对象，但是它不会立即执行函数，而是返回一个新的函数，该函数的上下文对象已经被绑定为 bind() 方法传递的第一个参数。之后，我们可以像调用普通函数一样调用这个新函数，传递所需的参数。例如：

const person = {
  name: 'Alice',
  greet: function () {
    console.log(`Hello, my name is ${this.name}!`)
  }
}

const context = {
  name: 'Bob'
}

const greetBob = person.greet.bind(context)

greetBob() // output: Hello, my name is Bob!

总结

apply() 和 call() 方法可以立即调用函数并且设置函数的执行上下文对象，也就是 this 关键字的值。它们的区别在于传递参数的方式不同：

call() 方法的参数是一个个地传递进去，而 apply() 方法的参数是以数组的形式传递进去。因此，如果你已经有一个参数数组，可以使用 apply() 方法来方便地传递参数；而如果你知道每个参数的值，可以使用 call() 方法来逐个传递参数（call，打电话，要一个键一个键按~）。

另外，bind() 方法可以创建一个新的函数，并将函数的执行上下文对象设置为指定的值。这个新的函数可以稍后再调用，这样就可以在不同的上下文中执行同一个函数。可以将其保存到一个变量中，方便随时使用。

这三个方法并不会改变原始函数的执行上下文对象，它们只是在调用函数时指定了一个新的执行上下文对象。同时，一旦使用 bind() 方法将函数绑定到某个上下文对象上，就无法再使用 call() 或 apply() 方法更改上下文对象。