1

我在 FreeNAS 团队的错误跟踪器上向 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”。我已经在 FreeNAS 构建/WebUI 系统中跟踪到该文件的第 69 行，其中文件名显然在 webpack 构建它时被引用，但我不知道如何追溯到它的起源，看看哪个这个片段来自的模块，或者如果有关于该模块来自的任何项目的上游错误报告。

4

1 回答 1

2

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

JS 中的类只是一个非常非常糟糕的主意，它试图将 OO 结构从不同的语言强制执行到根本不适合以这种方式做事的东西。

也没有理由使用类本身，因为使用类所做的任何事情都可以通过基本且完全兼容的 JS 原型使用​​来完成。原型设计是有原因的。用它。

对于使用“类”语法并希望其代码与 IE、PaleMoon 和其他不符合标准的浏览器兼容的开发人员的一般解决方案是将Babel集成到他们的构建过程中，这可以自动转换代码库的 ES6+ 语法（包括"class" 关键字）转换为 ES5 语法。例如：

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);
};
于 2018-11-30T04:54:12.307 回答