Question

我有一段代码，就是普通的javascript。当我使用箭头功能时，出现此错误：

Uncaught ReferenceError: loadEventListeners is not defined

当我使用常规函数语法时，它工作正常。

这是我的代码：

const form = document.querySelector('#task-form');
const taskList = document.querySelector('.collection');
const clearBtn = document.querySelector('.clear-tasks');
const filter = document.querySelector('#filter');
const taskInput = document.querySelector('#task');

// Load all event listeners
loadEventListeners();

// Load all event listeners
const loadEventListeners = () => {
  // Add task event
  form.addEventListener('submit', addTask);
}

// Add Task
const addTask = (e) => {
  if(taskInput.value === '') {
    alert('Add a task');
  }

  // Create li element
  const li = document.createElement('li');
  // Add class
  li.className = 'collection-item';
  // Create text node and append to li
  li.appendChild(document.createTextNode(taskInput.value));
  // Create new link element
  const link = document.createElement('a');
  // Add class
  link.className = 'delete-item secondary-content';
  // Add icon html
  link.innerHTML = '<i class="fa fa-remove"></i>';
  // Append the link to li
  li.appendChild(link);

  // Append li to ul
  taskList.appendChild(li);

  // Clear input
  taskInput.value = '';

  e.preventDefault();
}

我的问题是这个。我需要在代码中做一些启用箭头功能的事情吗？也许我需要为此设置Webpack或Parcel？我不知道为什么会这样。只需将const <functionName> = () => {}替换为function <functionName>() {}就可以了。如果可能的话，真的想更详尽地解释为什么会发生这种情况。

谢谢您的时间。

Answer 1

那叫Temporal Dead Zone

let绑定是在包含以下内容的（块）作用域的顶部创建的   声明，通常称为“吊装”。与变量不同   以var声明，其以值 undefined 开头，   let变量在定义为   评估。在初始化之前访问变量会导致    ReferenceError 。该变量位于以下位置的“时间死区”中   块的开始，直到完成初始化。

关于“时间死区”的所有注意事项都适用于   let和const。

示例：

function do_something() {
  console.log(bar); // undefined
  console.log(foo); // ReferenceError
  var bar = 1;
  let foo = 2;
}

根据您的情况，只需在使用它之前先定义函数即可。

箭头功能无效。普通的做。为什么？

1 个答案: