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>

通过在创建事件时绑定整个对象，我应该获得＆＃34; first＆＃34;当我点击第一个元素和＆＃34;第二个＆＃34;当我点击第二个元素但事实并非如此。它对我使用的其他物体完全有效，但这个简单的情况并不起作用......

Answer 1

如果你希望你的对象像一个类一样运行，你可以使用这样的函数闭包：

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 2

您正在创建一个类，而您正在创建一个对象。

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

Answer 3

您可以使用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>

javascript在事件创建中绑定对象

3 个答案: