单击时显示 class 属性值

Question

我需要在单击按钮元素时在控制台中显示 this.name。

我可以在 clicked() 中替换并设置 console.log(myBtn.name) 但我希望此方法适用于任何对象。

有办法吗？当我点击时，我得到一个空字符串。

谢谢！

class Button {
  constructor(name, id) {
    this.name = name;
    this.ref = document.getElementById(id);


    this.init();
  }

  init() {
    this.ref.addEventListener("click", this.clicked);
  }

  clicked() {
    console.log(this.name);
  }
}

let myBtn = new Button('My button', "test");

<button id="test">Click me</button>

Answer 1

你快到了

您的代码中的问题在于这在回调中的含义

按下按钮时 this 是按钮，除非您另有说明

class Button {
  constructor(name, id) {
    this.name = name;
    this.ref = document.getElementById(id);


    this.init();
  }

  init() {
    this.ref.addEventListener("click", this.clicked.bind(this));
  }

  clicked() {
    console.log(this.name);
  }
}

let myBtn = new Button('My button', "test");

<button id="test">Click me</button>

单击时显示 class 属性值

Showing class property value on click

html

javascript

this

javascript-objects

单击时显示 class 属性 值

Showing class property value on click

html

javascript

this

javascript-objects

单击时显示 class 属性值