求助：JavaScript静态变量点击时无法每次更新的问题

嘿，我完全懂你遇到的困扰——你想让用户点击demo区域时，每次都切换flag的取值，本以为把flag作为函数的静态属性（myFunction.flag）就能在页面运行期间保留它的状态，但实际点击时它并没有按预期更新，对吧？

问题根源分析 #

大概率是你在函数内部每次调用都重新初始化了这个静态变量，比如写成了这样：

function myFunction() {
  myFunction.flag = false; // 这里每次调用都会重置flag！
  myFunction.flag = !myFunction.flag;
}

这种情况下，不管点击多少次，flag都会先被设为false，再取反成true，永远停留在true，自然没法切换状态。

正确的实现方式 #

方式1：正确使用函数静态属性

只在第一次调用函数时初始化flag，之后每次调用直接切换值：

// 定义处理点击的函数
function myFunction() {
  // 第一次调用时初始化flag，避免重复重置
  if (typeof myFunction.flag === 'undefined') {
    myFunction.flag = false;
  }
  // 切换flag状态
  myFunction.flag = !myFunction.flag;
  
  // 这里可以添加你的业务逻辑，比如更新demo区域的显示
  console.log('当前flag值:', myFunction.flag);
}

// 给demo区域绑定点击事件
document.querySelector('.demo').addEventListener('click', myFunction);

这里的myFunction.flag是挂在函数对象上的静态属性，只要页面不刷新，它的状态就会一直保留。

方式2：用闭包封装状态（更推荐）

闭包能把状态变量封装在私有作用域里，避免污染函数对象或全局作用域，是JavaScript保存状态的常用方案：

// 用立即执行函数创建闭包，封装flag变量
const myFunction = (function() {
  let flag = false; // 这个变量只会初始化一次
  
  return function() {
    // 每次点击切换状态
    flag = !flag;
    console.log('当前flag值:', flag);
    // 你的业务逻辑
  };
})();

// 绑定点击事件
document.querySelector('.demo').addEventListener('click', myFunction);

这种方式下，flag只能被内部的函数访问，不会被外部意外修改，安全性更高。

方式3：利用DOM元素的dataset存储状态

如果你的状态和DOM元素强相关，可以直接把状态存在元素的dataset属性里：

function myFunction(e) {
  // 从元素dataset中读取flag，默认转为布尔值
  let flag = e.target.dataset.flag === 'true';
  // 切换状态
  flag = !flag;
  // 把新状态存回dataset
  e.target.dataset.flag = flag;
  
  console.log('当前flag值:', flag);
  // 你的业务逻辑
}

document.querySelector('.demo').addEventListener('click', myFunction);

这种方式不需要额外的变量，状态直接和DOM元素绑定，适合简单的交互场景。

关键注意点 #

不管用哪种方式，核心都是不要在每次函数调用时重置状态变量——状态变量只需要初始化一次，之后每次操作都是修改它的现有值，这样才能实现切换效果。

内容的提问来源于stack exchange，提问作者camel-man