我不明白 javascript 中的这段代码

Question

所以我们用 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没有传递参数？

Answer 1

createRemoveButton被调用的自变量，参数是函数， () => { store.dispatch(removeTodoAction(todo.id))} 。

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

旁注：任何类型都可以传入（即onClick可以是字符串、null 等），因为 javascript 不检查 param 类型，但如果它没有将函数传递给addEventListener ，则会在运行时抛出错误。

Answer 2

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

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

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

const removeBtn = createRemoveButton(callback);

有关函数作为一流对象的更多信息： https : //www.freecodecamp.org/news/discover-the-power-of-first-class-functions-fd0d7b599b69/# :~: text=In%20JavaScript%2C%20functions %20are%20first,return%20from%20a%20function