Làm quen với prototypes

3.1 Khái niệm về prototypes

Prototypes là một trong những khái niệm chính trong JavaScript, cho phép các đối tượng thừa hưởng thuộc tính và phương pháp từ các đối tượng khác. Không giống như nhiều ngôn ngữ lập trình khác, nơi việc kế thừa được thực hiện qua các lớp, trong JavaScript nó dựa trên prototypes. Bây giờ chúng ta sẽ xem xét prototypes là gì, cách chúng hoạt động và cách sử dụng chúng.

Prototype trong JavaScript là một đối tượng mà các đối tượng khác có thể thừa hưởng thuộc tính và phương pháp từ đó. Mỗi đối tượng trong JavaScript có một liên kết ẩn tới một đối tượng khác - thuộc tính ẩn [[Prototype]], chỉ đến prototype của nó.

Prototype này có thể có prototypes của riêng mình, tạo thành một chuỗi prototypes (prototype chain). Các thuộc tính và phương pháp của đối tượng có thể được thừa hưởng qua chuỗi này. Điều này cho phép các đối tượng chia sẻ chức năng và tạo ra các hệ thống phân cấp đối tượng.

Thuộc tính proto

Trong JavaScript, mỗi đối tượng có thuộc tính __proto__, chỉ đến prototype của nó. Thuộc tính này được sử dụng để tìm kiếm các thuộc tính và phương pháp, nếu chúng không được tìm thấy trong chính đối tượng.

Trong ví dụ này, đối tượng child thừa hưởng phương pháp greet() từ đối tượng parent:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = {
        __proto__: parent
      };

      child.greet(); // Sẽ hiển thị: Hello from parent
    
  

3.2 Tạo và sử dụng prototypes

1. Object.create()

Phương pháp Object.create() cho phép tạo một đối tượng mới với prototype chỉ định.

Ví dụ:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.greet(); // Sẽ hiển thị: Hello from parent
    
  

2. Thêm thuộc tính và phương pháp vào prototype

Thuộc tính và phương pháp có thể được thêm vào prototype, để chúng có sẵn cho tất cả các đối tượng thừa hưởng nó.

Trong ví dụ này, phương pháp speak() được thêm vào prototype animal và có sẵn cho đối tượng dog:

    
      const animal = {
        speak() {
          console.log(`${this.name} makes a noise.`);
        }
      };

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Sẽ hiển thị: Buddy makes a noise.
    
  

3. Thay đổi prototype của đối tượng

Prototype của đối tượng có thể thay đổi bằng cách sử dụng phương pháp Object.setPrototypeOf().

Trong ví dụ này, prototype của đối tượng duck được thay đổi từ animal sang bird:

    
      const animal = {
        speak() {
          console.log('Animal speaks');
        }
      };

      const bird = {
        fly() {
          console.log('Bird flies');
        }
      };

      const duck = {
        __proto__: animal,
        quack() {
          console.log('Duck quacks');
        }
      };

      Object.setPrototypeOf(duck, bird);
      duck.fly();   // Sẽ hiển thị: Bird flies
      duck.quack(); // Sẽ hiển thị: Duck quacks
    
  

3.3 Làm việc với prototypes

1. Kiểm tra prototype của đối tượng

Phương pháp Object.getPrototypeOf() cho phép lấy prototype của đối tượng.

Ví dụ:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Sẽ hiển thị: true
    
  

2. Kiểm tra thuộc về prototype của đối tượng

Toán tử instanceof được sử dụng để kiểm tra xem đối tượng có phải là một instance của một hàm tạo hoặc prototype cụ thể hay không.

Ví dụ:

    
      function Person(name) {
        this.name = name;
      }

      const john = new Person('John');

      console.log(john instanceof Person); // Sẽ hiển thị: true
    
  

3. Duyệt qua thuộc tính của đối tượng và prototype của nó

Để duyệt qua thuộc tính của đối tượng và prototype của nó, có thể sử dụng vòng lặp for...in, vòng lặp này liệt kê tất cả các thuộc tính có thể liệt kê.

Ví dụ:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      for (let key in child) {
        console.log(key);
      }

      // Sẽ hiển thị:
      // name
      // greet
    
  

Để duyệt qua chỉ các thuộc tính riêng của đối tượng, có thể sử dụng phương pháp Object.keys() hoặc vòng lặp for...of với phương pháp Object.entries().

Ví dụ:

    
      const parent = {
        greet() {
          console.log('Hello from parent');
        }
      };

      const child = Object.create(parent);
      child.name = 'Child';

      console.log(Object.keys(child)); // Sẽ hiển thị: ['name']

      for (const [key, value] of Object.entries(child)) {
        console.log(key, value);
      }

      // Sẽ hiển thị:
      // name Child