Знакомство с прототипами

3.1 Концепция прототипов

Прототипы являются одной из ключевых концепций в JavaScript, позволяя объектам наследовать свойства и методы от других объектов. В отличие от многих других языков программирования, где наследование реализовано через классы, в JavaScript оно основано на прототипах. Сейчас мы рассмотрим, что такое прототипы, как они работают и как их можно использовать.

Прототип в JavaScript — это объект, от которого другие объекты могут наследовать свойства и методы. Каждый объект в JavaScript имеет скрытую ссылку на другой объект — скрытое свойство [[Prototype]], которое указывает на его прототип.

Этот прототип может иметь свои собственные прототипы, образуя цепочку прототипов (prototype chain). Свойства и методы объекта могут быть унаследованы по этой цепочке. Это позволяет объектам делиться функциональностью и создавать иерархии объектов.

Свойство proto

В JavaScript у каждого объекта есть свойство __proto__, которое указывает на его прототип. Это свойство используется для поиска свойств и методов, если они не найдены в самом объекте.

В этом примере объект child наследует метод greet() от объекта parent:

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

      const child = {
        __proto__: parent
      };

      child.greet(); // Выведет: Hello from parent
    
  

3.2 Создание и использование прототипов

1. Object.create()

Метод Object.create() позволяет создать новый объект с указанным прототипом.

Пример:

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

      const child = Object.create(parent);
      child.greet(); // Выведет: Hello from parent
    
  

2. Добавление свойств и методов в прототип

Свойства и методы могут быть добавлены в прототип, чтобы они были доступны всем объектам, которые его наследуют.

В этом примере метод speak() добавляется в прототип animal и доступен объекту dog:

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

      const dog = Object.create(animal);
      dog.name = 'Buddy';
      dog.speak(); // Выведет: Buddy makes a noise.
    
  

3. Изменение прототипа объекта

Прототип объекта можно изменить с помощью метода Object.setPrototypeOf().

В этом примере прототип объекта duck изменяется с animal на 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();   // Выведет: Bird flies
      duck.quack(); // Выведет: Duck quacks
    
  

3.3 Работа с прототипами

1. Проверка прототипа объекта

Метод Object.getPrototypeOf() позволяет получить прототип объекта.

Пример:

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

      const child = Object.create(parent);

      console.log(Object.getPrototypeOf(child) === parent); // Выведет: true
    
  

2. Проверка принадлежности объекта к прототипу

Оператор instanceof используется для проверки, является ли объект экземпляром определенного конструктора или прототипа.

Пример:

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

      const john = new Person('John');

      console.log(john instanceof Person); // Выведет: true
    
  

3. Перебор свойств объекта и его прототипа

Для перебора свойств объекта и его прототипа можно использовать цикл for...in, который перечисляет все перечисляемые свойства.

Пример:

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

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

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

      // Выведет:
      // name
      // greet
    
  

Для перебора только собственных свойств объекта используется метод Object.keys() или цикл for...of с методом Object.entries().

Пример:

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

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

      console.log(Object.keys(child)); // Выведет: ['name']

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

      // Выведет:
      // name Child
    
  

1

Задача

Модуль 1: Web Core, 20 уровень, 2 лекция

Недоступна

Методы в прототипе

Методы в прототипе

Открыть

1

Задача

Модуль 1: Web Core, 20 уровень, 2 лекция

Недоступна

Цепочка прототипов

Цепочка прототипов

Открыть