javascript对象如何创建_访问属性和方法的技巧是什么【教程】

JavaScript对象创建无唯一正确方式,需据场景选择:日常用{},精确控制原型用Object.create();属性访问.要求合法标识符,[]支持动态键;this指向由调用方式决定,易因解构丢失;属性描述符影响可写/可枚举/可配置性。

JavaScript 对象的创建和属性/方法访问没有唯一“正确”方式,关键看场景:需要实例共享?要控制属性可枚举性?是否涉及原型链污染?是否在严格模式下运行?

用字面量还是 Object.create()

日常开发中优先用对象字面量 {},简洁、可读性强、V8 引擎优化充分;但若需精确控制原型链(比如创建无原型对象或复用特定原型),必须用 Object.create(null)Object.create(prototype)

  • {} 默认继承 Object.prototype,带 toStringhasOwnProperty 等方法,可能引发意外行为(如遍历时出现非预期键)
  • Object.create(null) 返回真正空对象,适合做哈希表、配置缓存等,避免原型链干扰
  • Object.create(Animal.prototype) 是实现继承的经典写法,比 new Animal() 更轻量,不执行构造函数

.[] 访问属性的区别在哪

点号 . 要求属性名是合法标识符且编译期已知;方括号 [] 支持动态计算、含特殊字符或保留字的属性名,但每次访问都触发一次属性查找。

  • 允许:obj.nameobj['first name']obj[Symbol('id')]obj[computedKey]
  • 不允许:obj.123(非法标识符)、obj.my-name(减号不是属性访问操作符)
  • 注意:obj?.['key'] 是合法的可选链写法,但 obj?.key 更常用;若 key 可能为 undefinednull,必须用 [] 配合可选链或空值合并

方法定义时,this 指向为什么会变?

函数内部 this 不由定义位置决定,而由**调用方式**决定。对象方法被解构、传参、赋值给变量后,原始绑定丢失,this 指向全局或 undefined(严格模式)。

  • 常见错误:const { handleClick } = obj; button.addEventListener('click', handleClick);this 不再是 obj
  • 修复方式:用箭头函数包装 () => obj.handleClick();或在构造函数中绑定 this.handleClick = this.handleClick.bind(this);ES2025 起可直接写类字段 handleClick = () => { ... }
  • 注意:Object.defineProperty(obj, 'method', { value: function() { ... } }) 定义的方法默认不可写、不可枚举,会影响 for...in 遍历和 JSON.stringify

真正容易被忽略的是属性描述符(writableenumerableconfigurable)对访问行为的影响——它们不改变语法,却决定属性能否被修改、遍历或删除,调试时若发现属性“看不见”或“改不了”,先查 Object.getOwnPropertyDescriptor()