如何让JS模块类无需this前缀与bindProperties，同非模块代码语法一致？

首先要明确：你遇到的差异本质是类的实例作用域和全局/函数作用域的区别，而非模块与非模块的差异。非模块脚本里你用的是全局变量/函数，Node.js里如果是函数式模块写法（而非类），也是基于闭包作用域，自然不用this.和绑定；但如果在Node.js里写类，同样需要处理this绑定问题，只是你可能没注意到这一点。

下面是几种实现你需求的方法：

1. 放弃类，改用闭包式函数写法（最贴近非模块脚本风格） #

直接把逻辑封装在一个函数里，利用闭包保存状态，变量和函数都在函数作用域内，完全不用this：

// myscript.js
export function createApp() {
  let button = null;

  function buttonClicked(event) {
    alert("Hello world");
  }

  try {
    button = document.getElementById("button");
    button.addEventListener("click", buttonClicked);
  } catch (error) {
    console.log(error);
  }

  // 如需对外暴露方法，返回对象即可
  return {
    destroy() {
      button?.removeEventListener("click", buttonClicked);
    }
  };
}

使用示例：

<script type="module">
  import { createApp } from './myscript.js';
  const app = createApp();
</script>

这种写法和你给出的非模块脚本逻辑完全一致，只是用函数闭包替代了全局作用域，符合ES模块规范。

2. 用箭头函数定义类方法（消除手动绑定this） #

如果坚持要用类，可以把类方法定义为箭头函数，箭头函数会自动捕获构造函数中的this（即类实例），无需手动调用bindProperties：

// myscript.js
export class App {
  button = null;

  constructor() {
    try {
      this.button = document.getElementById("button");
      this.button.addEventListener("click", this.buttonClicked);
    } catch (error) {
      console.log(error);
    }
  }

  // 箭头函数自动绑定this到实例
  buttonClicked = (event) => {
    alert("Hello world");
    console.log(this.button);
  }
}

注意：这种方法还是需要用this.访问实例属性——这是类的语法规则，无论在浏览器模块还是Node.js里都一样，类成员本质上挂载在实例上，必须通过this访问。

3. TypeScript适配：闭包写法+--noImplicitThis配置 #

如果你用TypeScript，想要完全避免this.，推荐用闭包式函数写法。TypeScript的--noImplicitThis选项会强制明确this类型，但闭包写法根本不需要this，自然不会有这类问题。

另外纠正一个误解：Node.js里的TypeScript/JavaScript类同样需要处理this绑定，你觉得不需要，大概率是因为你用的是函数式模块写法，而非类写法。类的this绑定规则在浏览器和Node.js中是完全一致的。

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