箭头功能不能与模块一起使用吗？

Question

所以我正在练习我的JavaScript技能。我目前正在研究es6，并且正在尝试将箭头函数与模块一起使用，但是它们似乎无法一起使用。是什么原因呢？

我尝试仅使用一个JavaScript文件。当HTML中的脚本类型属性为“ text / javascript”时，箭头函数起作用，但是我想将代码分开，以便更简洁，更易于管理。所以我用了模块。我将脚本类型属性设置为“模块”，这样就可以了。但是，既然我已经分离了代码，箭头功能将不再起作用。

---

没有模块

---

HTML

    <script type="text/javascript" src="script.js" async></script>

Javascript

    const quoteBtn = document.getElementById('quoteBtn');
    const quote = document.getElementById('quote');
    const author = document.getElementById('author');

    const quotes = [
        {name:'Stephen King', quote:'signosfnggf'}
        /// more objects...
    ]

    displayQuote =()=> {
        var selectQuote = Math.floor(Math.random() * quotes.length);
        quote.innerHTML = `"${quotes[selectQuote].quote}"`;
        author.innerHTML = `<i> - ${quotes[selectQuote].author}</i>`;
    }

    quoteBtn.addEventListener('click', displayQuote);

---

带有模块

---

HTML

    <!-- Module type required in using module functionality-->
    <script type="module" src="script.js" async></script>

JS（现在正在使用模块...）

    import {quotes} from './lib/quotes.js'
    const quoteBtn = document.getElementById('quoteBtn');
    const quote = document.getElementById('quote');
    const author = document.getElementById('author');

    displayQuote =()=> { /*Uncaught ReferenceError: displayQuote is not 
    defined*/

        var selectQuote = Math.floor(Math.random() * quotes.length);
        quote.innerHTML = `"${quotes[selectQuote].quote}"`;
        author.innerHTML = `<i> - ${quotes[selectQuote].author}</i>`;
    }

    quoteBtn.addEventListener('click', displayQuote);

我希望箭头功能可以与模块一起使用并正常运行。但是浏览器给我一个错误： script.js：6未捕获的ReferenceError：未定义displayQuote

Answer 1

您需要添加let，var或const-我会使用const，因为它是一个函数：

const displayQuote = () => {...}

不使用这些关键字声明变量将导致implicit global，并且在严格模式下失败。