Question

JavaScript 中的箭头函数无法按预期工作，为什么？但正常函数可以正常工作

2019-06-04

227

javascript html arrow-functions

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

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 变量是 未定义 。

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

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 是一个包含 匿名函数 的变量。

请查看 @Duc Hong 的回答，了解有关提升的解释。

Answer 2

您遇到的情况称为 提升 。JavaScript 使用两种主要方法来定义函数：函数声明（有时称为函数语句）和函数表达式。

函数声明：

function fncName() {}

函数表达式：

const x = function fncName(){}

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

在您的情况下，箭头函数是函数表达式，因此：

const x = () => {}

与：

const x = function fncName(){}

据我所知，使用箭头函数有两个原因： 最小语法 和 词汇 this 。

请注意 Mozzila 网站上的箭头函数

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.