在前端开发中，我们经常使用 .bind() 方法来改变函数执行时的上下文。然而，在对该方法进行链式调用时，可能会得到一些出乎意料的结果。
什么是 .bind() 方法？
.bind() 是 JavaScript 中的内置方法，它允许我们永久地绑定一个函数的上下文。换句话说，我们可以利用 .bind() 来创建一个新函数，使其在执行时的上下文与原函数不同。
例如，以下代码将创建一个新函数 printName，并将其上下文绑定为 person：
-- -------------------- ---- ------- ----- ------ - - ----- ------- -- -------- ----------- - ----------------------- - ----- -------------- - ----------------------- ----------------- -- -- -------
在这个例子中，我们使用 .bind() 方法创建了一个新的函数 boundPrintName，它的上下文被永久绑定为 person 对象。因此，当我们调用 boundPrintName() 时，它将在 person 对象上下文中执行，并输出 Alice。
链式调用 .bind() 方法
在某些情况下，我们可能想要链式调用多个 .bind() 方法来绑定函数的上下文。例如，考虑以下代码：
-- -------------------- ---- ------- ----- ------ - - ----- ------- -- -------- ----------- - ----------------------- - ----- -------------- - ----------------------------- ----- ----- --- ----------------- -- -- -------
在这个例子中，我们首先使用 .bind() 方法绑定 printName 函数的上下文为 person 对象。接下来，我们又使用了一个 .bind({ name: "Bob" }) 方法来继续链式调用。然而，最终输出结果却是 Alice，而不是我们期望的 Bob。
为什么会出现意料之外的结果？
要理解为什么会出现意料之外的结果，我们需要考虑 .bind() 方法的工作原理。当我们对一个函数使用 .bind() 方法时，它会创建一个新的函数，并将原函数的上下文永久地绑定到新函数中。这个新函数也可以使用 .bind() 方法来绑定上下文，但是这并不会影响原始的上下文绑定。
换句话说，在上面的例子中，第二个 .bind() 方法只会影响新函数的上下文，而不会影响原始函数的上下文。因此，尽管我们调用 boundPrintName() 时使用了第二个 .bind() 方法绑定的新上下文，但是实际上它仍然使用的是原始的上下文，即 person 对象。
如何正确地使用 .bind() 方法链式调用？
要正确地使用 .bind() 方法进行链式调用，我们需要注意一件事情：每次链式调用都会创建一个新的函数。因此，我们必须确保在最后一次链式调用之前，所有的上下文绑定都已经完成。
例如，以下代码将正确地将 printName 函数的上下文绑定到 person 对象和 otherPerson 对象：
-- -------------------- ---- ------- ----- ------ - - ----- ------- -- ----- ----------- - - ----- ----- -- -------- ----------- - ----------------------- - ----- -------------- - ----------------------------------------- ----------------- -- -- -----
在这个例子中，我们首先使用 .bind() 方法将 printName 函数的上下文绑定为 person 对象。接下来，我们又使用了一个 .bind(otherPerson) 方法来继续链式调用，最终创建了一个新函数 boundPrintName。由于
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26611