JS类中动态创建按钮绑定事件的this指向问题求助

你的核心问题是事件回调里的this默认指向触发事件的DOM按钮，而非Task类的实例，而且原来的changeStatut方法没有真正更新实例的done属性，下面给你两种简单直接的解决办法：

方法一：用箭头函数绑定this #

箭头函数不会生成自己的this，会继承外层作用域的this（也就是addToDOM方法里的Task实例）。修改addToDOM方法，给按钮添加点击事件：

addToDOM(){
  // ... 原有代码不变 ...

  const taskButton = document.createElement("button");
  taskButton.classList.add("task-action");
  taskButton.textContent = "Changer le statut";

  // 添加事件监听
  taskButton.addEventListener('click', () => {
    this.changeStatut();
    // 可选：根据done状态更新UI，比如给任务项加已完成样式
    newTask.classList.toggle('task-done');
  });

  tasklist.prepend(newTask);
  newTask.append(taskTitle,taskPriority,taskButton);
}

同时修正changeStatut方法，直接修改实例的done属性：

changeStatut(){
  this.done = !this.done; // 直接反转实例的done值
}

方法二：用bind强制绑定this #

通过bind方法把changeStatut的this固定为当前Task实例：

addToDOM(){
  // ... 原有代码不变 ...

  const taskButton = document.createElement("button");
  taskButton.classList.add("task-action");
  taskButton.textContent = "Changer le statut";

  // 用bind绑定this
  taskButton.addEventListener('click', this.changeStatut.bind(this));

  tasklist.prepend(newTask);
  newTask.append(taskTitle,taskPriority,taskButton);
}

同样要修正changeStatut方法：

changeStatut(){
  this.done = !this.done;
  // 如果要更新UI，可以把newTask存为实例属性（比如this.element = newTask），再在这里操作样式
}

关键提醒 #

原来的changeStatut方法只是创建了临时变量修改后返回，根本没改变实例的done值，这是必须修正的点——一定要直接操作this.done才能真正更新实例状态。

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