提问人:Stilez 提问时间:11/29/2018 最后编辑:Stilez 更新时间:11/30/2018 访问量:229
为什么这是 IE11 和 Pale Moon 中的错误?
Why is this an error in IE11 and Pale Moon?
问:
我在他们的错误跟踪器上向 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 控制台的说法,正是该行在某些浏览器中导致致命的语法错误,并杀死了 GUI 加载脚本。Pale Moon 指出,问题在于误用了保留字“class”,IE11 只是指向同一个词并报告语法错误。但在其他浏览器上,这很好。class r{}
直觉上,我预计即使在臭名昭著的不同浏览器和 JS 引擎中,保留字滥用这样一个关键的 JS 词也会相当明确(显然不是?),所以我很感兴趣。这是怎么回事?
理想情况下(如果能够提供帮助),我怎样才能找到这个代码片段的上游源代码,这样我就可以看看它的问题/错误跟踪器?
源代码:代码片段来自 FreeNAS 11.2-RC2 中的文件“main.57ebfd2da123881a1a70.bundle.js”。我已经在 FreeNAS 构建/WebUI 系统中追踪到该文件的第 69 行,当 webpack 构建它时,文件名显然被引用,但我无法弄清楚如何追溯到它的来源,看看这个片段来自哪个模块,或者是否有关于该模块来自的任何项目的上游错误报告。
答:
class
是一个 ES6 (ES2015) 关键字,适用于大多数浏览器,但不适用于 IE 等古老的浏览器(IE 的最后一个版本 IE11 于 2013 年发布)。尽管 PaleMoon 表示他们大多符合 ES6 标准,但它似乎还不支持 - 创始人的观点是:class
JS 中的类只是一个非常非常糟糕的主意,它试图将 OO 结构从不同的语言强制执行到根本不为以这种方式做事而设计的东西。
也没有理由使用类本身,因为使用类完成的任何事情都可以通过基本且完全兼容的 JS 原型来完成。原型设计的存在是有原因的;使用它。
对于使用“class”语法并希望其代码与 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);
};
评论
class
class