Question

我一段时间以来一直在使用ES6功能，在这种情况下，在声明该功能之前我在使用该功能时出现了错误，但是当我改用旧的传统方式时，没有发现错误

函数提升仅以传统方式起作用，还是我缺少一个陷阱？

我尝试搜索，但是这个Besides syntax, is there any difference between a normal function and an arrow function?不能给我令人满意的结果

简单的输入表单代码：

<!DOCTYPE html>
<html>
<head>
  <title>Hero Form</title>
</head>
<body>
  <form id="hero">
    <label for="heroName">Name:
      <input type="text" name="heroName" autofocus
      placeholder="Your super Hero Name"Smaxlength="32">
    <!-- </label> -->
    <button id="submit" type="submit">Submit</button>
  </form>
</body>
</html>

<script>
  // Throws an error when called first
  form.addEventListener('submit', makeHero, false);
  const form = document.forms.hero;

  const makeHero = (event) => {
    event.preventDefault();
    const hero = {};
    hero.name = form.heroName.value;
    console.log(JSON.stringify(hero), hero, 'clear');
    return hero;
  }
</script>

<script>
  const form = document.forms.hero;

  const makeHero = (event) => {
    event.preventDefault();
    const hero = {};
    hero.name = form.heroName.value;
    console.log(JSON.stringify(hero), hero, 'clear');
    return hero;
  }
// Works fine after arrow function declaration
  form.addEventListener('submit', makeHero, false);
</script>

Answer 1

这实际上与箭头功能无关。在JavaScript中，声明悬挂在其作用域的顶部。声明可能看起来像这样：

let x = 42;

但是，实际上，这条语句完成了两件事。首先，声明：

let x

然后是作业：

x = 42

在这里，声明（let x）被悬挂，但未赋值（x = 42）。

这与变量声明和将变量分配给箭头函数所做的事情没有什么不同：

const makeHero = (event) => { ...

const makeHero将被吊起，但不会分配：`makeHero =（event）=> {...

尽管可以用多种方法来设置函数，但Function Declaration是一种这样的方法，它不分配变量，而整个函数都已被吊起：

function makeHero(event) {
}

现在Function Expression只是一个表达式，其中将一个函数分配为其他值，这就是将箭头函数分配给常量hero时要执行的操作。因此，const hero会被挂起，而不是作业被挂起，因此，如果您尝试在作业前调用hero，则会出错。

函数和箭头（=>）函数之间是否有区别

1 个答案: