为何初始化两个对象后函数仅返回最后一个？原生JS求助

嘿，我看了你的代码，马上就找到问题所在啦！你现在遇到的「窗口resize时仅输出最后一个对象名称」的情况，核心原因是直接给window.onresize赋值导致事件处理函数被覆盖了。

问题细节拆解 #

你的Slide构造函数里写了这行代码：

window.onresize = this.resize.bind(this);

原生JS里，window.onresize是一个单一的事件属性——每次给它赋值，都会把之前绑定的事件处理函数彻底替换掉。所以当你创建第一个Slide实例时，window.onresize被设为第一个实例的resize方法；但创建第二个实例时，这个属性又被替换成第二个实例的resize方法，最终只有最后一个实例的方法会在窗口调整时触发。

这也是从jQuery转原生JS容易踩的坑：jQuery的$(window).resize()是内部维护事件队列的，绑定多个回调不会互相覆盖，但原生的on[event]属性不具备这个特性。

修复方案 #

把直接赋值onresize的写法，改成用addEventListener绑定事件：

window.addEventListener('resize', this.resize.bind(this));

addEventListener的作用是往事件监听队列里添加新的回调，不会覆盖之前绑定的函数。这样每个Slide实例的resize方法都会被注册到window的resize事件中，窗口调整时所有实例的名称都会被输出。

额外优化建议 #

如果以后需要移除某个实例的resize监听，bind会返回一个新的函数引用，直接用removeEventListener可能找不到对应的回调。建议把绑定后的函数存起来：

// 在构造函数里
this.resizeHandler = this.resize.bind(this);
window.addEventListener('resize', this.resizeHandler);

// 后续需要移除时
// window.removeEventListener('resize', this.resizeHandler);

这样能更规范地管理事件监听的生命周期。

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