JS静态函数继承及按钮点击局部变量共享实现问询

嘿，我来帮你拆解这两个问题——先搞定按钮交互的变量存储，再聊JS静态函数的继承～

按钮交互需求：完全可行！（不用全局变量） #

你要的这种“局部变量记录状态，后续按钮访问该状态”的需求，闭包是最经典的解决方案，能完美避免全局变量污染。核心思路是用一个局部作用域包裹所有按钮的事件逻辑，状态变量只在这个作用域内有效。给你写个实际可运行的例子：

// 立即执行函数创建独立局部作用域
(function() {
  // 这个变量只在当前作用域内，不是全局的
  let selectedBtn = null;

  // 绑定按钮1、2的点击事件，记录选中标识
  document.getElementById('btn1').addEventListener('click', () => {
    selectedBtn = 'btn1';
    console.log('已选中「点击我（按钮1）」');
  });

  document.getElementById('btn2').addEventListener('click', () => {
    selectedBtn = 'btn2';
    console.log('已选中「点击我（按钮2）」');
  });

  // 绑定按钮3、4的点击事件，读取状态并处理业务
  document.getElementById('btn3').addEventListener('click', () => {
    if (!selectedBtn) {
      alert('请先点击按钮1或2哦');
      return;
    }
    // 这里写选项1的业务逻辑，比如根据selectedBtn做不同处理
    console.log(`基于选中的${selectedBtn}，执行选项1的业务`);
  });

  document.getElementById('btn4').addEventListener('click', () => {
    if (!selectedBtn) {
      alert('请先点击按钮1或2哦');
      return;
    }
    console.log(`基于选中的${selectedBtn}，执行选项2的业务`);
  });
})();

除了闭包，你也可以用DOM元素的dataset属性来存储状态（比如把选中标识存在某个容器的data-selected-btn里），但闭包的方式更清晰，状态和DOM解耦，逻辑更集中。

JS静态函数的继承问题 #

静态方法的继承分两种场景说：

1. ES6类语法（推荐） #

用extends关键字继承类时，子类会自动继承父类的静态方法和属性，直接通过子类.静态方法就能调用：

class Parent {
  static staticFunc() {
    console.log('父类的静态方法');
  }
}

class Child extends Parent {}

Child.staticFunc(); // 输出：父类的静态方法

如果子类需要覆盖父类的静态方法，还能通过super调用父类的版本：

class Child extends Parent {
  static staticFunc() {
    super.staticFunc(); // 调用父类静态方法
    console.log('子类的静态方法');
  }
}

Child.staticFunc(); 
// 输出：
// 父类的静态方法
// 子类的静态方法

2. 传统构造函数语法 #

如果是用ES5的构造函数方式，静态方法不会自动继承，需要手动把父类的静态属性/方法复制到子类上，常用Object.assign：

function Parent() {}
Parent.staticFunc = function() {
  console.log('父类的静态方法');
};

function Child() {}
// 先继承原型链（实例方法）
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

// 手动复制静态方法
Object.assign(Child, Parent);

Child.staticFunc(); // 输出：父类的静态方法

这样两种场景的静态方法继承就都搞定啦～

内容的提问来源于stack exchange，提问作者J-Cake