JavaScript类实现TodoList报错：无法读取undefined的push属性

问题描述 #

我通过4个独立文件中的类（Main.js、AddTask.js、RemoveTask.js、SearchTask.js）练习JavaScript类的使用，实现TodoList功能时出现错误：在AddTask类中向toDoList数组push任务时，报错AddTask.js:14 Uncaught TypeError: Cannot read properties of undefined (reading 'push')。

相关代码 #

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>ToDoList</h1>
  <section>
    <input type="text">
    <button id="start">Add task</button>
  </section>
  <input type="text" class="search">
  <h2>Number of tasks: <span>0</span></h2>
  <ul></ul>
  <script src="AddTask.js"></script>
  <script src="RemoveTask.js"></script>
  <script src="SearchTask.js"></script>
  <script src="Main.js"></script>
</body>
</html>

Main.js代码

class Main {
  constructor(){  
    this.addTask = new AddTask()
    this.button=document.getElementById('start')
    this.button.addEventListener('click', this.addTask.startGame.bind(this))
    this.taskNumber = document.querySelector('h2 span')
    this.ul = document.querySelector('body ul')
  }         
}
const start = new Main()

AddTask.js代码

class AddTask {
    
  constructor() {
    this.toDoList = []
  }
    
  startGame() {
    const input     = document.querySelector('section input')
    const titleTask = input.value;
    if (titleTask === "") return alert ('You have to write a task!');
    const task      = document.createElement('li');
    task.innerHTML  = titleTask + "<button>Delete</button>";
    this.toDoList.push(task)
    input.value     = ""
    return toDoList;
  }
}

错误原因 #

问题出在事件监听的bind绑定对象错误：
在Main.js的构造函数中，this.addTask.startGame.bind(this)里的this指向的是Main类的实例，而非AddTask类的实例。当点击按钮触发startGame方法时，方法内部的this变成了Main实例，而Main实例没有toDoList属性，因此会报错this.toDoList为undefined。

另外，AddTask.js的startGame方法最后返回的toDoList未加this，属于潜在错误。

修复方案 #

1. 修正事件绑定的this指向：
   把Main.js中的事件监听代码修改为绑定AddTask的实例：

this.button.addEventListener('click', this.addTask.startGame.bind(this.addTask))

2. 修正返回语句的this缺失：
   把AddTask.js中startGame方法的返回语句改为：

return this.toDoList;

内容的提问来源于stack exchange，提问作者Pablo