为何已带上下文的方法需用bind()？及箭头函数用法疑问

一、为什么removeBook需要用bind(this)？ #

JavaScript里this的指向完全由函数的调用方式决定，和定义位置无关。

在bookstore.displayBookstore方法里，如果你直接传this.removeBook给shoppingCart.displayCart，相当于把removeBook函数从bookstore对象里“剥离”出来单独传递。后续在shoppingCart.handleClick里调用这个函数时，它属于普通函数调用模式，此时this会指向全局对象（浏览器环境是window，严格模式下是undefined），自然找不到this.books，所以会报错。

bind(this)的作用是生成一个新函数，强制把这个新函数的this绑定到当前的bookstore对象。不管这个新函数在哪里被调用，内部的this永远指向bookstore，这样removeBook里的this.books就能正确访问到书店的书籍数组。

结合代码流程梳理：

1. 点击“Check Out”按钮时，触发的箭头函数调用shoppingCart.handleClick
2. handleClick执行传入的clickHandler（即绑定后的removeBook）
3. 此时removeBook的this仍指向bookstore，能正常执行书籍过滤逻辑

二、箭头函数的用法解析 #

箭头函数是ES6新增语法，核心特性是没有独立的this、arguments，不能作为构造函数，它的this直接继承自外层作用域的this，写法更简洁，专门解决回调函数里的this绑定混乱问题。

结合你代码里的实例逐个说明：

1. 数组遍历的简化写法 #

const itemsInCart = this.itemsInCart.map ((item) => `<p>${item}</p>`);

这里箭头函数替代了普通回调函数，相比function(item) { return

${item}

2. 事件回调中保留外层this #

document.getElementById('checkout').addEventListener('click', () => this.handleClick(clickHandler));

如果换成普通函数：

document.getElementById('checkout').addEventListener('click', function() {
  this.handleClick(clickHandler); // 这里的this指向按钮元素，而非shoppingCart，会报错
});

箭头函数的优势在于：它的this直接继承displayCart方法里的this（即shoppingCart），因此能正确调用shoppingCart.handleClick。

其他常见使用场景 #

• 简化简单逻辑：const add = (a,b) => a + b
• Promise、定时器回调：避免手动用bind绑定this

补充：call、apply、bind的核心区别 #

• call/apply：临时改变函数的this指向，并立即执行函数。二者仅传参方式不同：call逐个传递参数，apply传递参数数组。

  // call示例：临时绑定this到bookstore并执行
  bookstore.removeBook.call(bookstore, 'The Great Gatsby');
  // apply示例：参数以数组形式传递
  bookstore.removeBook.apply(bookstore, ['The Great Gatsby']);
  

• bind：生成一个绑定好this的新函数，但不会立即执行，适合需要将函数作为参数传递的场景（比如你代码里的情况）。

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