事件创建中的javascript绑定(bind)对象

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>

通过在创建事件时绑定(bind)整个对象，我应该在单击第一个元素时获得“first”，在单击第二个元素时获得“second”，但事实并非如此。它对我使用的其他对象具有完整的功能，但这个简单的案例不起作用...

Answer 1

您不是在创建类，而是在创建对象。

因此，每次您对该对象调用 .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