JavaScript 中的对象

学习目标

理解 JavaScript 中对象的基本结构与创建方式
掌握构造函数的定义与使用方法
熟悉 this 关键字在构造函数中的作用
学会为对象和构造函数动态添加属性与方法
掌握多种对象实例化与属性赋值的方式

JS 中的对象基础

在 JavaScript 中，对象是键值对（key-value pairs）的集合，用于组织相关的数据和功能。除了原始类型（如 number、string、boolean、null、undefined 和 symbol），所有 JavaScript 值本质上都是对象。

const course = {
    subject: "编程",
    language: "JavaScript"
};

在这个例子中：

subject 和 language 是键（keys）
"编程" 和 "JavaScript" 是对应的值（values）

构造函数

构造函数是一种特殊的函数，用于创建并初始化具有相同结构的对象。通过 new 关键字调用构造函数，可以生成多个具有相同属性和方法但数据独立的对象实例。

基本语法与示例

// 定义构造函数
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sayHello = function() {
        console.log(`我的名字是 ${this.name}，今年 ${this.age} 岁。`);
    };
}

// 创建实例
const person1 = new Person("李明", 30);
const person2 = new Person("王芳", 25);

person1.sayHello(); // 输出：我的名字是 李明，今年 30 岁。
person2.sayHello(); // 输出：我的名字是 王芳，今年 25 岁。

注意：构造函数通常以大写字母开头（如 Person），这是 JavaScript 社区的命名约定，用于区分普通函数。

`this` 关键字的作用

在构造函数中，this 指向当前正在创建的对象实例。它允许我们在函数内部为新对象设置属性和方法。

当使用 new Person(...) 时，JavaScript 会创建一个空对象，并将 this 绑定到该对象
所有通过 this.xxx = ... 赋值的属性和方法都会成为该实例的一部分

这与 Java、C++、C# 等面向对象语言中的 this 概念类似。

为对象动态添加属性

已存在的对象可以通过以下两种方式添加新属性：

1. 使用点号（`.`）操作符

const book = {
    title: "深入浅出 JavaScript",
    pages: 400
};

book.author = "张伟"; // 添加新属性

2. 使用方括号（`[]`）操作符

book['publisher'] = "技术出版社";

方括号适用于属性名包含空格、特殊字符或动态生成的情况，例如 book['page count']。

构造函数添加属性与方法

与普通对象不同，不能直接给构造函数“本身”添加实例属性。若希望所有实例都拥有某个属性或方法，必须在构造函数内部声明。

添加固定属性

function Course(title, level) {
    this.title = title;
    this.level = level;
    this.platform = "CodeLab"; // 所有实例共享此固定值
}

添加方法

function Calculator(a, b) {
    this.a = a;
    this.b = b;
    this.add = function() {
        return this.a + this.b;
    };
}

const calc = new Calculator(10, 20);
console.log(calc.add()); // 输出：30

注意：每次创建新实例时，方法都会被重新定义一次。为提升性能，可考虑使用原型（Prototype）。

对象的创建方式

JavaScript 提供了多种创建对象的方式，适用于不同场景。

使用 `new Object()`

let course = new Object();
course.subject = "JavaScript";
course.author = "CodeLab";

console.log("课程：" + course.subject); // 课程：JavaScript
console.log("作者：" + course.author);   // 作者：CodeLab

使用对象字面量 `{}`

let course = {};
course['subject'] = "JavaScript";
course['author'] = "CodeLab";

console.log("课程：" + course.subject); // 课程：JavaScript
console.log("作者：" + course.author);   // 作者：CodeLab

两种方式功能等价，但对象字面量更简洁、常用。

为对象添加方法

在对象上定义匿名函数

let utils = new Object();
utils.greet = function() {
    return "欢迎来到 CodeLab！";
};

console.log(utils.greet()); // 输出：欢迎来到 CodeLab！

引用已声明的函数

let utils = {};

function getWelcomeMessage() {
    return "欢迎来到 CodeLab！";
}

utils.welcome = getWelcomeMessage; // 注意：不加括号 ()

console.log(utils.welcome()); // 输出：欢迎来到 CodeLab！

这种方式便于复用函数逻辑，也更利于测试和维护。

完整示例

// 使用构造函数创建用户对象
function User(username, email) {
    this.username = username;
    this.email = email;
    this.getInfo = function() {
        return `${this.username} 的邮箱是 ${this.email}`;
    };
}

// 创建实例
const user1 = new User("dev_li", "li@example.com");

// 动态添加新属性
user1.isActive = true;

// 动态添加新方法
user1.toggleStatus = function() {
    this.isActive = !this.isActive;
};

console.log(user1.getInfo());         // 输出：dev_li 的邮箱是 li@example.com
console.log("当前状态：", user1.isActive); // 输出：true
user1.toggleStatus();
console.log("切换后状态：", user1.isActive); // 输出：false

重点总结

概念	说明
对象	键值对集合，用于封装相关数据和行为
构造函数	用于批量创建结构相同的对象，配合 `new` 使用
`this`	在构造函数中指向新创建的实例对象
属性添加	可通过 `.` 或 `[]` 为已有对象动态添加属性
方法添加	可直接赋值函数表达式，或引用外部函数
对象创建方式	`new Object()` 与 `{}` 均可，后者更常用

思考题

构造函数与 ES6 的 class 语法有何异同？在什么场景下更适合使用构造函数？
如果在构造函数中定义方法（如 this.method = function() {...}），每次创建实例时都会生成新的函数对象。这会带来什么潜在问题？如何优化？
尝试使用构造函数设计一个“图书”类，包含书名、作者、ISBN，并提供一个方法返回完整的图书信息字符串。然后创建两个图书实例并调用该方法。