JavaScript对象字面量内用this访问属性返回undefined问题咨询

根本原因 #

对象字面量在求值构建的阶段，代码里的this根本不会指向正在搭建的新对象，完全继承当前代码所在执行上下文的this指向。
比如在浏览器全局环境跑这段代码，这个瞬间外层上下文的this指向全局window对象，this.d读的是window下的d属性——全局根本没定义过这个变量，自然返回undefined。哪怕你在同一个对象字面量里明明白白写了d:'desk'，也不影响这个求值逻辑。

这里要澄清规则的适用边界：w3schools提到的“对象中的this指向对象本身”，只针对对象方法被该对象触发调用时的this绑定规则，完全不适用于对象字面量定义阶段的this行为。

两种写法完全不等效 #

你疑惑的e:toy.d和e:this.d，在当前场景下都拿不到期望的值，核心是存在求值时间差：

• 对象字面量的执行顺序是：从左到右依次计算每个属性的右侧值，把所有属性拼装成完整的新对象，最后一步才会把这个新对象赋值给等号左边的toy变量
• 当代码执行到计算e属性值的瞬间，toy变量还没和这个正在构建的新对象绑定：
  • 写e:this.d，读的是外层上下文的d属性，和当前正在搭建的对象没有任何关系
  • 写e:toy.d，读的是之前已经存在的toy变量（如果从来没定义过toy，甚至会直接报ReferenceError），根本不是当前这个新对象的d属性

可行的实现方案 #

如果需要让e属性引用同对象的d属性值，两种常见写法可以实现：

• 等整个对象构建完成、变量绑定结束后，再给e属性补赋值：

  var toy = {
      a:'car',
      b:'bus',
      c:'truck',
      d:'desk'
  };
  toy.e = toy.d;
  

• 如果想在对象字面量内部实现属性联动读取，可以用getter语法：

  var toy = {
      a:'car',
      b:'bus',
      c:'truck',
      d:'desk',
      get e() {
          // getter在属性被访问时才执行，此时整个对象已经构建完成，访问时this自然指向toy本身
          return this.d
      }
  };
  

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