javascript对象如何创建_怎样访问属性和方法【教程】

7次阅读

对象字面量{}是最常用安全的创建方式,适合静态结构;避免new Object();属性访问用点号或方括号,后者支持变量和特殊字符;方法调用需注意this绑定问题。

javascript对象如何创建_怎样访问属性和方法【教程】

对象字面量是最常用也最安全的创建方式

直接用 {} 创建对象,适合静态结构、一次性初始化的场景。它避免了构造函数可能带来的原型污染或 this 绑定问题。

常见错误:把对象字面量写成带括号的表达式,比如 ({name: "a"}) 在某些上下文中会被误解析为代码块——除非明确需要立即执行,否则去掉括号更稳妥。

示例:

const user = {   name: "Alice",   age: 30,   greet() {     return `Hello, ${this.name}`;   } };
  • 属性名含空格或特殊字符时,必须加引号:{"full name": "Bob"}
  • 方法可省略 function 关键字,用简写语法 greet() { ... }
  • 计算属性名需用方括号:[keyName]: value

new Object() 创建对象容易引发误解

虽然语法合法,但几乎不推荐。它和字面量功能一致,却多写 5 个字符,还容易让人误以为有“类实例化”的语义——实际上 new Object(){} 完全等价,且都继承Object.prototype

立即学习Java免费学习笔记(深入)”;

真正要用 new 的是自定义构造函数或内置类(如 dateregexp),而不是普通对象。

  • 不要写 const obj = new Object({x: 1}) —— 这会把参数当作值传入,不是你想要的对象初始化
  • 如果真要动态构造,优先考虑 Object.assign() 或展开运算符 {...obj1, ...obj2}

访问属性:点号 vs 方括号,区别不止是语法

. 只能访问合法标识符属性名;[] 支持任意字符串、变量、表达式,包括运行时计算的 key。

典型陷阱:user.first name 会报错,因为空格不是合法标识符;而 user["first name"] 正确。

  • 当属性名来自变量时,必须用方括号:const key = "age"; user[key]
  • 嵌套访问时,点号链式调用一旦中间为 undefined 就报 Cannot read Property X of undefined;可用可选链 user?.profile?.avatar 避免崩溃
  • in 操作符检查属性是否存在(含原型链),hasOwnProperty() 只查自身

调用方法时,this 的指向取决于调用方式,不是定义位置

这是最容易出 bug 的地方。函数作为方法被调用(obj.method())时,this 指向 obj;但如果把它赋值给变量再调用(const fn = obj.method; fn()),this 就变成 undefined严格模式)或全局对象(非严格)。

  • 解决方案之一:在对象内用箭头函数定义方法(但注意箭头函数不能作为构造器,且不绑定 this,所以只适用于不依赖 this 的场景)
  • 更通用的做法:用 .bind()call() 或在调用处显式绑定:obj.method.call(obj)
  • 现代写法倾向用 class + # 私有字段 + 箭头方法绑定,或用 useCallbackreact)等工具封装

实际项目里,对象结构常来自 API 响应或配置文件,属性名不可控,这时候方括号访问和可选链就成了刚需;而 this 问题在事件回调、定时器、异步操作中高频出现,光靠记忆规则不如一开始就用显式绑定或箭头函数收口。

text=ZqhQzanResources