Javascript 在ES6中创建的每个新实例中传递单独的作用域

我已经写了一些代码如下。在这里，我正在为类创建新实例

todos

并每次将单独的文本传递给构造函数

在

setText

内部，我将一个click方法绑定到元素

test

，以便它在单击时返回与其关联的文本

这里的问题是，通过此方法创建的三个组件显示了单独的文本，但在单击任何元素时，它会将文本显示为

“这是todo组件3”

，这是我传递给构造函数的最后一个文本。我希望每个组件都是独立的。请帮忙

class todos{
  constructor(text){
    this.istodo = false;
    this.text = text;
  }
  _changestatus(){
    this.istodo = !this.istodo;
  }
  setText(){
    this.getDiv  = document.getElementById('test');
    this.getDiv.innerHTML = this.getDiv.innerHTML+'\n'+this.text;
    this.getDiv.onclick = (event)=> {alert(this.text)}; //this is always coming as "this is a todo component3"
  }
}


let todo = new todos('this is a todo component');
todo.setText();
let todo1 = new todos('this is a todo component1');
todo1.setText();
let todo2 = new todos('this is a todo component2');
todo2.setText();
let todo3 = new todos('this is a todo component3');
todo3.setText();

---

问题是，您的所有文本只有一个容器，并且您添加的每个下一个todo都会覆盖上一个创建的

onclick

处理程序。这就是问题所在

要解决这个问题，您需要确保每个todo都为文本创建自己的容器。下面是一种可能的方法。注意，我从

todos

类中删除了

document.getElementById（'test'）

分类待办事项{
构造函数（文本）{
this.istodo=false；
this.text=文本；
}
_更改状态（）{
this.istodo=！this.istodo；
}
setText（）{
this._node=document.createElement（'div'）；
this._node.appendChild（新文本（this.Text））；
此._node.onclick=（事件）=>{
警报（this.text）
};
}
getNode（）{
返回此。\u节点；
}
}
让容器=document.getElementById（'test'）；
[“这是一个待办事项组件”，“这是一个待办事项组件#2”，“这是一个待办事项组件#3']{
让todo=新todo（文本）；
todo.setText（）；
appendChild（todo.getNode（））；
});
您总是使用
document.getElementById（'test'）
是的，谢谢，我没有注意到这一部分。