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 中也属于引用类型。函数是特殊类型的对象，可以被调用(call)来执行任务。

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

示例

示例 1:对象可变性

在此示例中，我们演示了对象可变性。首先创建一个对象，然后通过该引用进行修改，这反过来又会影响原始对象。person 对象通过来自 anotherPerson 的引用被修改，其年龄从 25 岁更改为 30 岁。如输出所示，原始对象在修改后发生了变化，因此该对象被称为"突变"。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript Reference Types Example: Object Mutability</h2>
   <script>
      // 创建一个对象
      const person = {
         name: "John",
         age: 25
      };

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

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

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

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

      // 两个引用都指向同一个对象，因此更改会反映在两个引用中
      document.write("<p>Original Object after modification through reference: " + JSON.stringify(person) + "</p>");
   </script>
</body>
</html>

示例 2:数组修改

本文演示了 JavaScript 中数组如何在单个变量中存储多个不同数据类型的值。它们具有可变性，这意味着当引用数组时，对引用的更改也会反映在原始数组中。这里我们创建了一个颜色数组，并通过 moreColors 的引用对其进行修改，主要操作是将元素 yellow 压入数组。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript Reference Types Example: Array Modification</h2>
   <script>
      // 创建一个数组
      const colors = ["red", "green", "blue"];

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

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

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

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

      // 两个引用都指向同一个数组，因此更改会反映在两个数组中
      document.write("<p>Original Array after modification through reference: " + JSON.stringify(colors) + "</p>");
   </script>
</body>
</html>

示例 3:函数引用类型

在此示例中，我们创建了一个函数 greet，其引用最初分配给 greetingFunction。在使用它说"Hello"之后，我们修改了该引用，使其指向另一个使用"Hola"来表示问候的函数。这展示了 JavaScript 中函数引用的灵活性。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript Reference Types Example: Function Invocation</h2>
   <script>
      // Create a function
      function greet(name) {
         return "Hello, " + name + "!";
      }

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

      document.write("<p>Original Function Result: " + greetingFunction("John") + "</p>");
    
      greetingFunction = function(name) {
         return "Hola, " + name + "!";
      };

      document.write("<p>Modified Function Result: " + greetingFunction("Maria") + "</p>");
   </script>
</body>
</html>

示例 4:自定义类

此示例从引用类型的角度展示了 JavaScript 中自定义类的另一个重要方面。类由属性和函数/方法组成。这里我们创建了一个 Book 类，它包含一个构造函数和一个方法。我们创建了该 Book 类的 4 个实例，分别为 (book1、book2、book3、book4)，并赋予它们相应的数据，例如书名、作者和类型。

<!DOCTYPE html>
<html>
<body>
   <h2>JavaScript Reference Types Example: Custom class</h2>
   <script>
      // 为 Book 定义自定义类
      class Book {
         constructor(title, author, genre) {
            this.title = title;
            this.author = author;
            this.genre = genre;
         }

         // 获取 Book 详细信息的方法
         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>Book 1 Details:</h3>");
      document.write("<p>" + book1.getDetails() + "</p>");

      document.write("<h3>Book 2 Details:</h3>");
      document.write("<p>" + book2.getDetails() + "</p>");

      document.write("<h3>Book 3 Details:</h3>");
      document.write("<p>" + book3.getDetails() + "</p>");

      document.write("<h3>Book 4 Details:</h3>");
      document.write("<p>" + book4.getDetails() + "</p>");
   </script>
</body>
</html>

示例 5:不可变对象

本示例重点介绍对象的不可变性，它是在创建对象时使用 Object.freeze() 实现的。不可变性的基本含义是对象在创建后不会改变，或者简单地确保对象一旦定义，其属性就无法修改。这里，我们创建了一个 Person 对象，其属性为 name 和 age，然后尝试将 age 更改为 35。然而，对象的冻结状态阻止了此修改，并引发了错误。不可变性是一个重要方面，因为它有助于维护数据完整性，从而防止意外更改并增强代码执行的可预测性。

<!DOCTYPE html>
<html>
<body>
   <h2>Immutable Object with Error Handling</h2>
   <script>
      // 启用严格模式
      'use strict';

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

      document.write("<p><strong>Before Modification:</strong></p>");
      document.write("<p>Name: " + person.name + "</p>");
      document.write("<p>Age: " + person.age + "</p>");

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

      document.write("<p><strong>After Modification Attempt:</strong></p>");
      document.write("<p>Name: " + person.name + "</p>");
      document.write("<p>Age: " + person.age + "</p>");
   </script>
</body>
</html>