JavaScript对象自定义方法未调用时访问方法内新增属性返回undefined问题排查

你当前代码的核心问题非常明确：你从未调用过对象上的calcAge方法。
你写在calcAge函数内部的this.age = 2030 - this.birthYear这段赋值逻辑，只有当calcAge被显式触发执行时才会运行。而你直接在初始化完成后就读取different.age时，这段逻辑根本没执行过，对象上从来没有被赋值过age属性，自然读到的是undefined。

执行逻辑拆解 #

• 对象初始化阶段，只会把所有定义的键值对直接挂到different上，其中calcAge的属性值是一个函数引用，函数内部的代码块不会被自动执行
• 你执行console.log(different.age)时，JS会沿着different的属性链查找age字段，因为之前从来没有任何代码给这个字段赋过值，查找结果就是undefined
• 2030减1998等于32的计算结果，只会在calcAge被调用的时候生成，不会在对象定义时自动算好存在对象上

修正后的可正常运行的代码 #

const different = {
  macka: "Sofia",
  pes: "Bruno",
  birthYear: 1998,
  number: 14,
  string: "Hello it is a string",
  hasBlueEyes: true,
  calcAge: function () {
    this.age = 2030 - this.birthYear;
    return this.age;
  }
};

// 先调用calcAge，触发内部的age属性赋值
different.calcAge();
console.log(different.age); // 输出32，符合预期

补充说明：不要误以为对象字面量的顶层可以直接通过this引用同对象的其他属性来计算age，这种写法下this不会指向当前创建的对象，很容易踩坑。如果不需要复用计算逻辑，完全可以直接把age按固定计算结果写成普通属性即可。

内容的提问来源于stack exchange，提问作者Miloš Leng