在沒有匿名 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.