Wprowadzenie do prototypów

3.1 Koncepcja prototypów

Prototypy są jedną z kluczowych koncepcji w JavaScript, pozwalając obiektom dziedziczyć właściwości i metody od innych obiektów. W odróżnieniu od wielu innych języków programowania, gdzie dziedziczenie realizowane jest przez klasy, w JavaScript dziedziczenie opiera się na prototypach. Teraz przyjrzymy się, czym są prototypy, jak działają i jak ich można używać.

Prototyp w JavaScript to obiekt, od którego inne obiekty mogą dziedziczyć właściwości i metody. Każdy obiekt w JavaScript ma ukryte odniesienie do innego obiektu – ukrytą właściwość [[Prototype]], która wskazuje na jego prototyp.

Ten prototyp może mieć swoje własne prototypy, tworząc łańcuch prototypów (prototype chain). Właściwości i metody obiektu mogą być dziedziczone przez ten łańcuch. To pozwala obiektom dzielić się funkcjonalnością i tworzyć hierarchie obiektów.

Właściwość proto

W JavaScript każdy obiekt ma właściwość __proto__, która wskazuje na jego prototyp. Ta właściwość jest używana do wyszukiwania właściwości i metod, jeśli nie zostaną znalezione w samym obiekcie.

W tym przykładzie obiekt child dziedziczy metodę greet() od obiektu parent:

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

      const child = {
        __proto__: parent
      };

      child.greet(); // Wyświetli: Hello from parent
    
  

3.2 Tworzenie i używanie prototypów

1. Object.create()

Metoda Object.create() pozwala utworzyć nowy obiekt z określonym prototypem.

Przykład:

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

      const child = Object.create(parent);
      child.greet(); // Wyświetli: Hello from parent
    
  

2. Dodawanie właściwości i metod do prototypu

Właściwości i metody mogą być dodawane do prototypu, aby były dostępne dla wszystkich obiektów, które go dziedziczą.

W tym przykładzie metoda speak() jest dodawana do prototypu animal i jest dostępna dla obiektu dog:

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

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Wyświetli: Buddy makes a noise.
    
  

3. Zmiana prototypu obiektu

Prototyp obiektu można zmienić za pomocą metody Object.setPrototypeOf().

W tym przykładzie prototyp obiektu duck jest zmieniany z animal na 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();   // Wyświetli: Bird flies
      duck.quack(); // Wyświetli: Duck quacks
    
  

3.3 Praca z prototypami

1. Sprawdzanie prototypu obiektu

Metoda Object.getPrototypeOf() pozwala uzyskać prototyp obiektu.

Przykład:

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

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Wyświetli: true
    
  

2. Sprawdzanie przynależności obiektu do prototypu

Operator instanceof jest używany do sprawdzania, czy obiekt jest instancją określonego konstruktora lub prototypu.

Przykład:

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

      const john = new Person('John');

      console.log(john instanceof Person); // Wyświetli: true
    
  

3. Iteracja po właściwościach obiektu i jego prototypu

Do iteracji po właściwościach obiektu i jego prototypu można użyć pętli for...in, która wymienia wszystkie enumerowalne właściwości.

Przykład:

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

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

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

      // Wyświetli:
      // name
      // greet
    
  

Do iteracji tylko po własnych właściwościach obiektu używa się metody Object.keys() lub pętli for...of z metodą Object.entries().

Przykład:

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

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

      console.log(Object.keys(child)); // Wyświetli: ['name']

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

      // Wyświetli:
      // name Child