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