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