我不理解JavaScript中的这段代码

问题描述

因此，我们使用onClick作为参数来定义此功能：

    function createRemoveButton (onClick) {
      const removeBtn = document.createElement('button');
      removeBtn.innerHTML = 'X';
      removeBtn.addEventListener('click',onClick);
      return removeBtn
    }

    function addTodoTodoM (todo) {
      const node = document.createElement('li');
      const text = document.createTextNode(todo.name);

      const removeBtn = createRemoveButton(() => {
        store.dispatch(removetodoAction(todo.id))
      });
      node.appendChild(text);
      node.appendChild(removeBtn);

      node.style.textdecoration = todo.complete ? 'line-through' : 'none';
      node.addEventListener('click',() => {
        store.dispatch(toggletodoAction(todo.id))
      });

      document.getElementById('todos')
        .appendChild(node)
    }

问题：在上述函数中调用createRemoveButton时，为什么没有传递参数？

解决方法

用参数调用

createRemoveButton ，该参数是一个函数() => { store.dispatch(removeTodoAction(todo.id))}。

在javascript中，我们可以将函数作为参数传递。在createRemoveButton的声明中，onClick将需要是一个函数，然后将其传递给addeventListener，后者的第二个参数必须是回调函数。

旁注：可以传入任何类型（即onClick可以是字符串，null，无论如何），因为javascript不会检查参数类型，但是会抛出一个如果未将函数传递给addEventListener，则会在运行时发生错误。

在JavaScript中，函数被视为一流的对象。因此，您可以将它们作为参数传递。

为了更加清楚，您可以将代码更改为：

const callback = () => {
        store.dispatch(removeTodoAction(todo.id))
      };

const removeBtn = createRemoveButton(callback);

javascript