Немного о __proto__ и prototype в JavaScript
— 2 минуты
__proto__ — это внутреннее свойство любого объекта или примитива в JavaScript, которое ссылается на объект, от которого он наследует свойства и методы
prototype — это свойство функций-конструкторов (или классов), которое используется для определения объектов, которые будут выступать в роли прототипов для всех экземпляров, созданных этим конструктором
В чём разница?
__proto__ есть у каждого объекта и ссылается на прототип, из которого этот объект черпает свои свойства и методы
prototype есть только у функций-конструкторов (и классов) и используется для задания свойств и методов, которые будут доступны всем экземплярам, созданным с помощью этого конструктора
Если рассмотреть в коде, то получим следующее:
javascript1const name = "Denis" 2const surname = "Putnov" 3 4name.__proto__ === String.prototype // true 5name.prototype // undefined 6name.__proto__ === surname.__proto__ // true 7 8const age = 23 9 10age.__proto__ === Number.prototype // true 11age.prototype // undefined 12
То есть, по факту, свойство __proto__ можно назвать некоторым костылём языка, благодаря которому мы можем понять с помощью чего конкретно был создан наш новый объект
__proto__ всегда ссылается на какой-то прототип, на основе которого был создан новый объект
В примере выше, мы при помощи __proto__ можем увидеть, что name в итоге создан при помощи прототипа String
Зачем всё это нужно? Для корректной работы прототипного наследования, конечно же. Рассмотрим ещё один пример кода:
javascript1const channel = { 2 name: "progway" 3} 4 5channel.toString() 6// как же javascript'у понять, откуда взять метод? 7// под капотом вызывается это вот так: 8 9(channel.__proto__).toString() 10 11// а мы знаем, что channel.__proto__ === Object.ptototype 12// поэтому выглядеть вызов будет примерно вот так 13 14Object.prototype.toString.call(channel) 15
Вообще, вся эта теория скорее всего не нужна рядовому разработчику. Это что-то из разряда теории ядра JavaScript, которая вроде есть, но не понятно зачем она нужна в таком приложении в реальной разработке
Зато вопросы о механизме прототипного наследования часто встречаются на собеседованиях, так что это может быть полезно как минимум там
Если моё объяснение не очень понятно, то есть отличный видос у камасутры на эту тему, где всё разжёвано максимально понятно, советую
Статья была полезной?
Читайте также:
— 2 минуты
Как реагировать на изменения объекта
В JavaScript обычные объекты не умеют уведомлять о своих изменениях, однако...
— 2 минуты
Что такое Server-Sent Events
SSE — это технология для однонаправленного соединения между сервером и клие...
— 4 минуты
Связываем React и localStorage через useSyncExternalStore
Как согласовать изменение состояния в реакте и поля в localStorage? До нед...