JavaScript 中的箭头函数没有按预期工作，为什么？但正常功能工作正常

Question

这是我在单击按钮后尝试更改背景颜色的简单代码

const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');
const colors = ['red', 'blue', 'yellow', 'green'];

colorBtn.addEventListener('click', changeColor);

    // const changeColor = () => {
    //     let random = Math.floor(Math.random() * colors.length);
    //     bodyBcg.style.background = colors[random];
    // };

function changeColor() {
    console.log('color change event');
    let random = Math.floor(Math.random() * colors.length);
    bodyBcg.style.background = colors[random];
}

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.colorBtn {
    padding: 0.25rem 0.5rem;
    border: 10px;
    background-color: gray;
    color: white;
    outline: none;
    cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hex Colors</title>
    <link rel="stylesheet" href="./main.css">
</head>
<body>
    <button type="button" class="colorBtn">Click here to change color</button>
    <script type="text/javascript" src="./script.js"></script>
</body>
</html>

但是当我们尝试使用名为 changeColor 的箭头函数时，它不起作用：无法理解这背后的概念。

const changeColor = () => {
let random = Math.floor(Math.random() * colors.length);
bodyBcg.style.background = colors[random];
};

同样，它在 chrome 浏览器中运行良好，但是当我尝试将调试点放在工作的 changeColor 函数上时，它抛出错误：

const colorBtn = document.querySelector('.colorBtn');
ReferenceError: document is not defined

Answer 1

它不起作用，因为你的 changeColor 变量是 undefined 当你想 link 它的功能到事件侦听器时。

只需在附加事件侦听器之前定义它。

const colorBtn = document.querySelector('.colorBtn');
const bodyBcg = document.querySelector('body');
const colors = ['red', 'blue', 'yellow', 'green'];

const changeColor = () => {
  let random = Math.floor(Math.random() * colors.length);
  bodyBcg.style.background = colors[random];
};

colorBtn.addEventListener('click', changeColor);

body {
    display: flex;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.colorBtn {
    padding: 0.25rem 0.5rem;
    border: 10px;
    background-color: gray;
    color: white;
    outline: none;
    cursor: pointer;
}

<button type="button" class="colorBtn">Click here to change color</button>

附带说明：在这种情况下，changeColor 是一个变量包含一个 匿名函数 .

请查看以获得有关提升的解释。

Answer 2

您运行喜欢的东西叫做 hoisting。 JavaScript 使用两种主要方法来定义函数：函数声明（有时称为函数语句）和函数表达式。

函数声明：

function fncName() {}

函数表达式：

const x = function fncName(){}

这两种方法之间的主要功能区别在于函数声明是提升的，这意味着您甚至可以在函数定义之前调用它。函数表达式未提升。

在你的例子中，箭头函数是函数表达式，所以：

const x = () => {}

等同于：

const x = function fncName(){}

据我了解，使用箭头函数有两个原因： minimal syntax 和 lexical this 。

请注意Arrow functions on Mozzila site

An arrow function expression is a syntactically compact alternative to a regular function expression, although without its own bindings to the this, arguments, super, or new.target keywords.

JavaScript 中的箭头函数没有按预期工作，为什么？但正常功能工作正常

ArrowFunction in JavaScript in not working as expected, why? but the normal function is working fine

html

javascript

arrow-functions