JSON 里的 key 叫 this 怎么取值：从保留字讲到方括号写法

先给结论：对象里有一个名为 this 的属性时，用 obj["this"] 取值最稳。点写法 obj.this 在 ES5 之后的浏览器里其实合法，但它容易和函数里的 this 关键字混淆，也会被旧解析器和部分压缩工具判为异常。

之所以会有这个疑问，是因为 this 在 JavaScript 里是个特殊关键字。看到 obj.this 这种写法，大多数人第一反应是"这会不会被当成关键字解析"，于是改成各种绕法，反而把简单问题复杂化了。

本文先用最小例子把四种取值写法跑一遍，再讲清保留字作属性名的规则边界，最后给出在解构、TypeScript 和压缩场景下各自该怎么选。示例用原生 JavaScript，Node 与浏览器里结果一致。

先看结论

• 属性名可以是保留字，ES5 之后 obj.this 是合法写法，但可读性差、工具链兼容性不一。
• 方括号写法 obj["this"] 在任何环境都成立，是可维护性最高的选择。
• 解构时必须重命名：const { this: self } = obj 才合法，直接写 const { this } = obj 会报语法错误。

对象与属性的规则还有不少细节，JavaScript 教程 里有按主题分组的说明，查语法时比翻规范快。

一、最小场景与预期行为

把任务定死：接口返回一段 JSON，其中有一个字段的名字恰好是 this。要求把它取出来赋给一个普通变量。

输入是这段字符串。预期行为是：解析后能取到值 1，且不产生语法错误。

const raw = '{"this": 1, "that": 2}';
const obj = JSON.parse(raw);

console.log(obj["this"]);   // 1
console.log(obj.this);      // 1（ES5+ 合法）

这段做的是：先把字符串解析成对象，再用两种写法取同一个属性。两个 console 都输出 1，因为属性访问器的语法允许标识符位置出现保留字。

关键点在于：这里的 this 出现在成员表达式的标识符位置（MemberExpression . IdentifierName），而不是表达式位置。规范里 IdentifierName 包含保留字，所以 obj.this 能通过解析。

二、为什么这件事会让人犹豫

犹豫来自两个真实的兼容性历史，不是错觉。

第一个是老浏览器的行为。IE8 及更早的版本里 obj.this 会抛语法错误，那个年代的前端被训练成"保留字一律用方括号"。这个习惯延续到了今天，很多人并不知道它已经在 ES5 里被修正。

第二个是压缩与转译工具。部分老版本的压缩器在遇到 obj.this 时会保守处理，或在某些配置下输出异常。即便现代工具基本都能正确处理，团队规范里通常仍然禁止这种写法。

所以结论不是"能不能用"，而是"值不值得用"。答案是不值得——方括号写法零成本，却能避开一整类工具链与阅读上的歧义。

三、四种取值写法与取舍

3.1 方括号写法：默认选它

const value = obj["this"];

这段做的是用字符串索引读取属性。它不是"绕过去的技巧"，而是属性访问的标准形式之一——所有属性名本质上都是字符串，方括号只是把这一点显式写出来。

方括号还有一个额外好处：属性名可以来自变量。

const key = "this";
const value = obj[key];

这段做的是把属性名存进变量再访问。点写法做不到这一点，这也是动态取值场景只能走方括号的原因。

3.2 点写法：能用但别用

const value = obj.this;   // 合法，但不推荐

这段做的是用点语法读名为 this 的属性。它在现代运行环境里能跑通，但读代码的人要停顿一下才能确认这是属性名而不是关键字，代码评审时也会被挑出来。

团队规范里通常直接禁用这种写法。理由不是功能，是心智负担：一段需要读者停下来确认语义的代码，本身就是成本。

3.3 解构：必须重命名

const { this: self } = obj;
console.log(self);   // 1

这段做的是在解构模式里把名为 this 的属性绑定到一个新名字 self 上。冒号左边是属性名，右边是新的变量名。

下面这种写法是不合法的，会直接抛语法错误：

const { this } = obj;   // SyntaxError

这段做的是试图把属性直接绑定到一个名为 this 的变量上。this 是不能作为变量名（绑定标识符）的，只能作为属性名（IdentifierName），这两个位置在规范里的规则不同——这正是整件事的核心区别。

3.4 可选链与空值场景

对象可能为空时，把方括号和可选链组合起来：

const value = obj?.["this"] ?? 0;

这段做的是：对象为空时短路返回 undefined，再用空值合并运算符兜底成 0。注意可选链与方括号之间要保留问号和点号，写成 obj?["this"] 是语法错误。

四、常见失败与验证清单

4.1 报 SyntaxError：Unexpected token this

出现在 const { this } = obj 这类写法上。修复办法是重命名：const { this: self } = obj。记住规则：this 能当属性名，不能当变量名。

4.2 取值得到 undefined

多半是 JSON 里的字段名带了空格或大小写不一致。修复办法是先 Object.keys(obj) 打印一遍真实属性名，确认没有隐藏字符。

4.3 TypeScript 里类型报错

接口定义里同样可以写 "this"，但要用引号包起来：

interface Item {
  "this": number;
  "that": number;
}
const value: number = obj["this"];

这段做的是在类型定义里把保留字属性名写成字符串字面量，取值时同样走方括号。不写引号在这个位置是允许的，但加上更清晰。

4.4 验证清单

• 检查：先 Object.keys(obj) 打印真实属性名
• 运行：分别用 obj["this"] 与 obj.this 取值，对比输出
• 预期：两者都返回同一个值，不报错
• 失败：解构时报 SyntaxError → 检查是否漏了重命名
• 修复：改成 const { this: self } = obj
• 验证：在 Node 与浏览器控制台各跑一次，结果应一致

上面这些步骤做的是确认属性名、跑通两种访问方式、跨环境比对。预期结果（未在本机执行）是两个环境输出一致；若 Node 里通过而旧浏览器报错，说明命中了 ES5 之前的实现。

总结

名为 this 的属性可以用 obj["this"] 直接取，点写法在 ES5 之后虽然合法但不推荐。真正的硬限制只有一条：this 不能作变量名，所以解构时必须重命名。

三条要点带走：

• 属性名位置允许保留字，变量绑定位置不允许，这是全部差异的根源；
• 方括号写法兼容所有环境，还能接受变量作为属性名，默认选它；
• 可选链配方括号要写成 obj?.["this"]，漏掉点号就是语法错误。

下一步建议在项目里统一约定：凡是保留字或含特殊字符的属性名，一律走方括号访问，写进 lint 规则里自动检查。语法细节记不清时，翻 Javascript Guide 教程 最快。

常见问题

Q：obj.this 到底合不合法？

A：ES5 之后合法。保留字可以出现在成员表达式的标识符位置，规范里这个位置叫 IdentifierName，包含所有保留字。

Q：为什么 const { this } = obj 会报错？

A：解构冒号左边是属性名，右边是变量名。this 不能作变量名，所以必须写成 const { this: self } = obj 换个名字。

Q：JSON 里出现这种字段名正常吗？

A：接口设计上不建议，但第三方接口里确实存在。前端能做的是用方括号取值，不要为了这个字段去改接口的解析方式。

Q：方括号和点写法性能有差别吗？

A：现代引擎里没有可感知的差别。选方括号是为了兼容性与可读性，不是为了性能。

Q：TypeScript 里要不要给属性名加引号？

A：可加可不加，加上更清晰。类型定义里写 "this": number 与取值时写 obj["this"] 是一致的一套写法。

延伸学习

想把对象与属性这块补完整，可以按这个顺序来：

1. 读一篇相关笔记 JavaScript 控制台是什么，把调试与验证的方法看清；
2. 想理解原型链上的属性查找，翻 Javascript Prototype 教程；
3. 想对照语法规范，JAVASCRIPT Tongyilingma 教程 里有逐条说明。