JavaScript对象创建与属性访问方法

JavaScript对象创建与属性访问没有放之四海而皆准的“标准答案”，关键在于根据实际需求精准匹配：字面量适合轻量、临时的数据封装，class支撑多实例复用与封装性，方括号语法突破标识符限制实现动态访问，而Object.defineProperty和Proxy则专为精细化访问控制（如响应式、日志、权限）而生——选错方式不仅让代码脆弱难维护，还可能引发this指向混乱、undefined错误或后期重构灾难，真正高手的判断力，就藏在这一行代码背后的场景权衡里。

JavaScript 对象创建和属性访问没有唯一“正确”方式，关键看你要什么：是临时存点数据、要复用逻辑、还是需要实例隔离。选错方式会导致后期改起来费劲，甚至出现 undefined 或 this 指向错误。

对象字面量适合快速建单个对象

这是最常用也最安全的起点，适用于配置项、返回值、临时容器等场景。所有属性和方法都直接写在花括号里，不涉及原型或构造上下文。

常见错误是误以为字面量里的函数能自动访问同级属性——其实不能，this 指向取决于调用方式，不是定义位置：

const user = {
  name: 'Alice',
  getName() {
    return this.name; // ✅ 正确：方法被 user.getName() 调用时 this 指向 user
  },
  getBadName: function() {
    return name; // ❌ 报错：name 是未声明变量，不是 this.name
  }
};

要点：

• 属性名带空格或特殊字符必须加引号：{"full-name": "Bob"}
• 属性名是变量？用计算属性名：{[key]: value}
• 想继承已有对象？用 Object.assign() 或展开运算符 {...obj}，别直接改 __proto__

用 class 创建多个结构一致的对象

当你需要生成一堆相似对象（比如用户、订单、DOM 封装器），class 比反复写字面量更可控，也能自然支持私有字段（#field）和继承。

注意：class 声明不会被提升，且必须用 new 调用；否则报 Class constructor User cannot be invoked without 'new'。

示例：

class User {
  #id; // 私有字段
  constructor(name, id) {
    this.name = name;
    this.#id = id;
  }
  getId() {
    return this.#id; // ✅ 只能在类内部访问 #id
  }
}
const u1 = new User('Charlie', 101);

关键区别：

• class 内部方法默认不可枚举（for...in 遍历时看不到）
• 静态方法用 static 关键字，挂载在类本身而非实例上：User.count()
• 不要在 class 中给实例直接赋值函数（如 this.handler = () => {}），会破坏原型链复用性

方括号 vs 点号：什么时候必须用 []？

点号（.name）简洁，但只接受合法标识符；只要属性名含空格、短横线、变量、或运行时才确定，就必须用方括号语法。

典型踩坑：

• obj.user-name → 报错（减法运算）→ 改成 obj["user-name"]
• obj.123 → 报错（数字开头）→ 改成 obj["123"]
• 动态拼接属性名：obj[`data_${type}`]，不能写成 obj.data_${type}
• 访问嵌套属性时，点号链式调用一旦中间为 undefined 就崩：user.profile.address.city → 若 profile 不存在，直接报 Cannot read property 'address' of undefined；可用可选链 user?.profile?.address?.city

Object.defineProperty 和 Proxy 的真实用途

这两个不是“创建对象”的常规手段，而是用于控制访问行为——比如做响应式系统、日志追踪、权限拦截。滥用反而让代码难读难调试。

Object.defineProperty 适合单个属性的精细控制（如只读、不可枚举），但无法监听新增/删除属性；Proxy 能代理整个对象，支持 get/set/has/deleteProperty 等多种 trap，但 IE 完全不支持。

简单示例（拦截赋值）：

const obj = {};
const proxied = new Proxy(obj, {
  set(target, key, value) {
    console.log(`设置 ${key} = ${value}`);
    target[key] = value;
    return true;
  }
});
proxied.count = 5; // 控制台输出日志

提醒：Proxy 返回的是新对象，原对象不受影响；且它对数组索引操作（如 arr[0] = x）同样生效，这点常被忽略。

以上就是《JavaScript对象创建与属性访问方法》的详细内容，更多关于的资料请关注golang学习网公众号！