Firefox运行CoffeeScript时报TypeError: Illegal constructor错误的解决方案

首先得说，你碰到的这个问题是典型的「新旧JS语法混合导致的兼容性差异」——Firefox对ES6类的语法规范执行得更严格，而Chrome的V8引擎做了容错处理，所以才会出现一边报错一边正常运行的情况。

先拆解下问题根源：
你提供的编译后JS代码里，错误地把constructor当成了一个独立函数去调用（constructor(function(name) { ... })），这完全违反了ES6类的语法规则——ES6类的constructor必须是类内部的专属方法，根本不能像普通函数那样单独调用，Firefox自然会直接抛出非法构造函数的错误。

具体解决方案 #

1. 升级你的CoffeeScript版本

这个是核心！你用的应该是CoffeeScript 1.x版本，它在编译类的时候会混用旧的原型链写法和ES6类语法，导致生成了非法代码。而CoffeeScript 2.x及以上版本专门针对ES6+语法做了优化，会直接生成标准的ES6类代码（就是你给出的正确编译结果那种）。

如果是通过npm安装的CoffeeScript，执行升级命令：

npm install -g coffeescript@latest

2. 修正CoffeeScript代码里的小bug

你的原CoffeeScript代码里还有个隐藏问题：debug和info方法里的log没有绑定当前实例，需要加上@（也就是JS里的this），否则运行时会找不到log函数：

class Logger
  constructor (@name) ->
  log: (level, msg) -> console.log(level, @name, msg)
  debug: (msg) -> @log('DEBUG', msg)  # 这里加@，绑定实例的log方法
  info: (msg) -> @log('INFO', msg)    # 同样加@
new Logger('foo')

3. 验证编译结果

用新版CoffeeScript编译修正后的代码，就能得到符合ES6规范的类代码，不管是Firefox还是Chrome，都能正常运行，不会再出现构造函数错误。

为什么Chrome能「正常运行」？ #

其实Chrome也不是真的完全没问题，它只是做了容错处理：忽略了非法的constructor(...)调用，转而使用类的默认构造函数——但你的实例name属性其实并没有被正确赋值，只是没抛出错误而已。

内容的提问来源于stack exchange，提问作者Aaron Digulla