在前端开发中，我们经常会听到“绑定”的术语。简单地说，“绑定”就是将一个函数与一个对象或者一些参数关联起来，以便在后续的调用中可以访问这些数据。
例如，假设我们有一个对象 person，它具有一个名为 name 的属性和一个函数 sayHello：
----- ------ - -
----- --------
---------- -
------------------- -- ---- -- ----------------
-
--现在，如果我们直接调用 person.sayHello()，函数中的 this 将自动绑定到 person 对象上，并输出正确的结果。但是，如果我们将该函数作为回调函数传递给另一个函数或方法时，情况可能会变得更加复杂。
使用 Function.prototype.bind 进行绑定
这时候，我们可以使用 Function.prototype.bind 方法来明确指定函数的上下文，或者说绑定函数的 this 值。例如，如果我们将 sayHello 函数作为回调传递给 setTimeout：
--------------------------- ------
执行后将输出 Hello, my name is undefined!，因为此时 this 指向的是全局对象，而不是 person 对象。为了解决这个问题，我们可以使用 bind 方法：
----- ------------- - ----------------------------- ------------------------- ------
这里，我们使用 bind 将 person 对象作为参数传递给 sayHello 函数，生成一个新的函数 boundSayHello，并将其绑定到 person 上。现在，当我们调用 setTimeout(boundSayHello, 1000) 时，输出结果将是 Hello, my name is Alice!。
使用箭头函数进行绑定
在ES6之后，还有一种更简单的绑定方式，那就是使用箭头函数。箭头函数会自动继承外层作用域的 this 值，并且不能通过 bind、apply 和 call 来改变它。因此，如果我们将 sayHello 改写成箭头函数：
----- ------ - -
----- --------
--------- -- -- -
------------------- -- ---- -- ----------------
-
--那么无论在哪个上下文中调用该函数，都会输出 Hello, my name is undefined!，因为箭头函数的 this 始终指向的是定义时的上下文，而不是运行时的上下文。因此，对于需要访问对象属性或方法的函数来说，推荐使用普通的函数加上 bind 方法进行绑定。
总结
绑定是一种重要的编程技巧，可以帮助我们在各种情况下明确指定函数的上下文，并避免因为 this 指向错误而导致的 bug。在实际开发中，我们可以使用 Function.prototype.bind 或者箭头函数来进行绑定，以便更好地访问对象属性和方法。
示例代码：
----- ------ - -
----- --------
---------- -
------------------- -- ---- -- ----------------
-
--
--------------------------- ------ -- -- ------- -- ---- -- -----------
----- ------------- - -----------------------------
------------------------- ------ -- -- ------- -- ---- -- -------
----- ------------- - -- -- -
------------------- -- ---- -- ----------------
--
---------------- -- -- ------- -- ---- -- -----------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/24697