Khan Academy 的 HTML 编辑器因使用过时的 JavaScript 解析器（Esprima 旧版）而无法识别 ES6 class 语法，报“Unexpected reserved word”错误；可通过设置 绕过语法检查，或采用 IIFE、var 声明等兼容写法解决。
khan academy 的 html 编辑器因使用过时的 javascript 解析器（esprima 旧版）而无法识别 es6 `class` 语法，报“unexpected reserved word”错误；可通过设置 `<script type="module">` 绕过语法检查，或采用 iife、`var` 声明等兼容写法解决。</script>
Khan Academy 的在线网页编辑器（Live Editor）并非运行标准浏览器环境，其底层依赖定制化的代码解析与校验机制：它先用 Slowparse 对 HTML 进行预处理，再调用一个近十年前版本的 Esprima 解析 JavaScript。由于该 Esprima 版本发布于 ECMAScript 2015（ES6）标准之前，完全不支持 class、const、let、箭头函数等现代语法，因此即使代码本身完全合法，也会在 lint 阶段被拦截并抛出 Unexpected reserved word 错误。
✅ 推荐解决方案：使用 <script type="module"></script>
Khan Academy 的 Slowparse 仅对 type 为空或显式为 "text/javascript" 的 <script> 标签执行 JS 语法校验；而 type="module" 被其视为“非标准脚本”，直接跳过解析，交由浏览器原生模块系统执行（现代浏览器均支持）。修改后代码如下：</script>
<meta charset="utf-8"><title>Fixed Example</title><canvas id="canvas"></canvas><script type="module">
class Example {
constructor() {
console.log("Class instantiated!");
}
}
// ✅ 正常运行，无语法错误
const instance = new Example();
</script>
⚠️ 注意事项与替代方案
使用 type="module" 会带来两个关键行为变化：
- 模块作用域默认启用：变量、函数、类不会自动挂载到全局 window，避免命名污染，但也意味着 Example 无法在控制台直接访问（需显式 export + import）；
- 严格模式自动开启：无需手动写 'use strict'；
- 顶层 await 可用（如需异步初始化）。
若需保留全局可访问性，或需兼容更旧行为，可选用以下两种方式：
? 方式二：使用未识别的 type 值 + IIFE（立即执行函数表达式）
例如 type="application/javascript" 或 type="text/ecmascript" —— Khan 不校验这些类型，但需自行管理作用域：
<script type="application/javascript">
(function() {
// 所有代码包裹在闭包内，避免全局污染
class Example {
constructor() { /* ... */ }
}
window.Example = Example; // 显式挂载到全局（如需）
})();
</script>
? 方式三：降级为函数构造器（ES5 兼容写法）
完全规避 class，改用传统构造函数：
function Example() {
// 构造逻辑
}
Example.prototype.method = function() { /* ... */ };
? 重要提醒：Khan Academy 编辑器不会在每次运行前彻底重置全局环境（参见 webpage-output.js#L330），重复运行含 const/let 重复声明或多次定义同名 class 的代码将导致 SyntaxError（仅在浏览器控制台可见）。因此，强烈建议始终使用模块化封装或 IIFE，避免顶层声明冲突。
综上，<script type="module"> 是最简洁、安全且符合现代实践的修复方案；若教学场景需强调兼容性或调试便利性，再辅以 IIFE 或函数构造器作为备选。</script>
