javascript - 箭头功能不起作用。普通的做。为什么？

This question already has answers here:

var functionName = function() {} vs function functionName() {}
                                
                                    （39个答案）
                                
                        
                2年前关闭。
            
        

我有一段代码，就是普通的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>() {}即可。如果可能的话，真的很想更详尽地解释为什么会发生这种情况。

谢谢你的时间..

最佳答案

那就是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;
}

在您的情况下，只需在使用前先定义函数即可。

关于javascript - 箭头功能不起作用。普通的做。为什么？ ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52852550/