Прежде чем читать эту статью, убедитесь, что слова «Область» и «Контекст» звучат знакомо с точки зрения JavaScript. Статью может быть намного сложнее понять, если вы никогда не слышали этих слов.

Прежде чем начать, я хочу поблагодарить Кайла Симпсона за то, что он разместил на GitHub сообщение «Вы не знаете JavaScript». Я считаю, что это приветственная книга для новичков, таких как я, чтобы понять, как работает JavaScript.

Что именно произошло? Откуда взялись прототипы?

Приведенный выше код может показаться вам знакомым, если вы используете JavaScript. Здесь объявляется функция Dog, которая затем используется для «инициализации» нового объекта dog, которого зовут Goku. Вы когда-нибудь задумывались, почему функция Dog возвращает объект, не говоря уже о том, что функция Dog не имеет даже оператора return! Ну, это имеет прямое отношение к слову «новый».

Когда приведенный выше код запускается, вот более длинная история того, что произошло:

I. Функция Dog проанализирована и оценена

II. Создается объект Dog.prototype, а также создаются связи между Dog.prototype и Dog.

III. var Gogu = новая собака (имя) выполняется

IV. Создается новый объект, который связывается с Dog.prototype. Объект неявно передается функции Dog как «этот», а затем, после того как функция Dog присваивает имя, вес, лай «этому», «это» неявно возвращается функцией Dog, присваиваемое переменной dog_Goku (как показано на рис. график ниже)

Установить прототипы

На данный момент вы можете подумать, что зачем нам нужны прототипы, они кажутся бесполезными! Давайте изменим прототипы.

Ждать! Это не кажется правильным! Когда вызывается функция bark, распечатывается «I am Dog Goku», потому что объект dog_Goku имеет функцию «bark», хранящуюся в самой стороне. Однако внутри dog_Goku нет функции «съесть», как она сработала?

Вот что происходит, когда «ключ» помещается в объект, в нашем случае dog_Goku, для получения значения:

I. «Ключ» помещается в dog_Goku для получения значения

II. dog_Goku проверь, у меня есть этот ‹ключ›? если да, верните значение, иначе перейдите к Object dog_Goku.__proto__(тот же объект, что и Dog.proptotype), чтобы узнать, есть ли у dog_Goku.__proto__ ключ.

III. dog_Goku.__proto__ проверь, у меня есть ключ? да! вернуть значение, которому соответствует ключ.

Что делать, если в Dog.prototype нет ключа «съесть»? Затем объект Dog.prototype будет проверять, есть ли у Dog.prototype.__proto__(который является Object.prototype) ключ «есть».

Что если у Dog.prototype.__proto__(Object.prototype) нет ключа «есть»? Затем вернет Error eat is not a function. (Дружеское напоминание, Object.prototype.__proto___ равно null, и вы не можете настроить его так, чтобы он указывал на другие объекты)

Наследование прототипа

Взгляните на структуру ниже на графике III.

Если эта структура достигается, Бум, наследование достигается за счет магии __proto__ и контекста javascript.

Проверьте код ниже!

В приведенном выше коде, если ‹key› передается Гоку, Гоку будет проходить через объекты Goku-›SmallDog.prototype-›Dog.prototype-›Object.prototype, пытаясь найти первый значение или функция, соответствующая ‹ключу›, или вернуть неопределенное значение, если ‹ключ› не найден. Другими словами, функция/свойство, находящаяся в нижней части иерархии, может переопределить функцию/свойство, находящуюся в более высокой части иерархии. (См. функцию приветствия выше)

И! если полученное значение является функцией, функция будет выполняться с использованием контекста вызывающей стороны, в нашем случае она будет выполняться на объекте Гоку или Наруто!

В совокупности у нас есть структура данных, которая допускает определенные варианты будущего:

I. Дочерний компонент может использовать функцию/свойство родительского компонента.

II. Дочерний компонент может переопределить функцию/свойство родительского компонента.

Если вы доберетесь сюда, не забудьте проверить стиль OLOO в ЗДЕСЬ Кайла-Симпсона. Я обещаю вам, что это стоит потраченного времени.