JavaScript点击事件触发时如何向回调函数传递自定义对象？

问题原因 #

你代码不生效的核心问题是回调函数的形参命名覆盖了外层的自定义对象：

• addEventListener 的回调函数默认第一个参数是触发的事件（Event）对象，你给这个形参命名为Product，会直接屏蔽外层定义的Product自定义实例，所以函数内部拿到的是事件对象而非你定义的商品对象，访问name属性自然返回undefined。

解决方法 #

方法1：直接利用作用域访问（最简单，适配当前场景） #

不需要给回调声明Product形参，直接访问外层作用域的自定义对象即可：

// 构造函数
function Products(name, type) {
  this.name = name
  this.type = type
}

// 自定义对象实例
const Product = new Products("CPU", "Hardware");

const button = document.getElementById("button");
// 回调不需要加Product形参，直接调用外层对象
button.addEventListener("click", function() {
    console.log(Product.name); // 正常输出 CPU
})

方法2：使用bind预传参数（适配动态传递不同对象的场景） #

如果需要给不同交互元素绑定不同的自定义对象，可以用bind方法提前把自定义对象绑定为回调的入参：

button.addEventListener("click", function(customProduct, event) {
  console.log(customProduct.name);
}.bind(this, Product)); // 第一个参数修改回调的this指向，后续参数为预传入的自定义值

方法3：箭头函数包装 #

箭头函数会继承外层作用域的变量，也可以避免作用域屏蔽问题：

button.addEventListener("click", () => {
  console.log(Product.name);
});

内容的提问来源于stack exchange，提问作者javi-ur96