使用 ES6 箭头函数设置事件监听器答案

【问题标题】：Set event listener with ES6 arrow functions使用 ES6 箭头函数设置事件监听器
【发布时间】：2016-01-01 09:00:19
【问题描述】：

问题：为什么没有设置事件监听器？

//ADDING THE EVENT LISTENER
document.addEventListener('DOMContentLoaded', init);

//DELCARING INIT, PASSING BLANK PARAM, STATEMENT
var init = () => console.log('Is Firing');

【问题讨论】：

应该很容易在addEventListener 行上放置一个断点并在该点检查变量init。 ericlippert.com/2014/03/05/how-to-debug-small-programs

标签： javascript ecmascript-6 addeventlistener event-listener arrow-functions

【解决方案1】：

您的init 应在使用前先声明。

//DELCARING INIT, PASSING BLANK PARAM, STATEMENT
var init = () => alert('Is Firing');

//ADDING THE EVENT LISTENER
document.addEventListener('DOMContentLoaded', init);

【讨论】：

我还要再等几分钟。

【解决方案2】：

init 是一个函数表达式，这意味着它不会发生提升，因此您应该在侦听器绑定之前将函数表达式拉起。我建议你研究函数提升。 https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/function#Function_declaration_hoisting

【讨论】：

准确地说，变量init 被提升，这就是为什么它不会生成ReferenceError。但是，在到达赋值语句之前，该变量不会获取值，这意味着当在 addEventListener 调用中引用时，它的值仍然是未定义的。