JavaScript - проблема с «this» внутри событий класса при создании более 1 объекта

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» не является ключевым словом в 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>

Answer 2

Вы уверены, что вам нужна глобальная переменная that?Похоже, вы пропустили var / let в первой строке addClickevent.Просто замените that=this на let that=this