为何JavaScript中直接访问对象字面量的属性无效？

核心原因是JavaScript引擎对{}的解析规则存在差异：

第一段能正常运行的代码 #

let user = { name: "John" };

user.name;   // John

这里的{ name: "John" }处于赋值语句的右侧，JS引擎明确将其识别为对象字面量，会正常创建包含name属性的对象并赋值给user变量。后续通过user.name访问对象属性完全符合语法规则，因此能正常运行。

第二段无法运行的代码 #

{ name: "John" }.name or { name: "John" }['name']

这段代码里，开头的{会被JS引擎优先解析为代码块的起始标记，而非对象字面量的开头。里面的name: "John"会被解析成标签语句（name是标签名，"John"是独立的字符串语句），后面的.name或['name']就成了脱离上下文的无效语法，因此会报错。

如果想让第二段代码正常运行，只需给对象字面量加上括号，强制JS引擎将其解析为表达式：

({ name: "John" }).name; // 正常返回"John"
({ name: "John" })['name']; // 同样正常返回"John"

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