讲师中心 微信公众号
AI工具推荐 视频效率加速

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

轻芳君_2476

轻芳君_2476

发布时间:2026-01-09 18:20:03

|

393人浏览过

|

来源于php中文网

原创

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

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

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

直接用 {} 创建对象,适合一次性定义结构明确的数据。它天然避免了构造函数调用时忘记 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" 的单一属性,不是嵌套路径。

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

  • 点号访问:obj.name、obj.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...in 和 JSON.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% 的实际坑。写的时候多看一眼控制台输出的完整对象结构,比背规则管用。

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

火山引擎

火山引擎是一款面向企业的云计算与AI服务平台。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2175

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3422

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1156

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

3919

2025.09.10

登录token无效
登录token无效

登录token无效解决方法:1、检查token的有效期限,如果token已经过期,需要重新获取一个新的token;2、检查token的签名,如果签名不正确,需要重新获取一个新的token;3、检查密钥的正确性,如果密钥不正确,需要重新获取一个新的token;4、使用HTTPS协议传输token,建议使用HTTPS协议进行传输 ;5、使用双因素认证,双因素认证可以提高账户的安全性。

14206

2023.09.14

登录token无效怎么办
登录token无效怎么办

登录token无效的解决办法有检查Token是否过期、检查Token是否正确、检查Token是否被篡改、检查Token是否与用户匹配、清除缓存或Cookie、检查网络连接和服务器状态、重新登录或请求新的Token、联系技术支持或开发人员等。本专题为大家提供token相关的文章、下载、课程内容,供大家免费下载体验。

1685

2023.09.14

token怎么获取
token怎么获取

获取token值的方法:1、小程序调用“wx.login()”获取 临时登录凭证code,并回传到开发者服务器;2、开发者服务器以code换取,用户唯一标识openid和会话密钥“session_key”。想了解更详细的内容,可以阅读本专题下面的文章。

3917

2023.12.21

token什么意思
token什么意思

token是一种用于表示用户权限、记录交易信息、支付虚拟货币的数字货币。可以用来在特定的网络上进行交易,用来购买或出售特定的虚拟货币,也可以用来支付特定的服务费用。想了解更多token什么意思的相关内容可以访问本专题下面的文章。

6081

2024.03.01

Gradle插件开发入门教程
Gradle插件开发入门教程

本专题介绍Gradle插件开发的基本流程,涵盖插件类编写、自定义任务注册、扩展参数设计和插件应用方法,帮助你理解插件如何组织构建逻辑,减少多个项目之间的重复配置。

60

2026.10.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 12.3万人学习

国外Web开发全栈课程全集
国外Web开发全栈课程全集

共12课时 | 1.4万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn