微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

我不理解JavaScript中的这段代码

如何解决我不理解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);

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。