被Arrow函数迷惑

Question

为什么功能二不起作用？我不明白为什么第一个函数工作，但不是第二个。

​

window.addEventListener("load", () => {
  one();
})
const one = () =>{
  document.querySelector(".fun1").innerHTML = "function one";
}

window.addEventListener("load", two);
const two = () =>{
  document.querySelector(".fun2").innerHTML = "function two";
}

<p class="fun1"></p>
<p class="fun2"></p>

​

Answer 1

Javascript自上而下运行，因此当设置第一个事件侦听器时，它使用一个匿名函数，重要的部分是在触发事件之前不调用该函数。

// this is the anonymous function
() => { 
  one(); 
} 

当您的第二个事件侦听器被击中时，它使用了在下面一行上定义的变量，因此它还没有在内存中。

简单的解决方案是将两个事件侦听器的定义移动到事件侦听器上面，或者像在第一个示例中那样将其包装到一个匿名函数中。