イベントの作成時に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

を作るためにObject.createを使用してみてくださいは、

<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>

をコンストラクタに渡さ elementへ this.elementを設定しました

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を呼び出すたびに、その中の要素を上書きしています。

あなたはclassを使用できる2つの異なるオブジェクト

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