在JavaScript或Vue中能否通过新属性访问原有属性？赋值异常排查

你遇到的问题是因为在对象字面量初始化阶段，this并不指向当前正在创建的person对象，所以this.title取不到值，返回undefined，最终拼接出undefinedObject。

下面是几种可行的解决方式：

1. 使用getter方法动态计算属性值 #

通过定义getter函数，访问属性时才会执行计算，此时this会正确指向当前对象：

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  title: "Style",
  get styleTitle() {
    return this.title + "Object";
  },
  eyeColor: "blue"
};

访问person.styleTitle时就能得到StyleObject。

2. 先创建对象再赋值属性 #

先完成对象的初始化，再通过对象本身引用title属性来赋值：

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 50,
  title: "Style",
  eyeColor: "blue"
};
person.styleTitle = person.title + "Object";

3. 在Vue中使用计算属性（更推荐） #

如果是在Vue组件里，直接用Vue的计算属性来处理，比在data对象里硬写更符合Vue的响应式逻辑：

<script>
export default {
  data() {
    return {
      person: {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        title: "Style",
        eyeColor: "blue"
      }
    };
  },
  computed: {
    styleTitle() {
      return this.person.title + "Object";
    }
  }
};
</script>

如果一定要把styleTitle放在person对象内，也可以在组件的mounted钩子中完成赋值：

<script>
export default {
  data() {
    return {
      person: {
        firstName: "John",
        lastName: "Doe",
        age: 50,
        title: "Style",
        eyeColor: "blue"
      }
    };
  },
  mounted() {
    this.person.styleTitle = this.person.title + "Object";
  }
};
</script>

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