объект привязки javascript при создании события

Question

Я фактически застрял на простом (это наверняка это) примере.

<div id="first">first</div> 
<div id="second">second</div> 
<script> 
    var JSClass = { 
     element : null, 
     click : function() { 
      console.log(this.element.id); 
     }, 
     created : function(element) { 
      this.element = element; 
      this.element.addEventListener('click', this.click.bind(this)); 
     } 
    }; 
    JSClass.created(document.querySelector('#first')); 
    JSClass.created(document.querySelector('#second')); 
</script> 

Связывая весь объект, когда я создаю событие, я должен получить «первый», когда я нажимаю на первый элемент и «второй», когда я нажимаю на втором элементе, но это не так. Это полностью функциональный для других объектов, которые я использую, но это простой случай не работает ...

Answer 1

Вы можете использовать class, набор this.element к element передаются конструктору

<div id="first">first</div> 
 
<div id="second">second</div> 
 
<script> 
 
    class JSClass { 
 
    constructor(element) { 
 
     this.element = element; 
 
    } 
 
    created() { 
 
     this.element 
 
     .addEventListener('click', this.click.bind(this)); 
 
    } 
 
    click() { 
 
     console.log(this.element.id); 
 
    } 
 
    }; 
 
    let first = new JSClass(document.querySelector('#first')); 
 
    let second = new JSClass(document.querySelector('#second')); 
 
    first.created(); 
 
    second.created(); 
 
</script>

Answer 2

Если вы хотите, чтобы ваш объект вести себя как класс, вы можете использовать функции закрытия, как это:

var JSClass = function(element) { 
 
    this.element = element; 
 
    element.addEventListener('click', click.bind(this)); 
 
    
 
    function click() { 
 
    console.log(this.element.id); 
 
    } 
 
}; 
 

 
new JSClass(document.querySelector('#first')); 
 
new JSClass(document.querySelector('#second'));

<div id="first">first</div> 
 
<div id="second">second</div>

Answer 3

вы не создаете класс, вы создаете объект.

Таким образом, каждый раз, когда вы вызываете .created на этот объект, вы переписываете элемент внутри.

Попробуйте использовать Object.create сделать два разных объекта

var JSClass = { 
    element : null, 
    click : function() { 
     console.log(this.element.id); 
    }, 
    created : function(element) { 
     this.element = element; 
     this.element.addEventListener('click', this.click.bind(this)); 
    } 
}; 

var first = Object.create(JSClass); 
var second = Object.create(JSClass); 

first.created(document.querySelector('#first')); 
second.created(document.querySelector('#second')); 

fiddle