javascript - 为什么这是 IE11 和 Pale Moon 中的错误？

Question

我在他们的 bug tracker 上向 FreeNAS 团队报告了一个 Javascript 错误，与他们即将发布的版本有关，由于一些不太常见的浏览器上的 JS 语法错误，该版本将无法运行，但我很好奇为什么这是一个错误。

该代码片段在 Win8.1 默认浏览器 (IE11) 和 Pale Moon(基于 Firefox)浏览器上引发了一个定义明确的错误，但在 Firefox 或 Vivaldi(基于 Chrome)上没有错误。代码实际上做了什么，为什么它会在这些浏览器中触发保留字错误/语法错误？

代码很难追踪，它看起来像一个 webpack 缩小文件，而且我对基础 + 构建系统不够熟悉，无法在打包之前跟踪它的最终来源。

触发错误的相关代码片段在浏览器控制台中如下所示:

webpackJsonp([20], {

  ... long list of function defs ...

  BFiu: function(t, e, n) {
    "use strict";
    n.d(e, "a", function() {
      return r
    });
    var o = n("HcJ8");
    n.n(o);
    let i = {
      Queue: 0,
      Uploading: 1,
      Done: 2,
      Cancelled: 3
    };
    i[i.Queue] = "Queue",
    i[i.Uploading] = "Uploading",
    i[i.Done] = "Done", 
    i[i.Cancelled] = "Cancelled";
    class r {}
  },

  ... more function defs ...

},
[0]);

根据 JS 控制台，是 class r{} 这行在某些浏览器中导致了致命的语法错误，并终止了 GUI 加载脚本。 Pale Moon 指出问题是滥用保留字“class”，IE11 只是指向同一个字并报告语法错误。但是在其他浏览器上没问题。

凭直觉，我认为即使在众所周知的不同浏览器和 JS 引擎中，对这样一个关键 JS 词的保留字滥用也会得到相当明确的定义(显然不是？)，所以我很感兴趣。怎么回事？

理想情况下(如果能够提供帮助)，我如何才能找到此代码片段的上游源代码，以便查看其问题/错误跟踪器？

源代码:代码片段来自FreeNAS 11.2-RC2中的文件“main.57ebfd2da123881a1a70.bundle.js”。我一直追踪到 this file 的第 69 行在 FreeNAS 构建/WebUI 系统中，当 webpack 构建它时，文件名显然被引用，但我无法弄清楚如何追溯到它的来源，看看这个片段来自哪个模块，或者是否有上游错误报告在模块来自的任何项目上。

Answer 1

class 是一个 ES6 (ES2015) 关键字，适用于大多数浏览器，但不适用于 IE(IE11 的最新版本，于 2013 年发布)等古老的浏览器。尽管 PaleMoon 声明它们是 mostly符合 ES6，它似乎还不支持 class - founder的意见是:

Classes in JS are simply a really, really bad idea, trying to enforce OO structures from a different language to something that is simply not designed to do things that way.

There's also no reason to use classes per se, as anything done with classes can be done with basic and completely compatible use of JS prototypes. Prototyping is there for a reason; use it.

对于使用“类”语法并希望他们的代码与 IE、PaleMoon 和其他不符合标准的浏览器兼容的开发人员来说，一般的解决方案是集成 Babel进入他们的构建过程，它可以自动将代码库的 ES6+ 语法(包括“class”关键字)转换为 ES5 语法。 For example :

class Foo {
}

变成

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  _classCallCheck(this, Foo);
};