`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 = '✕';

 }

}

为了更清楚，我正在尝试实现类似

<button onclick="myFunction(this)">Click me</button>. 'this' 将返回 HTMLElement 对象的位置

Answer 1

你的主要问题是你把this你的函数参数放在里面，因此重新定义this. 只需将其更改为其他内容，这样当您真正的意思this是this.该事件将在回调中onclick传递给您。event要访问实际元素，您需要使用event.target例子：class Collection {&nbsp; createElements() {&nbsp; &nbsp; let deleteSong = document.createElement('button');&nbsp; &nbsp; deleteSong.className += 'delete-song';&nbsp; &nbsp; deleteSong.setAttribute('type', 'button');&nbsp; &nbsp; deleteSong.onclick = (e) => { // <- dont use 'this' here.&nbsp; &nbsp; &nbsp; this.removeWidget(e.target) // e.target is the html element&nbsp; &nbsp; }&nbsp; &nbsp; deleteSong.innerHTML = '&#10005;';&nbsp; &nbsp; document.getElementById('container').append(deleteSong); // append element&nbsp; }&nbsp; removeWidget(el) {&nbsp; &nbsp; console.log(el);&nbsp; }}const c = new Collection();c.createElements();<div id="container"></div>

Answer 2

只需将event作为参数而不是this关键字传递。像这样的东西会给你所需的元素。HTML:<button&nbsp;onclick="myFunction(event)">Click&nbsp;me</button>JS/TS文件deleteSong.onclick&nbsp;=&nbsp;(event)=>{&nbsp;this.removeWidget(event.target)&nbsp;}