如何在 JavaScript 对象字面量中引用自身属性-js教程-PHP中文网

如何在 JavaScript 对象字面量中引用自身属性

在对象字面量中无法直接用 this.entry 动态生成属性值（如 image），因为此时对象尚未完全创建，this 不指向该对象；正确方式是使用 getter 方法或构造后映射处理。

在对象字面量中无法直接用 `this.entry` 动态生成属性值（如 `image`），因为此时对象尚未完全创建，`this` 不指向该对象；正确方式是使用 getter 方法或构造后映射处理。

JavaScript 对象字面量在初始化时是静态求值的：所有属性值在对象创建瞬间即被计算，而 this 在普通属性赋值中并不绑定到当前对象（此时对象甚至还未完成构建），因此 this.entry 会返回 undefined。

✅ 正确解法一：使用 getter 属性
通过 get image() 定义一个访问器属性，它会在每次读取 obj.image 时动态执行函数，并正确绑定 this 到当前对象：

const test = [
  {
    entry: "001",
    name: "Name",
    types: ["type1"],
    get image() {
      return `link/${this.entry}`;
    }
  },
  {
    entry: "002",
    name: "Another Name",
    types: ["type2"],
    get image() {
      return `link/${this.entry}`;
    }
  }
];

console.log(test[0].image); // "link/001"
console.log(test[1].image); // "link/002"

⚠️ 注意事项：

Getter 是惰性求值的——仅在访问时执行，不会在对象创建时预先计算；
不能通过 JSON.stringify() 序列化 getter 属性（它会被忽略）；
若需序列化 image，应改用方法调用（如 obj.getImage()）或预计算字段。

✅ 更灵活的解法二：使用 map() 构造时动态计算
适用于批量初始化、需持久化字段或兼容 JSON 的场景：

const rawData = [
  { entry: "001", name: "Name", types: ["type1"] },
  { entry: "002", name: "Another Name", types: ["type2"] }
];

const test = rawData.map(item => ({
  ...item,
  image: `link/${item.entry}`
}));

console.log(test[0].image); // "link/001" —— 真实属性，可序列化

? 进阶建议：封装为工厂函数，提升复用性与可维护性：

javascript-typescript-typescript-scaffold

你是 TypeScript 项目架构专家，专注于脚手架搭建生产就绪的 Node.js 和前端应用。生成包含现代工具链（pnpm、Vite、Next.js）、类型

下载

const createEntry = ({ entry, name, types = [] }) => ({
  entry,
  name,
  types,
  get image() {
    return `link/${this.entry}`;
  }
});

const test = [
  createEntry({ entry: "001", name: "Name", types: ["type1"] }),
  createEntry({ entry: "002", name: "Other", types: ["type2"] })
];

总结：对象字面量内不可直接 this.xxx 引用自身属性；优先选择 getter（语义清晰、按需计算）或 map 预计算（数据驱动、兼容序列化）。根据实际需求（是否需要响应式、是否导出 JSON、是否高频访问）合理选型。