【JavaScript系列】-- 对象

今天我们将探讨JavaScript中的一个强大工具—-对象。

对象就像生活中的各种工具，帮助你更好地组织和管理信息。在实际开发中，可以使用对象来表示用户信息、处理表单数据等。
01、什么是对象
JavaScript对象是一种包含属性和方法的数据类型，可视为一个多功能盒子，用于存放各种数据。
在JavaScript中，对象是键值对的容器。
键值对的典型写法是 name: value ，其中键和值之间使用冒号进行分割。

02、如何创建对象
■ 对象字面量

对象字面量是一种常见的对象创建方式，使得代码更简洁和易读。

它允许你直接使用大括号{} 来定义和初始化对象，而无需使用构造函数。

我们可以用下面这种方式，创建一个表示车辆信息的对象：

{
    brand: "现代牌子",
    model: '跑车',
    color: "蓝色",
    year: 2023
}

■ 使用构造函数

构造函数是一种特殊类型的函数，用于创建和初始化对象。

构造函数是通过new 关键字调用的函数。

构造函数的目的是产生新的对象，并通过将属性和方法添加到该对象来进行初始化。

我们可以定义一个构造函数，然后使用该构造函数创建多个实例，就像使用工厂来生产不同汽车一样。

// 构造函数
function Car(brand, model, color, year) {
    this.brand = brand;
    this.model = model;
    this.color = color;
    this.year = year;
    this.isRunning = false;

    // 启动方法
    this.start = function() {
        if (!this.isRunning) {
            this.isRunning = true;
            console.log(`启动了 ${this.color} ${this.brand} ${this.model}！`);
        } else {
            console.log("车子已经在跑了！");
        }
    };

    // 停止方法
    this.stop = function() {
        if (this.isRunning) {
            this.isRunning = false;
            console.log(`停止了 ${this.color} ${this.brand} ${this.model}。`);
        } else {
            console.log("车子已经停了！");
        }
    };
}

// 使用构造函数创建两辆汽车
let car1 = new Car("未来牌", "超级跑车", "红色", 2024);
let car2 = new Car("现代牌", "家用车", "蓝色", 2023);

03、访问对象的属性和方法

你可以用. 或者[] 来访问对象的属性或者方法。

let color = car1.color // 或者 let color = car1['color']

car1.start() // 或者 car1['start']()

04、增加对象属性和方法

通过. 来给对象动态增加新属性和新方法。

■ 添加属性

let car = {
    brand: "未来牌",
    model: "超级跑车"
};

car.color = "红色"; // 添加color属性
car.year = 2023; // 添加year属性

■ 添加方法

let car = {
    brand: "未来牌",
    model: "超级跑车",
    start: function() {
        console.log("启动了！");
    }
};

car.stop = function() {
    console.log("停止了！");
};

■ 删除属性和方法

delete car.year

需要注意的是，删除属性后，相关的属性引用就不存在了。

在实际开发中，通常情况下不太建议使用 delete 删除对象的属性，特别是方法。

最好的做法是在对象的设计阶段确定好对象的结构，而不是在运行时删除属性。

05、总结

这篇简短的介绍，可以让你对JavaScript对象有了初步的认识，后面还会介绍对象的高级技巧。

原创：前端小目标