JavaScript 引用类型

JavaScript 数据类型概述

JavaScript 中有两种数据类型：原始类型和引用类型。

原始数据类型是不可变的，这意味着它们不能被更改。JavaScript 中的原始数据类型包括：Number、String、Boolean、Undefined、Null、Symbol。

引用数据类型是可变的，这意味着它们可以被更改。JavaScript 中的引用数据类型包括：Object、Array、Function。

当你给变量赋值一个原始数据类型时，变量会得到该值的一个副本。而当你给变量赋值一个引用数据类型时，变量会得到该值的一个引用。这意味着如果你改变了引用数据类型的值，这个改变会在所有引用该值的变量中反映出来。

例如，以下代码创建了两个变量 x 和 y，并给它们赋值为 10：

let x = 10;
let y = 10;

变量 x 和 y 都有一个 10 的副本。如果你改变 x 的值，y 的值不会改变。

x = 20;
console.log(x); // 20
console.log(y); // 10

下面的代码创建了两个变量 x 和 y，并给它们赋值为一个数组：

const x = [1, 2, 3];
const y = x;

变量 x 和 y 都引用同一个数组。如果你改变 x 引用的数组的值，这个改变也会反映在 y 引用的数组上。

x[0] = 4;
console.log(x); // [4, 2, 3]
console.log(y); // [4, 2, 3]

理解 JavaScript 中原始类型和引用类型之间的区别是非常重要的，这样你才能编写出高效且可预测的代码。

对象和函数是 JavaScript 中的两种主要引用类型，解释如下：

对象

对象是由键值对组成的无序集合，其中键是字符串或符号，而值可以是任何数据类型，包括其他对象。

const person = {
  firstName: "John",
  lastName: "Doe",
  age: 30
};

函数

函数也是 JavaScript 中的引用类型。函数是一种特殊类型的对象，可以被调用（执行）以完成某个任务。

function greet(name) {
  alert("Hello, " + name + "!");
}

示例

示例 1：对象的可变性

在此示例中，我们展示对象的可变性。首先创建一个对象，然后通过该引用进行修改，这会影响到原始对象。person 对象通过 anotherPerson 的引用修改了年龄，从 25 改为 30。如输出所示，原始对象在修改后发生了变化，说明对象是可变的。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript 引用类型示例：对象可变性</h2>
   <script>
      // 创建一个对象
      const person = {
         name: "John",
         age: 25
      };

      // 创建对该对象的引用
      let anotherPerson = person;

      // 显示原始对象
      document.write("<p>原始对象: " + JSON.stringify(person) + "</p>");

      // 通过引用修改对象
      anotherPerson.age = 30;

      // 显示修改后的对象
      document.write("<p>修改后的对象: " + JSON.stringify(person) + "</p>");

      // 两个引用指向同一个对象，所以修改会反映在两者上
      document.write("<p>修改通过引用后原始对象: " + JSON.stringify(person) + "</p>");
   </script>
</body>
</html>

示例 2：数组修改

数组可以在 JavaScript 中存储多个不同数据类型的值在一个单一变量里。它们显示了可变性，这意味着当对数组的一个引用进行修改时，这些改变也会反映在原始数组中。这里我们创建了一个颜色数组，并通过 moreColors 的引用添加了一个元素 "yellow"。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript 引用类型示例：数组修改</h2>
   <script>
      // 创建一个数组
      const colors = ["red", "green", "blue"];

      // 创建对该数组的引用
      let moreColors = colors;

      // 显示原始数组
      document.write("<p>原始数组: " + JSON.stringify(colors) + "</p>");

      // 通过引用修改数组
      moreColors.push("yellow");

      // 显示修改后的数组
      document.write("<p>修改后的数组: " + JSON.stringify(colors) + "</p>");

      // 两个引用指向同一个数组，所以修改会反映在两者上
      document.write("<p>修改通过引用后原始数组: " + JSON.stringify(colors) + "</p>");
   </script>
</body>
</html>

示例 3：函数引用类型

在这个例子中，我们创建了一个函数 greet，它的引用最初被赋给了 greetingFunction。使用它问候之后，我们将引用修改为指向另一个函数，这个函数以 Hola 开头打招呼。这展示了 JavaScript 中函数引用的灵活性。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript 引用类型示例：函数调用</h2>
   <script>
      // 创建一个函数
      function greet(name) {
         return "Hello, " + name + "!";
      }

      // 创建对该函数的引用
      let greetingFunction = greet;

      document.write("<p>原始函数结果: " + greetingFunction("John") + "</p>");
    
      greetingFunction = function(name) {
         return "Hola, " + name + "!";
      };

      document.write("<p>修改后的函数结果: " + greetingFunction("Maria") + "</p>");
   </script>
</body>
</html>

示例 4：自定义类

此示例演示了 JavaScript 中自定义类，这是从引用类型的角度来看的另一个重要方面。类包含属性和方法。这里我们创建了一个 Book 类，包含构造函数和方法。创建了四本书的实例（book1、book2、book3、book4），并分别赋予了标题、作者和类型的数据。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript 引用类型示例：自定义类</h2>
   <script>
      // 定义一个自定义的 Book 类
      class Book {
         constructor(title, author, genre) {
            this.title = title;
            this.author = author;
            this.genre = genre;
         }

         // 获取书籍详情的方法
         getDetails() {
            return `Title: ${this.title}<br>Author: ${this.author}<br>Genre: ${this.genre}`;
         }
      }

      // 创建 Book 类的实例
      const book1 = new Book("The Great Gatsby", "F. Scott Fitzgerald", "Fiction");
      const book2 = new Book("To Kill a Mockingbird", "Harper Lee", "Classics");
      const book3 = new Book("Harry Potter and the Sorcerer's Stone", "J.K. Rowling", "Fantasy");
      const book4 = new Book("1984", "George Orwell", "Dystopian Fiction");

      document.write("<h3>书籍 1 详情:</h3>");
      document.write("<p>" + book1.getDetails() + "</p>");

      document.write("<h3>书籍 2 详情:</h3>");
      document.write("<p>" + book2.getDetails() + "</p>");

      document.write("<h3>书籍 3 详情:</h3>");
      document.write("<p>" + book3.getDetails() + "</p>");

      document.write("<h3>书籍 4 详情:</h3>");
      document.write("<p>" + book4.getDetails() + "</p>");
   </script>
</body>
</html>

示例 5：不可变对象

此示例专注于使用 Object.freeze() 在创建对象时实现对象的不可变性。不可变性基本上意味着对象创建后不会发生变化，或者说一旦定义了对象，其属性就不能被修改。这里我们创建了一个 person 对象，并尝试将其年龄改为 35。然而，由于对象处于冻结状态，这一修改被阻止，并抛出错误。不可变性是一个重要的方面，因为它有助于维护数据完整性，防止意外更改，并增强代码执行的可预见性。

<!DOCTYPE html>
<html>
<body>
   <h2>不可变对象与错误处理</h2>
   <script>
      // 启用严格模式
      'use strict';

      // 创建一个不可变对象
      const person = Object.freeze({
         name: "Alice",
         age: 30
      });

      document.write("<p><strong>修改前:</strong></p>");
      document.write("<p>姓名: " + person.name + "</p>");
      document.write("<p>年龄: " + person.age + "</p>");

      try {
         // 尝试修改对象会导致错误
         person.age = 35;
      } catch (error) {
         document.write(error);
      }

      document.write("<p><strong>修改尝试后:</strong></p>");
      document.write("<p>姓名: " + person.name + "</p>");
      document.write("<p>年龄: " + person.age + "</p>");
   </script>
</body>
</html>