严格模式下Uncaught SyntaxError错误：arguments参数名使用异常求助

问题根源 #

你遇到的错误核心原因是：ES6类的内部代码默认运行在严格模式下，而在严格模式中，arguments是一个保留的关键字/标识符，不能被用作函数的参数名——不管你用箭头函数还是普通函数声明，都会触发这个语法错误。

而你在Chrome控制台能正常运行的原因是：控制台的全局执行环境默认没有开启严格模式，所以不会限制arguments作为参数名的使用。

解决方案 #

只需要把参数名从arguments改成其他合法的标识符（比如args），就能解决这个问题。修改后的代码如下：

class MetricGoogleGateway extends AMetricGateway{
 constructor(id, name, token) {
 super(id, name);
 this.token = token;
 }
 configure() {
 if(!window.dataLayer && !window.gtag) {
 window.dataLayer = window.dataLayer || [];
 // 把参数名从arguments改为args，用扩展运算符接收任意参数
 window.gtag = (...args) => dataLayer.push(args);
 }
 gtag('js', new Date());
 gtag('config', 'UA-113071675-1');
 }
}

如果偏好普通函数写法，修改后是这样：

window.gtag = function(...args) { dataLayer.push(args) };

这里用扩展运算符...args能优雅接收任意数量的参数，和你原本用arguments的意图完全一致。

补充说明 #

ES6的类语法会自动启用严格模式，这意味着类内部的所有方法、嵌套函数都必须遵守严格模式的规则，包括：

• 不能使用arguments作为变量名或参数名
• 不能使用违规的eval操作
• 禁止删除变量、函数或参数
• 禁止八进制数字语法
• 等等

这也是为什么你在类里面的代码会报错，而控制台全局环境不会的核心差异。

内容的提问来源于stack exchange，提问作者Ricardo Rocha