`this` 没有正确绑定

Question

deleteSong.onclick = (this)=>{ this.removeWidget(this) }removeWidget(this)我在这里想要的是要绑定到 HTMLElement“ this”的“this”参数，而不是我的类“this”班级：class Collection{createElements(){    let deleteSong = document.createElement('button');    deleteSong.className += 'delete-song';    deleteSong.setAttribute('type', 'button');    deleteSong.onclick = (this)=>{ this.removeWidget(this) }    deleteSong.innerHTML = '&#10005;'; }}为了更清楚，我正在尝试实现类似<button onclick="myFunction(this)">Click me</button>. 'this' 将返回 HTMLElement 对象的位置

Answer 1

你的主要问题是你把this你的函数参数放在里面，因此重新定义this. 只需将其更改为其他内容，这样当您真正的意思this是this.

该事件将在回调中onclick传递给您。event要访问实际元素，您需要使用event.target

例子：

class Collection {

  createElements() {

    let deleteSong = document.createElement('button');

    deleteSong.className += 'delete-song';

    deleteSong.setAttribute('type', 'button');

    deleteSong.onclick = (e) => { // <- dont use 'this' here.

      this.removeWidget(e.target) // e.target is the html element

    }

    deleteSong.innerHTML = '&#10005;';

    document.getElementById('container').append(deleteSong); // append element

  }

  removeWidget(el) {

    console.log(el);

  }

}

const c = new Collection();

c.createElements();

<div id="container"></div>

Answer 2

只需将event作为参数而不是this关键字传递。像这样的东西会给你所需的元素。

HTML:

<button onclick="myFunction(event)">Click me</button>

JS/TS文件

deleteSong.onclick = (event)=>{ this.removeWidget(event.target) }