Что такое прототип в JS

Вопрос

Что такое прототип в JS

Профессия

Frontend Developer

Что хочет услышать интервьюер

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

Ключевые тезисы

• Прототип — это механизм, с помощью которого объекты в JavaScript наследуют свойства и методы друг от друга.
• Каждый объект в JS имеет скрытое свойство [[Prototype]], которое ссылается на другой объект или на null.
• Прототипное наследование позволяет создавать цепочки объектов, где дочерние объекты могут использовать свойства и методы родительских.
• Методы и свойства можно добавлять в прототип через Object.prototype или через конструктор функции.
• В ES6 появились классы, которые упрощают работу с прототипами, но под капотом это всё равно прототипное наследование.

Подробный ответ

Прототип в JavaScript — это механизм, который позволяет объектам наследовать свойства и методы друг от друга. Каждый объект в JS имеет скрытое свойство [[Prototype]], которое ссылается на другой объект или на null. Это свойство можно получить с помощью Object.getPrototypeOf(obj) или через устаревший __proto__. Прототипное наследование позволяет создавать цепочки объектов, где дочерние объекты могут использовать свойства и методы родительских. Например, если у объекта нет определенного свойства или метода, JavaScript автоматически ищет его в прототипе, затем в прототипе прототипа и так далее, пока не достигнет конца цепочки (обычно это null). Это называется цепочкой прототипов. В ES6 появились классы, которые упрощают работу с прототипами, но под капотом это всё равно прототипное наследование. Например, когда вы создаете класс и метод в нем, этот метод добавляется в прототип объекта, созданного через этот класс.

Практические примеры

Пример 1

Пример создания объекта с определенным прототипом: `const animal = { sound: 'Unknown' }; const dog = Object.create(animal); dog.sound = 'Woof'; console.log(dog.sound); // 'Woof'`

Пример 2

Пример использования прототипа через конструктор функции: `function Person(name) { this.name = name; } Person.prototype.greet = function() { console.log('Hello, ' + this.name); }; const person = new Person('Alice'); person.greet(); // 'Hello, Alice'`

Пример 3

Пример цепочки прототипов: `const parent = { age: 30 }; const child = Object.create(parent); console.log(child.age); // 30`

Частые ошибки

• Смешение понятий __proto__ и prototype. __proto__ — это свойство объекта, которое ссылается на его прототип, а prototype — это свойство функции-конструктора, которое используется для установки прототипа объектов, созданных через эту функцию.
• Непонимание, что методы, добавленные в prototype, доступны всем экземплярам объекта, созданным через этот конструктор.

Связанные темы

• Концепция this в JavaScript
• Классы в ES6 и их связь с прототипами
• Замыкания в JavaScript
• Семантическая верстка и ее роль во фронтенд-разработке

Follow-up вопросы

Как можно создать объект с определенным прототипом?

Уровень: basic

Для создания объекта с определенным прототипом можно использовать метод Object.create(proto), где proto — объект, который будет прототипом для нового объекта.

Чем отличается __proto__ от prototype?

Уровень: intermediate

__proto__ — это свойство объекта, которое указывает на его прототип, а prototype — это свойство функции-конструктора, которое используется для создания прототипа при вызове функции с new.

Как работает цепочка прототипов?

Уровень: basic

Цепочка прототипов — это последовательность объектов, где каждый объект ссылается на прототип. Если свойство или метод не найдены в текущем объекте, поиск продолжается в его прототипе и далее по цепочке до null.

Как можно изменить прототип объекта и какие есть ограничения?

Уровень: advanced

Прототип объекта можно изменить с помощью Object.setPrototypeOf(obj, proto), но это может негативно сказаться на производительности. Также можно использовать __proto__, но это не рекомендуется из-за нестандартности.

Какая связь между классами в ES6 и прототипами?

Уровень: intermediate

Классы в ES6 — это синтаксический сахар над прототипным наследованием. Под капотом они используют прототипы для реализации наследования, методов и свойств.