3.2 引用类型

3.2 引用类型：Object、Array、Function

在 JavaScript 中，引用类型（Reference Types）是复杂的数据结构，它们可以包含多个值或功能。与原始类型不同，引用类型的值是存储在堆内存中的对象，变量存储的是对象的引用（内存地址）。本节将详细介绍三种常见的引用类型：Object、Array 和 Function。

3.2.1 Object（对象类型）

Object 是 JavaScript 中最基本的引用类型，用于存储键值对（key-value pairs）。对象可以是任何复杂的数据结构。

1. 创建对象

let person = {
  name: "Alice",
  age: 25,
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

2. 访问属性

• 使用点符号：

  console.log(person.name); // 输出 "Alice"
  

• 使用方括号：

  console.log(person["age"]); // 输出 25
  

3. 修改属性

person.age = 26;
console.log(person.age); // 输出 26

4. 添加新属性

person.job = "Engineer";
console.log(person.job); // 输出 "Engineer"

5. 删除属性

delete person.job;
console.log(person.job); // 输出 undefined

3.2.2 Array（数组类型）

Array 是一种特殊的对象，用于存储有序的数据集合。数组中的元素可以是任意类型，包括其他数组或对象。

1. 创建数组

let fruits = ["Apple", "Banana", "Cherry"];

2. 访问元素

console.log(fruits[0]); // 输出 "Apple"

3. 修改元素

fruits[1] = "Blueberry";
console.log(fruits); // 输出 ["Apple", "Blueberry", "Cherry"]

4. 数组方法

• 添加元素：

  fruits.push("Durian"); // 添加到末尾
  fruits.unshift("Apricot"); // 添加到开头
  

• 删除元素：

  fruits.pop(); // 删除末尾元素
  fruits.shift(); // 删除开头元素
  

• 遍历数组：

  fruits.forEach((fruit) => console.log(fruit));
  

5. 多维数组

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9],
];
console.log(matrix[1][2]); // 输出 6

3.2.3 Function（函数类型）

Function 是一种特殊的对象，用于封装可执行的代码。函数可以作为参数传递，也可以作为返回值。

1. 创建函数

• 函数声明：

  function greet(name) {
    console.log(`Hello, ${name}!`);
  }
  

• 函数表达式：

  const greet = function (name) {
    console.log(`Hello, ${name}!`);
  };
  

• 箭头函数：

  const greet = (name) => console.log(`Hello, ${name}!`);
  

2. 调用函数

greet("Alice"); // 输出 "Hello, Alice!"

3. 函数作为参数

function callFunction(fn, value) {
  fn(value);
}
callFunction(greet, "Bob"); // 输出 "Hello, Bob!"

4. 函数作为返回值

function createGreeter(greeting) {
  return function (name) {
    console.log(`${greeting}, ${name}!`);
  };
}
const sayHi = createGreeter("Hi");
sayHi("Charlie"); // 输出 "Hi, Charlie!"

3.2.4 引用类型的特性

1. 引用传递
引用类型的值是对象的内存地址，因此赋值和传递时是传递引用，而不是复制值：

let obj1 = { name: "Alice" };
let obj2 = obj1; // obj2 和 obj1 指向同一个对象
obj2.name = "Bob";
console.log(obj1.name); // 输出 "Bob"

2. 比较引用
引用类型的比较是基于引用（内存地址），而不是值：

let arr1 = [1, 2, 3];
let arr2 = [1, 2, 3];
console.log(arr1 === arr2); // 输出 false

3. 深拷贝与浅拷贝

• 浅拷贝：只复制对象的引用。
• 深拷贝：复制对象的所有属性及其嵌套对象。

3.2.5 示例代码

示例 1：对象

let car = {
  brand: "Toyota",
  model: "Corolla",
  year: 2020,
  start: function () {
    console.log(`${this.brand} ${this.model} started.`);
  },
};
car.start(); // 输出 "Toyota Corolla started."

示例 2：数组

let numbers = [1, 2, 3, 4, 5];
let doubled = numbers.map((num) => num * 2);
console.log(doubled); // 输出 [2, 4, 6, 8, 10]

示例 3：函数

function createCounter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}
const counter = createCounter();
counter(); // 输出 1
counter(); // 输出 2

3.2.6 总结

• Object：用于存储键值对，是 JavaScript 中最通用的数据结构。
• Array：用于存储有序的数据集合，支持多种操作方法。
• Function：用于封装可执行的代码，支持高阶函数和闭包。
• 引用传递：引用类型的值是对象的内存地址，赋值和传递时是传递引用。

理解引用类型的特点和用法，是掌握 JavaScript 高级特性的关键。在接下来的章节中，我们将进一步探讨原型、继承和异步编程等内容。

思考题：

1. 如何实现对象的深拷贝？
2. 数组的 map 和 forEach 方法有什么区别？
3. 为什么函数可以作为参数传递？这种特性有什么实际用途？