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

发布时间 - 2026-01-09 00:00:00    点击率:
对象字面量{}最安全,避免new遗漏和原型污染;属性名含空格需引号;方法是函数值,支持简写;计算属性用[key];点号访问合法标识符,方括号支持动态键;this绑定取决于调用方式;Object.defineProperty默认不可枚举。

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

直接用 {} 创建对象,适合一次性定义结构明确的数据。它天然避免了构造函数调用时忘记 new 的问题,也不涉及原型链污染风险。

常见错误是误把逗号写在最后一项后面(虽然现代引擎大多容忍,但 IE8 及更早版本会报 Unexpected token });还有人试图在字面量里写方法体带 return 语句却忘了加函数关键字。

  • 属性名含空格或特殊字符必须用引号包裹:{"user name": "Alice"}
  • 方法就是值为函数的属性:sayHi: function() { return "Hi"; } 或简写为 sayHi() { return "Hi"; }
  • 计算属性名用方括号:[keyName]: "value",其中 keyName 是变量

点号和方括号访问属性,适用场景完全不同

. 只能访问合法标识符命名的属性,写法简洁;[] 支持动态键名、数字索引、保留字甚至表达式,但性能略低且易因类型转换出错(比如 obj[1] 实际查的是 "1" 这个字符串键)。

典型翻车现场:把 obj.user.name 写成 obj["user.name"] —— 后者查的是名为 "user.name" 的单一属性,不是嵌套路径。

  • 点号访问:obj.nameobj.sayHi()
  • 方括号访问:obj["first name"]obj[variableKey]obj[123]
  • 访问不存在属性返回 undefined,不会报错;但对 undefined 调用方法会抛 TypeError

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

这是最容易被忽略的复杂点。同一个函数赋给不同对象,this 就不同;从对象上取出来单独调用,this 会丢失(非严格模式下指向全局,严格模式下为 undefined)。

例如:

const obj = {
  name: "Bob",
  greet() { console.log("Hello, " + this.name); }
};
const fn = obj.greet;
fn(); // 输出 "Hello, undefined"(严格模式)或报错

  • 保持 this 绑定可用 bind、箭头函数(但箭头函数不能作为构造函数)、或调用时用 call/apply
  • 类方法默认不自动绑定,React 类组件中常需在 constructor 里手动 bind 或改用箭头函数
  • 对象方法内访问自身其他属性,必须显式通过 this.xxx,不能省略 this

Object.defineProperty 和可枚举性影响 for...inJSON.stringify

Object.defineProperty 添加的属性默认不可枚举(enumerable: false),这意味着它不会出现在 for...in 循环里,也不会被 JSON.stringify 序列化——这点常被忽略,导致调试时“看不见”某些属性。

例如:

const obj = {};
Object.defineProperty(obj, "secret", {
  value: "hidden",
  enumerable: false
});
console.log(JSON.stringify(obj)); // "{}"

  • 想让属性参与遍历和序列化,必须显式设 enumerable: true
  • Object.keys() 只返回可枚举自有属性,Object.getOwnPropertyNames() 才包含不可枚举的
  • 现代开发中更推荐用 class 或私有字段 #field 控制可见性,而非依赖 enumerable
属性名是否合法、访问方式是否匹配、this 是否按预期绑定、以及属性是否可枚举——这四点覆盖了 90% 的实际坑。写的时候多看一眼控制台输出的完整对象结构,比背规则管用。


# react  # javascript  # java  # js  # json  # app 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何在万网主机上快速搭建网站?  如何用低价快速搭建高质量网站?  Laravel如何创建自定义中间件?(Middleware代码示例)  Laravel用户密码怎么加密_Laravel Hash门面使用教程  如何在云主机上快速搭建多站点网站?  网页设计与网站制作内容,怎样注册网站?  Java Adapter 适配器模式(类适配器,对象适配器)优缺点对比  Linux虚拟化技术教程_KVMQEMU虚拟机安装与调优  如何为不同团队 ID 动态生成多个“认领值班”按钮  Windows Hello人脸识别突然无法使用  Laravel怎么实现一对多关联查询_Laravel Eloquent模型关系定义与预加载【实战】  如何在阿里云高效完成企业建站全流程?  如何在Windows环境下新建FTP站点并设置权限?  Laravel如何实现用户注册和登录?(Auth脚手架指南)  教你用AI润色文章,让你的文字表达更专业  如何快速查询域名建站关键信息?  通义万相免费版怎么用_通义万相免费版使用方法详细指南【教程】  Bootstrap CSS布局之列表  如何用wdcp快速搭建高效网站?  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  如何在IIS中新建站点并配置端口与IP地址?  Laravel如何保护应用免受CSRF攻击?(原理和示例)  如何快速查询网站的真实建站时间?  如何用PHP快速搭建高效网站?分步指南  Python正则表达式进阶教程_复杂匹配与分组替换解析  悟空识字怎么关闭自动续费_悟空识字取消会员自动扣费步骤  Laravel如何实现文件上传和存储?(本地与S3配置)  怎么制作网站设计模板图片,有电商商品详情页面的免费模板素材网站推荐吗?  Laravel如何使用缓存系统提升性能_Laravel缓存驱动和应用优化方案  如何在建站之星绑定自定义域名?  详解Android——蓝牙技术 带你实现终端间数据传输  php485函数参数是什么意思_php485各参数详细说明【介绍】  Laravel控制器是什么_Laravel MVC架构中Controller的作用与实践  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  HTML透明颜色代码怎么让图片透明_给img元素加透明色的技巧【方法】  Laravel定时任务怎么设置_Laravel Crontab调度器配置  安克发布新款氮化镓充电宝:体积缩小 30%,支持 200W 输出  高配服务器限时抢购:企业级配置与回收服务一站式优惠方案  网易LOFTER官网链接 老福特网页版登录地址  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  Windows10电脑怎么查看硬盘通电时间_Win10使用工具检测磁盘健康  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  常州企业网站制作公司,全国继续教育网怎么登录?  JavaScript如何实现类型判断_typeof和instanceof有什么区别  ,交易猫的商品怎么发布到网站上去?  Laravel怎么做缓存_Laravel Cache系统提升应用速度的策略与技巧  如何在万网开始建站?分步指南解析  如何在阿里云域名上完成建站全流程?  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  网站制作大概多少钱一个,做一个平台网站大概多少钱?