JS解构是否会创建新变量？访问解构值是否需要重复访问原对象属性

结论 #

两者没有任何差异，访问解构得到的moreProp和访问直接赋值的morePropAlias一样，都是直接读取本地变量值，不需要重复执行属性访问操作。

原理说明 #

你需要区分两个完全独立的阶段：变量初始化阶段和变量访问阶段：

1. 变量初始化阶段：不管是解构写法还是直接赋值写法，都是在这一步完成两次属性访问，从something里拿到moreProp对应的值，存到新声明的本地变量里。这一步两种写法的底层执行逻辑完全等价，解构只是简化了赋值的写法。
2. 变量访问阶段：初始化完成后，moreProp和morePropAlias都是当前作用域下的独立本地变量，和原始的something对象已经没有绑定关系。你访问这两个变量的时候，JS引擎直接从当前作用域读取变量值，不会再去查找something对象的属性，自然也不会有额外的属性访问开销。

佐证示例 #

你可以通过修改原对象属性的方式验证这个逻辑：

// 修正原代码的对象语法错误（对象属性用冒号赋值）
const something = {
  someProp: {
    moreProp: 5
  }
}

// 解构赋值
const { moreProp } = something.someProp
// 直接赋值
const morePropAlias = something.someProp.moreProp

// 修改原对象的属性值
something.someProp.moreProp = 10

console.log(moreProp) // 输出 5，不是修改后的10
console.log(morePropAlias) // 输出 5，不是修改后的10

如果访问解构变量时会动态查找原对象属性，那么输出的结果应该是修改后的10，实际输出还是初始值5，也验证了解构得到的变量只是存了初始值的本地变量，和原对象无关。

关于语法糖的疑问 #

解构确实是语法糖，但它的简化只作用于赋值阶段，不会对后续的变量访问逻辑产生任何影响。你写的const { moreProp } = something.someProp，在JS引擎执行时和直接写const moreProp = something.someProp.moreProp没有任何底层差异。

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