箭头函数不起作用。普通人会。为什么？ [复制]答案

【问题标题】：Arrow Functions don't works. Regular ones do. Why? [duplicate]箭头函数不起作用。普通人会。为什么？ [复制]
【发布时间】：2018-10-17 10:20:25
【问题描述】：

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

感谢您的宝贵时间..

【问题讨论】：

const 变量在声明之前不可用。将声明移到调用上方。见stackoverflow.com/questions/31219420/…
另外，这个：stackoverflow.com/questions/336859/…
查看hoisting的话题

标签： javascript function ecmascript-6 arrow-functions

【解决方案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;
}

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

【讨论】：