第五章：面向对象编程

1. Objects

JavaScript 的对象是存储键值对的容器。对象在 JavaScript 中扮演了重要的角色，它们允许我们将数据和功能组织在一起，使代码更加结构化和模块化。

1.1 对象的定义与属性

在 JavaScript 中，可以使用花括号 {} 来定义对象，并通过键值对的形式来添加属性。

示例代码：

// 定义一个对象
let person = {
  name: "John",
  age: 30,
  job: "Developer",
};

// 访问对象属性
console.log(person.name); // 输出: John
console.log(person["age"]); // 输出: 30

1.2 对象的方法

对象的方法是存储在对象属性中的函数。我们可以直接在对象定义时添加方法，方法可以通过点或方括号来调用。

示例代码：

let person = {
  name: "John",
  age: 30,
  job: "Developer",
  greet: function () {
    console.log("Hello, my name is " + this.name);
  },
};

// 调用对象方法
person.greet(); // 输出: Hello, my name is John

1.3 对象的遍历

我们可以使用 for...in 循环来遍历对象的所有属性。

示例代码：

let person = {
  name: "John",
  age: 30,
  job: "Developer",
};

for (let key in person) {
  console.log(key + ": " + person[key]);
}
// 输出:
// name: John
// age: 30
// job: Developer

2. Object-Oriented Programming

面向对象编程(OOP)是 JavaScript 开发中的重要概念，它通过类和对象来模拟现实世界的事物。

2.1 类的定义与实例化

在 ES6 中，我们可以使用 class 关键字来定义类，然后使用 new 关键字来创建类的实例。

示例代码：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

// 创建类的实例
let john = new Person("John", 30);
john.greet(); // 输出: Hello, my name is John

2.2 类的属性与方法

类的属性和方法定义在类的内部，属性通常在构造函数 constructor 中定义，方法则定义在类的主体中。

示例代码：

class Animal {
  constructor(name, species) {
    this.name = name;
    this.species = species;
  }

  describe() {
    console.log(`${this.name} is a ${this.species}`);
  }
}

let lion = new Animal("Leo", "Lion");
lion.describe(); // 输出: Leo is a Lion

2.3 继承与多态

继承允许我们创建一个新类，该类继承另一个类的属性和方法。多态允许我们使用相同的方法来处理不同类型的对象。

示例代码：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(this.name + " makes a noise.");
  }
}

class Dog extends Animal {
  speak() {
    console.log(this.name + " barks.");
  }
}

let dog = new Dog("Rex");
dog.speak(); // 输出: Rex barks

3. ES6+ 新特性

ES6 引入了一些新特性，使 JavaScript 开发更加方便和高效。

3.1 模板字符串

模板字符串使用反引号（``）包围，并且允许嵌入表达式。

示例代码：

let name = "John";
let greeting = `Hello, ${name}!`;
console.log(greeting); // 输出: Hello, John!

3.2 解构赋值

解构赋值是一种从数组或对象中提取数据的语法。

示例代码：

// 数组解构
let [a, b] = [1, 2];
console.log(a); // 输出: 1
console.log(b); // 输出: 2

// 对象解构
let person = { name: "John", age: 30 };
let { name, age } = person;
console.log(name); // 输出: John
console.log(age); // 输出: 30

3.3 剩余参数与扩展运算符

剩余参数允许我们将不定数量的参数表示为一个数组，扩展运算符允许我们将数组或对象展开。

示例代码：

// 剩余参数
function# Chapter 5: Objects and Object-Oriented Programming (continued)

### 3.3 剩余参数与扩展运算符 (续)

**示例代码**：

```javascript
// 剩余参数
function sum(...numbers) {
    return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3)); // 输出: 6

// 扩展运算符
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5, 6];
console.log(arr2); // 输出: [1, 2, 3, 4, 5, 6]

扩展运算符在对象上也同样适用：

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

3.4 模块化（import 和 export）

模块化使得我们可以将代码拆分到不同的文件中，并通过 import 和 export 关键字来共享代码。

示例代码：

// 导出模块
// 在 math.js 文件中
export function add(a, b) {
  return a + b;
}

export const PI = 3.14159;

// 导入模块
// 在 main.js 文件中
import { add, PI } from "./math.js";

console.log(add(2, 3)); // 输出: 5
console.log(PI); // 输出: 3.14159

模块化让代码更易于维护和重用，并且可以避免命名冲突。

我们学习了如何定义和操作对象，了解了如何利用面向对象编程的概念来创建类和对象，并且探索了 ES6+的几个重要新特性。这些知识为构建复杂且结构化的 JavaScript 应用程序奠定了坚实的基础。