为何这段JavaScript代码会抛出‘Unexpected token :’错误？

这个错误的根源其实很常见，咱们一步步拆解来看：

先看你标注了//This line!!!附近的代码片段：

return { 
  firstName: firstName, 
  lastName: lastName, //This line!!! 
  getFullName: function() { 
    return this.firstName + " " + this.lastName; 
  }, 
  greet: function(person) { 
    alert("Hello, " + person.getFullName() + "I'm " + this.getFullName()); 
  } 
};

最可能的错误原因有两个：

• 自动分号插入（ASI）导致的语法断裂：
  如果你实际写代码时，把return单独放在一行，下一行才写{，JavaScript的自动分号插入机制会在return后面自动加一个分号，变成return;。这时候后面的{ ... }会被当成独立的代码块，代码块里的firstName: firstName会被解析为标签语句，而后续lastName: lastName里的冒号就会因为不符合标签语句的语法规则，抛出Unexpected token :错误。

• 注释位置误覆盖代码：
  要是你不小心把//This line!!!写在了逗号和下一个属性的同一行，比如：

  lastName: lastName, //This line!!! getFullName: function() {
  

  那么//后面的所有内容都会被当成单行注释，包括getFullName: function() {，导致下一行的return this.firstName + ...变成游离在对象字面量之外的代码，进而引发语法错误。

另外还有一种少见的情况：某些非常老旧的JavaScript引擎（比如IE8及以下）不支持对象字面量中属性末尾的逗号（哪怕后面还有其他属性），不过这种情况现在已经很少遇到了。

对应的解决办法也很直接：

• 确保return和对象字面量的{在同一行，避免自动分号插入；
• 检查注释位置，别让单行注释覆盖掉后面的代码；
• 如果是兼容旧环境，可以去掉属性之间的尾逗号（现在大部分环境已经支持尾逗号了）。

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