为什么JavaScript按钮绑定函数内的布尔值无法正常切换状态？

问题出在变量的作用域声明位置：

• 你把myVar用let myVar = true声明在myFunction函数内部，这是典型的函数局部变量
• 每次点击按钮触发函数执行时，都会重新运行这行初始化代码，重新创建一个全新的myVar，初始值固定为true
• 当次函数执行中修改的myVar = false，会在本次函数运行结束后，随局部作用域的销毁被回收，根本不会留存到下一次函数调用

这种机制下，不管点击多少次按钮，每次进入函数时myVar刚被创建就是true，自然永远走第一个分支输出hello，永远不会进入输出hi的分支。

修复方案 #

把myVar的声明移到函数外部，让它只在页面加载时初始化一次，后续修改的值可以跨函数调用持久保存：

// 变量移到函数外部，避免每次调用都被重新初始化
let myVar = true;

function myFunction() {
  if (myVar === true) {
    myVar = false;
    console.log("hello");
  } else if (myVar === false) {
    console.log("hi");
    myVar = true;
  }
}

document.getElementById("button").addEventListener("click", myFunction);

原有HTML代码不需要做任何调整：

<button id="button">click me</button>

优化提示：如果不想把变量暴露在全局作用域造成污染、和其他全局变量重名冲突，也可以用闭包把状态封装起来，实现同样的切换效果：

// 立即执行函数创建独立作用域，内部的myVar不会被外部访问
const myFunction = (() => {
  let myVar = true;
  return () => {
    if (myVar) {
      myVar = false;
      console.log("hello");
    } else {
      console.log("hi");
      myVar = true;
    }
  }
})();

内容的提问来源于stack exchange，提问作者user15830678