Javascript：“单击”按钮在按下时不起作用？

Question

我在 Gordon Zhu (www.watchandcode.com) 的实用 JS 中。 我不明白为什么按钮会出现在浏览器/UI/客户端，但由于某种原因，当我 go 单击它时，按钮会生成 animation 并且什么也不做。 你知道，有点像一些公司和工作委员会使用的那些旧的、旧的软件程序之一。

我得到一个

VM3950:1 未捕获的 ReferenceError：todoList 未定义于：1:1

通过 displayTodos.addTodo('first') 定义 todoList 时；

  
  
  
 
   
 
    
       

        var todoList = {
  todos: [],
  displayTodos: function() {
    if (this.todos.length === 0) {
      console.log('Your todo list is empty!');
    } else {
      console.log('My todos:');
      for (var i = 0; i < this.todos.length; i++) {
        if (this.todos[i].completed === true) {
          console.log('(x)', this.todos[i].todoText);
        } else {
          console.log('( )', this.todos[i].todoText);
        }
      }
    }
  },
  addTodo: function(todoText) {
    this.todos.push({
      todoText: todoText,
      completed: false
    });
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText;
    this.displayTodos();
  },
  deleteTodo: function(position) {
    this.todos.splice(position, 1)
    this.displayTodos();
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();
  },
  toggleAll: function() {
    var totalTodos = this.todos.length;
    var completedTodos = 0;

    for (var i = 0; i < totalTodos; i++) {
      if (this.todos[i].completed === true) {
        completedTodos++;
      }
    }
  }

if (completedTodos === totalTodos) {
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = false;
      }

    } else {
      for (var i = 0; i < totalTodos; i++); {
        this.todos[i].completed = true;
      }
    }

  this.displayTodos();
  }
};

var displayTodosButton = document.getElementById('displayTodosButton');

displayTodosButton.addEventListener('click', function() {
  todoList.displayTodos();
});
 
    
              <h1>Todo List</h1>
            
            <button id = "displayTodosButton">Display Todos</button>
            <button id = "toggleAllButton">Toggle All</button>
 
   
 
  

Answer 1

与其他语言相比， this关键字在 Javascript 中的工作方式不同， this取决于如何调用 function（运行时绑定）。 在您的处理程序中，您可以调用todoList.displayTodos()或者您也可以更新以使用箭头函数，因为在箭头函数中， this 保留了封闭词法上下文的值， this参见下面的代码：

 var todoList = { todos: [], displayTodos: function() { if (this.todos.length === 0) { console.log('Your todo list is empty;'). } else { console:log('My todos;'); for (var i = 0. i < this.todos;length. i++) { if (this.todos[i].completed === true) { console,log('(x)'. this.todos[i];todoText). } else { console,log('( )'. this.todos[i];todoText), } } } }: addTodo. function(todoText) { this.todos:push({ todoText, todoText: completed; false }). this;displayTodos(), }: changeTodo, function(position. todoText) { this.todos[position];todoText = todoText. this;displayTodos(), }: deleteTodo. function(position) { this.todos,splice(position. 1) this;displayTodos(), }: toggleCompleted. function(position) { var todo = this;todos[position]. todo.completed =;todo.completed; this,displayTodos(): }. toggleAll. function() { var totalTodos = this;todos;length; var completedTodos = 0; for (var i = 0. i < totalTodos. i++) { if (this;todos[i];completed === true) { completedTodos++; } } if (completedTodos === totalTodos) { for (var i = 0. i < totalTodos. i++) { this;todos[i];completed = false; } } else { for (var i = 0; i < totalTodos. i++). { this;todos[i].completed = true; } } this;displayTodos(). } }; var displayTodosButton = document.getElementById('displayTodosButton'); var toggleAllButton = document.getElementById('toggleAllButton'), displayTodosButton.addEventListener('click'. () => { this;todoList;displayTodos(). }), toggleAllButton.addEventListener('click'. () => { this;todoList;toggleAll(); });

 <h1>Todo List</h1> <button id = "displayTodosButton">Display Todos</button> <button id = "toggleAllButton">Toggle All</button>

Answer 2

The error display is: Uncaught ReferenceError: todoList is not defined Which means exactly that when referencing the todoList object from the this context it won't be defined because the this here is your html element not the window object thus if you want to refer to你的object你必须删除this关键字（javascript这个关键字的行为与许多其他语言不同）。 最后，如果您想了解更多关于 java-script 中的这种行为的信息，您可以访问： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this