为何需要JavaScript中的call()、apply()和bind()方法？

直接调用方法时，函数内部的this是自动绑定的——比如你调用obj.method()，this就指向obj。但实际开发中，我们经常需要手动控制this的指向，这就是这三个方法存在的核心意义。下面用几个真实场景给你讲明白：

1. 借用其他对象的方法，避免重复代码 #

假设你有一个购物车对象，自带计算总价的方法，另一个购物车对象没这个方法，但也想算总价——总不能把代码复制一遍吧？这时候就可以用call/apply借方法：

// 有计算逻辑的购物车
const fruitCart = {
  products: [15, 25, 30],
  getTotal() {
    return this.products.reduce((sum, price) => sum + price, 0);
  }
};

// 没有计算逻辑的购物车
const techCart = {
  products: [99, 199, 299]
};

// 直接调用fruitCart.getTotal()，算的是水果车的总价
console.log(fruitCart.getTotal()); // 70

// 用call把this改成techCart，借方法算数码车的总价
console.log(fruitCart.getTotal.call(techCart)); // 597

不用重复写getTotal逻辑，直接“借”过来用，这就是代码复用的关键场景。

2. 修复回调函数里的this跑偏问题 #

JS里的回调函数（比如定时器、事件监听）经常会出现this指向不符合预期的情况：

const person = {
  name: '李四',
  sayHi() {
    console.log(`嗨，我是${this.name}`);
  }
};

// 直接调用没问题
person.sayHi(); // 嗨，我是李四

// 放到定时器里直接调用，this会变成全局对象（浏览器里是window）
setTimeout(person.sayHi, 1000); // 嗨，我是undefined

// 用bind把this固定成person，不管在哪调用都不会变
setTimeout(person.sayHi.bind(person), 1000); // 嗨，我是李四

因为定时器执行函数时，是在全局上下文调用的，默认this指向全局对象。bind能提前把this绑定好，返回一个新函数，解决这个“跑偏”问题。

3. 灵活处理参数传递 #

apply和call的唯一区别是传参方式：call逐个传参数，apply用数组传参数。这个特性在处理一些特殊API时特别有用，比如Math.max()——它只能接收单个参数，不能直接传数组：

const scores = [85, 92, 78, 90];
// 直接传数组给Math.max会返回NaN，因为它不认数组
console.log(Math.max(scores)); // NaN

// 用apply把数组拆成单个参数传进去
console.log(Math.max.apply(null, scores)); // 92

现在ES6有扩展运算符...可以替代这个场景（Math.max(...scores)），但apply是经典的解决方案，原理是一样的。

三个方法的核心区别 #

• call(thisArg, arg1, arg2...)：立即执行函数，强制this指向thisArg，参数逐个传入
• apply(thisArg, [arg1, arg2...])：立即执行函数，强制this指向thisArg，参数以数组形式传入
• bind(thisArg, arg1, arg2...)：不立即执行，返回一个新函数，this永久绑定为thisArg，还能提前传入部分参数（也就是函数柯里化）

内容的提问来源于stack exchange，提问作者Rashmi Sharma