JavaScript对象详解:定义、访问与属性检测

作者:半夏

时间:2026-10-22

浏览:531

本文介绍JavaScript中对象的基本概念,包括如何定义包含键值对的对象、使用点操作符或方括号访问属性,以及处理特殊字符属性名。同时讲解如何检测对象自身属性与继承属性的区别,掌握hasOwnProperty()方法的使用,并说明JavaScript对象的动态特性。

文章目录

JavaScript对象的基本定义

JavaScript中的对象是一种无序的数据集合,由多个键值对构成。

在JavaScript中,对象常用于模拟现实世界中的具体事物。例如,若要描述名为“小明”的淘气男孩,可以通过一系列键值对来刻画他的特征:


var xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};

JavaScript使用花括号{...}来定义对象,键值对之间以冒号连接,并用逗号分隔。需要注意的是,最后一个键值对末尾不应添加逗号,否则在某些浏览器(如低版本IE)中会引发错误。

上述示例定义了一个包含name属性(值为'小明')、birth属性(值为1990)以及其他若干属性的对象。将该对象赋值给变量xiaoming后,即可通过该变量访问小明的各项属性:


xiaoming.name; // '小明'
xiaoming.birth; // 1990

对象属性的访问方式

访问对象属性通常使用点操作符(.),但前提是属性名必须是合法的变量名。若属性名包含特殊字符,则必须使用单引号或双引号将其包裹:


var xiaohong = {
  name: '小红',
  'middle-school': 'No.1 Middle School'
};

例如,xiaohong对象的属性名middle-school并非合法变量名,因此必须使用引号包裹。访问此类属性时不能使用点操作符,而必须采用方括号语法['xxx']:


xiaohong['middle-school']; // 'No.1 Middle School'
xiaohong['name']; // '小红'
xiaohong.name; // '小红'

同样可以使用xiaohong['name']来访问xiaohong的name属性,但直接书写xiaohong.name更为简洁。在编写JavaScript代码时,建议属性名尽量采用标准变量名,以便直接使用object.prop形式进行访问。

实际上,JavaScript对象中的所有属性名均为字符串类型,但属性对应的值可以是任意数据类型。

若访问一个不存在的属性,JavaScript不会报错,而是返回undefined:


var xiaoming = {
  name: '小明'
};
xiaoming.age; // undefined

对象属性的动态操作

由于JavaScript对象具有动态类型特性,用户可以自由地为对象添加或删除属性:


var xiaoming = {
  name: '小明'
};
xiaoming.age; // undefined
xiaoming.age = 18; // 新增一个age属性
xiaoming.age; // 18
delete xiaoming.age; // 删除age属性
xiaoming.age; // undefined
delete xiaoming['name']; // 删除name属性
xiaoming.name; // undefined
delete xiaoming.school; // 删除一个不存在的school属性也不会报错

对象属性的检测与判断

若要检测xiaoming是否拥有某一属性,可以使用in操作符:


var xiaoming = {
  name: '小明',
  birth: 1990,
  school: 'No.1 Middle School',
  height: 1.70,
  weight: 65,
  score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

但需注意,in操作符判断属性存在时,该属性可能是xiaoming自身拥有的,也可能是从原型链继承得到的:


'toString' in xiaoming; // true

因为toString方法定义在Object对象中,而所有对象最终都会在原型链上指向Object,所以xiaming也拥有toString属性。

若要判断一个属性是否为xiaoming自身拥有而非继承所得,可以使用hasOwnProperty()方法:


var xiaoming = {
  name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章