Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Khác biệt chính giữa đối tượng tạo bằng object literal và constructor function

Trong JavaScript, cách bạn tạo đối tượng quyết định việc dữ liệu được chia sẻ hay độc lập giữa các tham chiếu. Hai cách phổ biến là object literal và constructor function.

1. Đối tượng tạo bằng Object Literal (Singleton)

Khi sử dụng object literal, bạn tạo ra một singleton — chỉ tồn tại một thể hiện duy nhất. Mọi biến gán bằng đối tượng này đều trỏ đến cùng một vị trí bộ nhớ. Do đó, thay đổi qua biến này sẽ ảnh hưởng đến tất cả các tham chiếu khác.

Ví dụ

<script>
  var student = { name: "Ravi" };
  var newStudent = student; // Cùng tham chiếu

  document.write("Trước thay đổi: ");
  document.write("student.name = " + student.name + "; ");
  document.write("newStudent.name = " + newStudent.name);

  newStudent.name = "Kumar"; // Thay đổi qua newStudent

  document.write("Sau thay đổi: ");
  document.write("student.name = " + student.name + "; ");
  document.write("newStudent.name = " + newStudent.name);
</script>

Kết quả

Trước thay đổi: student.name = Ravi; newStudent.name = Ravi
Sau thay đổi: student.name = Kumar; newStudent.name = Kumar

Cả hai biến đều phản ánh thay đổi vì chúng trỏ đến cùng một đối tượng.

2. Đối tượng tạo bằng Constructor Function (Nhiều thể hiện)

Constructor function cho phép tạo nhiều thể hiện (instance) độc lập. Mỗi lần gọi new Constructor() sẽ cấp phát bộ nhớ mới. Thay đổi trên thể hiện này không ảnh hưởng đến thể hiện khác.

Ví dụ

<script>
  function Student() {
    this.name = "Ravi";
  }
  var student = new Student();
  var newStudent = new Student(); // Thể hiện riêng biệt

  document.write("Trước thay đổi: ");
  document.write("student.name = " + student.name + "; ");
  document.write("newStudent.name = " + newStudent.name);

  newStudent.name = "Kumar";

  document.write("Sau thay đổi: ");
  document.write("student.name = " + student.name + "; ");
  document.write("newStudent.name = " + newStudent.name);
</script>

Kết quả

Trước thay đổi: student.name = Ravi; newStudent.name = Ravi
Sau thay đổi: student.name = Ravi; newStudent.name = Kumar

Chỉ newStudent bị thay đổi, student giữ nguyên giá trị.

Tóm tắt

Đặc điểmObject LiteralConstructor Function
Số lượng thể hiện1 (Singleton)Nhiều (Multiple instances)
Chia sẻ dữ liệuCó — thay đổi ảnh hưởng toàn bộKhông — mỗi thể hiện độc lập
Phù hợp choCấu hình, state toàn cụcĐối tượng cần nhiều bản sao (user, product...)