Немного о __proto__ и prototype в JavaScript

  —  2 минуты

#web#javascript#theory#code
Читать статью в Telegram

__proto__ — это внутреннее свойство любого объекта или примитива в JavaScript, которое ссылается на объект, от которого он наследует свойства и методы

prototype — это свойство функций-конструкторов (или классов), которое используется для определения объектов, которые будут выступать в роли прототипов для всех экземпляров, созданных этим конструктором

В чём разница?

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

prototype есть только у функций-конструкторов (и классов) и используется для задания свойств и методов, которые будут доступны всем экземплярам, созданным с помощью этого конструктора

Если рассмотреть в коде, то получим следующее:

javascript
1const 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

Зачем всё это нужно? Для корректной работы прототипного наследования, конечно же. Рассмотрим ещё один пример кода:

javascript
1const 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, которая вроде есть, но не понятно зачем она нужна в таком приложении в реальной разработке

Зато вопросы о механизме прототипного наследования часто встречаются на собеседованиях, так что это может быть полезно как минимум там

Если моё объяснение не очень понятно, то есть отличный видос у камасутры на эту тему, где всё разжёвано максимально понятно, советую

Статья была полезной?