为何对象属性prop2中this返回undefined，方法prop3中可正常取值？

核心原因：this的指向规则在两种场景下完全不同 #

我们拆解你的代码，分别看两个场景的this指向：

1. 对象字面量属性初始化时的this

在你创建对象x的字面量中，prop2: this.prop1这行代码里的this，并不指向正在创建的x对象。

JavaScript在解析对象字面量时，属性值的计算是在当前的外部上下文中完成的——也就是你定义这个对象的作用域（这里是全局作用域）。在现代JS的严格模式下（默认模块环境或显式开启严格模式），全局作用域的this是undefined；非严格模式下则指向全局对象（浏览器里是window，Node.js里是globalThis）。

不管哪种情况，这个this都和还没创建完成的x没关系，自然拿不到x.prop1，所以x.prop2最终是undefined。

2. 方法调用时的this

prop3是一个普通函数，当你通过x.prop3()调用它时，遵循JavaScript的调用绑定规则：

• 当函数作为对象的方法被调用时，函数内部的this会自动指向调用这个方法的对象（也就是这里的x）。

所以prop3内部的this.prop1等价于x.prop1，自然能拿到值10。

额外补充：如果想让prop2也能拿到prop1怎么办？ #

如果你希望prop2能直接引用prop1，可以在对象创建后再赋值，或者使用getter：

// 方式1：创建后赋值
let x = {
  prop1: 10,
  prop3: function () {
    return this.prop1
  }
};
x.prop2 = x.prop1;

// 方式2：使用getter
let x = {
  prop1: 10,
  get prop2() {
    return this.prop1;
  },
  prop3: function () {
    return this.prop1
  }
};

用getter的话，每次访问x.prop2时都会重新计算，this此时指向x，就能正确获取prop1。

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