在没有匿名 function 的情况下，无法从导入的 class 将函数分配给“onclick”？

Question

我有两个 js 文件：index.js 和 TaskList.js（我在其中创建了 class “TaskList”，然后导出到 index.js）。

我想将 class“TaskList”的方法“sortTaskAsc()”分配给按钮上的事件“onclick”。 所以在 index.js 中，当我用匿名 function 这样写时，它可以工作：

getElementByID("btn-sortDown").onclick = () => {taskList.sortTaskAsc()}

但是当我想尝试这种方式时，它不再起作用了：

getElementByID("btn-sortDown").onclick = taskList.sortTaskAsc

我注意到，当我对 index.js 中的函数使用第二种方式时，它们都可以工作。 但是当我使用来自导入的 class 的函数时，它们不会。 在控制台选项卡中，它显示有关“未定义”的一些错误。

请帮助我了解原因。 感谢你们。

Answer 1

TaskList 的方法 sortTaskAsc 与相关元素绑定，因为您使用“函数”语句。

class TaskList {
    sortTaskAsc() {
        console.log(this);
    }
}

let taskList = new TaskList();

getElementByID("btn-sortDown").onclick = taskList.sortTaskAsc
//onclick binds the function with element btn-sortDown. `this` gives an element.

getElementByID("btn-sortDown").onclick = () => taskList.sortTaskAsc()
//Arrow functions are not binded with anything.
//Therefore `this` doesn't be corrupted and it gives the class.