Question

我是这里的新手，我正在创建一个新程序，但我确实陷在这个问题中。

我创建了一个类，该类可动态创建DOM元素并设置事件。问题在于“ this”引用无法正常工作。

当我只创建一个对象时，它可以正常工作，但是如果创建更多的对象，则所有对象总是从上一个对象获得引用。

两个对象都应通过单击显示自己的名称。

有人可以帮我理解吗？

obj = function(name, box){
	this.name = name;
  this.inside = box;
}

obj.prototype = {
	
   start: function() { 
  	document.getElementById(this.inside).innerHTML = "<div ID='" + this.name +"_div'>Click me "+ this.name +"<div>";
	 },
   
   addClickevent: function(){
   that = this;
   	document.getElementById(this.name +"_div").addEventListener("click", function(e){
    	alert(that.name);
    }); 
   }
}


x1 = new obj('a','div1');
x1.start();
x1.addClickevent();

x2 = new obj('b','div2');
x2.start();
x2.addClickevent();

<div id="div1">

</div>

<div id="div2">

</div>

Answer 1

确定要使用全局变量that吗？好像您错过了addClickevent第一行中的var / let。只需将that=this替换为let that=this

Answer 2

“ that”不是javascript中的关键字，您必须声明使用let或var才能正常工作。

obj = function(name, box) {
  this.name = name;
  this.inside = box;
}

obj.prototype = {

  start: function() {
    document.getElementById(this.inside).innerHTML = "<div ID='" + this.name + "_div'>Click me " + this.name + "<div>";
  },

  addClickevent: function() {
    let that = this;
    document.getElementById(this.name + "_div").addEventListener("click", function(e) {
      alert(that.name);
    });
  }
}
x1 = new obj('a', 'div1');
x1.start();
x1.addClickevent();

x2 = new obj('b', 'div2');
x2.start();
x2.addClickevent();

<div id='div1'></div>
<div id="div2"></div>

JavaScript-创建多个obj时，类事件内部出现“ this”问题

2 个答案: