JavaScript中.bind()的使用场景及call、apply、bind的区别

一、.bind() 绑定this并延迟调用的场景示例 #

1. DOM事件回调 #

当你需要把对象的方法作为DOM事件的回调时，直接传递方法会导致this指向触发事件的DOM元素，用bind()提前绑定对象的this，就能在事件触发（未来某个时间）时保证this指向正确的对象：

const user = {
  name: 'Alice',
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

// 绑定user作为this，点击按钮时才执行greet
document.getElementById('greetBtn').addEventListener('click', user.greet.bind(user));

2. 定时器/延迟执行任务 #

在定时器回调中，默认this指向全局对象（浏览器中是window），用bind()绑定当前对象的this，就能在延迟执行时访问对象的属性：

const counter = {
  count: 0,
  start() {
    // 绑定this到counter，1秒后执行回调
    setTimeout(function() {
      this.count++;
      console.log(`Count: ${this.count}`);
    }.bind(this), 1000);
  }
};

counter.start(); // 1秒后输出 "Count: 1"

3. 数组遍历回调 #

当把对象的方法作为数组遍历（如forEach）的回调时，bind()能确保回调中的this始终指向该对象：

const cart = {
  items: ['apple', 'banana'],
  logItem(item) {
    console.log(`Cart item: ${item}, owner: ${this.owner}`);
  },
  owner: 'Bob'
};

// 绑定this到cart，遍历每个item时执行logItem
cart.items.forEach(cart.logItem.bind(cart));
// 输出：
// Cart item: apple, owner: Bob
// Cart item: banana, owner: Bob

二、call、apply、bind 适用场景区分 #

1. call & apply：立即执行函数，指定this #

这两个方法的核心是立即调用函数，同时强制指定函数内部的this指向，区别仅在于参数传递方式：

• call：逐个传递参数
• apply：以数组形式传递参数

常见场景：

• 借用其他对象的方法（比如处理类数组）：

const arrayLike = { 0: 'a', 1: 'b', length: 2 };
// 立即调用Array的slice方法，this指向arrayLike
const realArray = Array.prototype.slice.call(arrayLike);
console.log(realArray); // ['a', 'b']

• 快速调用函数并传递参数：

function calculateTotal(price, tax) {
  return price * (1 + tax);
}
console.log(calculateTotal.call(null, 100, 0.1)); // 110（立即执行）
console.log(calculateTotal.apply(null, [100, 0.1])); // 110（立即执行）

2. bind：绑定this/预设参数，延迟执行 #

bind()不会立即执行函数，而是返回一个绑定了指定this和预设参数的新函数，这个新函数可以在未来任意时间调用。

常见场景：

• 提前绑定回调函数的this（如前面的事件、定时器示例）
• 函数柯里化（预设部分参数，简化后续调用）：

function multiply(a, b) {
  return a * b;
}
// 预设第一个参数为2，返回新函数double
const double = multiply.bind(null, 2);
console.log(double(3)); // 6（调用double时才执行）

内容的提问来源于stack exchange，提问作者Teza Kosanam