Khan Academy 编辑器中使用 class 关键字报错的解决方案-html教程-PHP中文网

Khan Academy 编辑器中使用 class 关键字报错的解决方案

Khan Academy 的 HTML 编辑器因内置过时的 JavaScript 解析器（Esprima）不支持 ES6+ 语法（如 class），导致出现 “Unexpected reserved word” 错误；可通过修改的 type 属性绕过语法检查，并配合模块作用域或 IIFE 等方式安全编写现代 JavaScript。

khan academy 的 html 编辑器因内置过时的 javascript 解析器（esprima）不支持 es6+ 语法（如 `class`），导致出现 “unexpected reserved word” 错误；可通过修改 `<script>` 的 `type` 属性绕过语法检查，并配合模块作用域或 iife 等方式安全编写现代 javascript。</script>

Khan Academy 的实时网页编辑器（Live Editor）并非运行在标准浏览器环境中，而是通过自研的 Slowparse 工具对 HTML 进行预解析与校验。该工具依赖一个近十年前版本的 Esprima，仅支持 ECMAScript 5（ES5）语法，因此无法识别 class、const、let、箭头函数等 ES2015+ 特性——即使你的浏览器原生支持，代码仍会在编辑器内报错。

✅ 根本解决方法：绕过语法校验
Khan 的 Slowparse 仅对 type="text/javascript" 或无 type 属性的 <script> 标签执行严格 JS 解析；而对其他合法的 type 值（如 module、application/javascript、text/babel 等）则跳过 linting 和转换流程。因此，只需显式指定一个非默认 type 即可启用现代语法：</script>

<script type="module">
  class Example {
    constructor() {
      this.name = "Khan Example";
    }

    greet() {
      return `Hello, ${this.name}!`;
    }
  }

  // 实例化并使用
  const instance = new Example();
  console.log(instance.greet()); // ✅ 正常运行
</script>

⚠️ 重要注意事项

Academic Reader

PDF转Markdown转换器——从PDF文件提取文本、表格和公式，生成干净的Markdown。适用于PDF文档转换、内容提取、解析等场景。

下载

模块作用域限制：type="module" 中声明的变量、类、函数默认为模块级作用域，不会挂载到全局 window 对象。若需在后续 <script> 中访问，应显式导出/导入，或改用以下替代方案。 </script>
环境未清理问题：Khan 编辑器在多次运行时不会重置全局作用域，若使用 var 或无关键字声明，重复运行可能引发 SyntaxError: Identifier 'X' has already been declared。
推荐实践组合：
- ✅ 首选 type="module"：天然支持 class/import/export，且自动隔离作用域；
- ✅ 次选 type="application/javascript" + IIFE：规避全局污染与重复声明问题；
```
<script type="application/javascript">
(function() {
  class Example { /* ... */ }
  window.Example = Example; // 如需全局访问，手动挂载
})();
</script>
```
- ⚠️ 避免裸 var/let/const 在非模块脚本中重复声明（尤其在 Khan 的“重新运行”操作下）。