什么是JS对象？对象的属性和方法怎么使用

星降

发布时间：2025-08-13 14:31:01

1019人浏览过

来源于php中文网

原创

创建和初始化javascript对象最常用的方式是使用对象字面量，如const mycar = {brand: 'tesla', model: 'model 3', start: function() {console.log(${this.brand} ${this.model} 启动了！);}};，也可通过new object()或object.create()创建，其中对象属性可通过点操作符（.）或方括号操作符（[]）访问，前者要求属性名为合法标识符，后者支持动态属性名和包含特殊字符的属性名，在定义对象方法时应使用函数表达式而非箭头函数以确保this正确指向对象本身，从而实现属性和行为的封装。

什么是JS对象？对象的属性和方法怎么使用

JavaScript对象，简单来说，就是一组无序的键值对集合。它是一种复杂的数据结构，用于存储和组织数据，能够把相关的属性（数据）和方法（行为）封装在一起。你可以把它想象成现实世界中的一个“事物”，比如一辆车，它有颜色、品牌、型号这些“属性”，也有启动、加速、刹车这些“方法”。在JS里，对象就是用来模拟这些“事物”的。

在JavaScript中，对象的属性和方法使用起来非常直观，通常通过点操作符（

）或者方括号操作符（

[]

）来访问。对于属性，你直接用

对象名.属性名

或者

对象名['属性名']

就能获取或设置它的值。而方法，本质上也是一个属性，只不过它的值是一个函数，所以调用时是在属性名后面加上一对括号，比如

对象名.方法名()

。

如何创建和初始化JavaScript对象？

创建JavaScript对象的方法有很多种，每种都有其适用场景，就像你盖房子，有毛坯房，也有精装修的。最常见也最直接的方式就是使用对象字面量（Object Literal），这就像是快速搭积木，所见即所得：

const myCar = {
    brand: 'Tesla',
    model: 'Model 3',
    year: 2022,
    color: 'Red',
    start: function() {
        console.log(`${this.brand} ${this.model} 启动了！`);
    },
    stop: () => { // 箭头函数在这里，this行为会不同，是个有意思的点
        console.log('车辆已停止。');
    }
};

console.log(myCar.brand); // 访问属性：Tesla
myCar.start(); // 调用方法：Tesla Model 3 启动了！

除了对象字面量，你也可以使用

new Object()

构造函数，或者更现代的

Object.create()

方法来创建对象。

new Object()

有点像一个空箱子，你需要手动往里加东西：

const anotherCar = new Object();
anotherCar.brand = 'BMW';
anotherCar.model = 'X5';
anotherCar.year = 2023;
anotherCar.drive = function() {
    console.log(`${this.brand} ${this.model} 正在行驶。`);
};

console.log(anotherCar.model); // X5
anotherCar.drive(); // BMW X5 正在行驶。

Object.create()

则更高级，它允许你指定新创建对象的原型，这在实现继承时非常有用。比如，我想基于

myCar

的特性再造一辆，但又不想完全复制，而是让它能“继承”一些东西。这背后涉及JS的原型链，一个稍微复杂但核心的概念。

深入理解JavaScript对象的属性访问：点操作符与方括号操作符

在JavaScript里，访问对象的属性主要有两种方式：点操作符（

）和方括号操作符（

[]

）。它们大多数时候可以互换，但各有各的脾气和适用场景，理解它们能让你在处理数据时更灵活。

点操作符是我们最常用的，它简洁明了，看起来很“自然”：

const userProfile = {
    name: '张三',
    age: 30,
    'email-address': 'zhangsan@example.com' // 注意这里的属性名
};

console.log(userProfile.name); // 输出: 张三
console.log(userProfile.age);  // 输出: 30
// console.log(userProfile.email-address); // 错误！因为属性名中有连字符

点操作符要求属性名是一个有效的JavaScript标识符，这意味着它不能包含空格、连字符（

）、特殊字符，也不能以数字开头。当你的属性名不符合这些规则时，点操作符就无能为力了。

PaperFake

AI写论文

下载

这时候，方括号操作符就派上用场了。它更“包容”，属性名可以是任何字符串，甚至是变量的值：

console.log(userProfile['name']); // 输出: 张三 (和点操作符一样)
console.log(userProfile['email-address']); // 输出: zhangsan@example.com (解决连字符问题)

const propName = 'age';
console.log(userProfile[propName]); // 输出: 30 (属性名来自变量)

const dynamicProp = 'city';
userProfile[dynamicProp] = '北京'; // 动态添加属性
console.log(userProfile.city); // 输出: 北京

方括号操作符的强大之处在于它能够使用变量来访问属性，这在需要动态决定访问哪个属性时（比如遍历对象、处理用户输入、或者从API响应中获取数据）显得尤为重要。它就像一个万能钥匙，能开各种锁，而点操作符更像一个专用钥匙。

JavaScript对象的方法：定义、调用与

this

的奥秘

对象的方法，本质上就是存储在对象属性中的函数。它们赋予了对象“行为”的能力，让对象不仅仅是数据的容器。定义方法的方式和定义普通属性类似，只是值是一个函数表达式或函数声明：

const robot = {
    name: 'Optimus',
    model: 'T-800',
    greet: function() { // 传统函数表达式作为方法
        console.log(`你好，我是 ${this.name}，型号是 ${this.model}。`);
    },
    selfDestruct: () => { // 箭头函数作为方法
        console.log(`自毁程序启动...`);
        // console.log(this.name); // 这里会是undefined，因为箭头函数的this行为不同
    }
};

robot.greet(); // 调用方法：你好，我是 Optimus，型号是 T-800。
robot.selfDestruct(); // 调用方法：自毁程序启动...

调用方法和访问属性一样，使用点操作符或方括号操作符，后面加上一对圆括号。

这里面最让人“挠头”的可能就是