0

0

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

幻影之瞳

幻影之瞳

发布时间:2026-01-19 21:36:09

|

536人浏览过

|

来源于php中文网

原创

对象字面量{}创建最常用安全,适合静态结构;键名含特殊字符须加引号;点号访问合法标识符,方括号支持动态键;方法中this指向调用者,易丢失需绑定。

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

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

直接用 {} 创建对象,适合静态结构、一次性使用的场景。它避免了构造函数的隐式绑定和原型链干扰,也比 new Object() 更简洁清晰。

常见错误是误把逗号写在花括号末尾(如 { name: 'Alice', }),虽然现代 JS 支持尾逗号,但在老旧环境或某些构建工具中可能报错;更隐蔽的问题是键名含特殊字符却没加引号,比如 { 'user-id': 123 } 必须加单/双引号,否则解析失败。

  • const user = { name: 'Alice', age: 30 };
  • 键名含空格、短横线、数字开头时,必须用引号包裹:{ 'full-name': 'Alice Smith', '1st-login': true }
  • 值可以是函数,即方法:{ greet() { return 'Hello'; } }{ greet: function() { return 'Hello'; } }

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

点号 . 要求属性名是合法标识符且已知;方括号 [] 支持动态计算、含特殊字符或变量作为键名。混淆两者会导致 undefined 或语法错误。

典型陷阱:想用变量控制属性名却写了 obj.variableName,结果访问的是字面量 "variableName" 这个键,而非变量值指向的键。

Freepik Mystic
Freepik Mystic

Freepik Mystic 是一款革命性的AI图像生成器,可以直接生成全高清图像

下载

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

  • 静态访问用点号:user.nameuser.greet()
  • 动态访问必须用方括号:const key = 'age'; user[key]user['full-name']user[`item-${index}`]
  • 方法调用不受影响:user['greet']()user.greet() 效果一致

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

这是最容易出 bug 的地方。箭头函数不绑定 this,普通函数在对象方法中默认指向该对象——但一旦被赋值给变量或传入回调,this 就会丢失。

例如 const fn = user.greet; fn();this 指向 undefined(严格模式)或全局对象,而不是 user

  • 保持 this 稳定:用箭头函数定义方法(仅适用于不需要访问实例属性的场景)
  • 或显式绑定:const boundGreet = user.greet.bind(user);
  • 或使用类语法 + class 字段语法(需转译支持):greet = () => { ... }
  • 现代推荐:用 call/apply 显式传入上下文,尤其在事件监听或定时器中
const user = {
  name: 'Alice',
  greet() {
    return `Hello, ${this.name}`;
  },
  greetArrow: () => {
    return `Hello, ${this.name}`; // this 不指向 user,而是外层作用域
  }
};

const fn = user.greet;
console.log(fn()); // "Hello, undefined" —— this 已丢失
console.log(user.greet()); // "Hello, Alice"
属性访问本身没有性能差异,但频繁用方括号配合字符串拼接(如 obj[`key-${i}-${j}`])可能影响 V8 的内联缓存优化。真正复杂的是 this 绑定时机和作用域链穿透,这些不会报错,但行为会悄然偏离预期。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
mysql标识符无效错误怎么解决
mysql标识符无效错误怎么解决

mysql标识符无效错误的解决办法:1、检查标识符是否被其他表或数据库使用;2、检查标识符是否包含特殊字符;3、使用引号包裹标识符;4、使用反引号包裹标识符;5、检查MySQL的配置文件等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

209

2023.12.04

Python标识符有哪些
Python标识符有哪些

Python标识符有变量标识符、函数标识符、类标识符、模块标识符、下划线开头的标识符、双下划线开头、双下划线结尾的标识符、整型标识符、浮点型标识符等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

321

2024.02.23

java标识符合集
java标识符合集

本专题整合了java标识符相关内容,想了解更多详细内容,请阅读下面的文章。

292

2025.06.11

c++标识符介绍
c++标识符介绍

本专题整合了c++标识符相关内容,阅读专题下面的文章了解更多详细内容。

177

2025.08.07

c语言const用法
c语言const用法

const是关键字,可以用于声明常量、函数参数中的const修饰符、const修饰函数返回值、const修饰指针。详细介绍:1、声明常量,const关键字可用于声明常量,常量的值在程序运行期间不可修改,常量可以是基本数据类型,如整数、浮点数、字符等,也可是自定义的数据类型;2、函数参数中的const修饰符,const关键字可用于函数的参数中,表示该参数在函数内部不可修改等等。

561

2023.09.20

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

739

2023.08.03

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

220

2023.09.04

java基础知识汇总
java基础知识汇总

java基础知识有Java的历史和特点、Java的开发环境、Java的基本数据类型、变量和常量、运算符和表达式、控制语句、数组和字符串等等知识点。想要知道更多关于java基础知识的朋友,请阅读本专题下面的的有关文章,欢迎大家来php中文网学习。

1564

2023.10.24

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

24

2026.03.09

热门下载

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

精品课程

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

共58课时 | 5.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 3.4万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.5万人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号