skip to content
月与羽

函数绑定

/ 4 min read

View more blogs with the tag javascript

在 JavaScript 中，函数绑定（Function binding）主要是指使用 Function.prototype.bind() 方法。

它的核心作用是创建一个新的函数，当这个新函数被调用时，它的 this 关键字会被永久地设置为一个指定的值，并且可以预先设置一些初始参数。

这解决了 JavaScript 中一个非常常见的问题：this 的指向在函数被调用时才确定，因此在某些情况下（如用作回调函数或事件处理器时），this 的指向会丢失，不再指向我们期望的对象。

为什么需要函数绑定？(The Problem)

来看一个典型的例子：

const person = {
  name: "张三",
  sayHello: function() {
    console.log(`你好, 我是 ${this.name}`);
  }
};


person.sayHello(); // 输出: "你好, 我是 张三" - 这里 this 指向 person 对象，工作正常

现在，如果我们将这个方法用作一个回调函数，比如在 setTimeout 中：

setTimeout(person.sayHello, 1000);
// 1秒后输出: "你好, 我是 undefined" (在浏览器非严格模式下可能是 window.name)

问题在于：当 setTimeout 执行 person.sayHello 时，它是在全局作用域下调用的。此时函数内部的 this 不再指向 person 对象，而是指向全局对象 (window) 或在严格模式下是 undefined，因此 this.name 无法正确获取值。

如何使用 bind() 解决？(The Solution)

bind() 方法可以让我们创建一个新的函数，并“锁定”它的 this 指向。

const person = {
  name: "张三",
  sayHello: function() {
    console.log(`你好, 我是 ${this.name}`);
  }
};


// 使用 bind() 创建一个新函数
// 第一个参数是我们要绑定的 this 的值
const boundSayHello = person.sayHello.bind(person);


// 现在，无论在哪里调用 boundSayHello，它的 this 都会是 person 对象
setTimeout(boundSayHello, 1000);
// 1秒后输出: "你好, 我是 张三" - 问题解决！


// 直接调用 boundSayHello 同样有效
boundSayHello(); // 输出: "你好, 我是 张三"

bind() 的主要特点总结

  1. 创建新函数：bind() 不会修改原始函数，而是返回一个全新的、绑定过的函数。
  2. 永久绑定 this：一旦使用 bind() 绑定了 this，那么这个新函数的 this 指向就不能再被 call() 或 apply() 等方法修改。
  3. 预设参数（柯里化 Currying）：bind() 除了可以绑定 this，还可以预先设置函数的前几个参数。

预设参数的例子：

function add(a, b) {
  return a + b;
}


// 绑定 this 为 null (因为 add 函数内部不依赖 this)
// 并将第一个参数 a 预设为 5
const addFive = add.bind(null, 5);


console.log(addFive(10)); // 输出: 15 (相当于调用 add(5, 10))
console.log(addFive(20)); // 输出: 25 (相当于调用 add(5, 20))

总而言之，函数绑定的核心目的就是为了控制函数内部 this 的指向，确保函数在不同的执行上下文中（尤其是在作为回调或事件处理函数时）都能保持我们期望的引用。