Прототипы и прототипное наследование в JavaScript.

Привет, ниндзя, как у вас дела? Итак, сегодня давайте рассмотрим одну из фантастических концепций JavaScript. Угадай, что …. хм, громче ... да, именно так, Прототип наследования. Прежде чем углубиться в наследование, давайте добавим свет на Object и Prototype . Так что же такое объект?

Объект - это набор свойств, к которому прикреплен один объект Prototype. Давайте посмотрим на следующий фрагмент, чтобы увидеть, как он был создан.

const car = {
  color: 'white'
  ...
  ...
}

Здесь у нас есть константа car с назначенным объектом, у которого есть цвет свойства. Объект может иметь любое количество свойств, и ему может быть присвоен любой тип.

Теперь давайте определим прототип.

Прототипы - это простые простые объекты, которые могут иметь свои свойства.

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

const car = {
  color: 'white'
}
console.log(car);

Скопируйте этот фрагмент и вставьте его в консоль браузера. Тогда вы должны увидеть его утешение следующим образом:

Прототип, о котором мы говорим, - это объект, который назначен свойству __proto__, которое указано красной стрелкой на приведенном выше снимке экрана.

Итак, теперь мы рассмотрели Объекты и Прототипы, давайте погрузимся в C hain из Prototypes, также известного как Prototype Chain.

Цепочка прототипов - это конечная цепочка объектов, которая дает нам право адаптировать наследование.

Итак, чтобы проанализировать цепочку прототипов, давайте создадим дочерние объекты из объекта car, который мы определили ранее. Есть много способов создавать объекты из других объектов в JavaScript, давайте перейдем к Object.create ().

const car = {
  color: 'white',
  wheels: 4,
  speed: 0,
  doors: 4
}
const tesla = Object.create(car)
console.log(tesla.color);

Теперь давайте угадаем, что здесь записывает оператор console.log? Обычный человек начинает гадать !!!

<<<<<<<<<<<<… >>>>>>>>>>>>>

Думаю, вы угадали, да, это утешает "белый" !!! Но как?? Мы даже не добавили цвет свойства к только что созданному объекту tesla. Для более глубокого понимания давайте посмотрим на следующий снимок экрана.

Поскольку мы создали tesla из объекта car, свойство _proto_ tesla уже содержит свойства автомобиля. Таким образом, при утешении tesla.color он сначала смотрит в объект telsa, если свойство color присутствует там, и, если оно не найдено, оно поднимается по цепочке прототипов и вскоре проверяет его. Но в этом случае он находит его при поиске первого уровня в цепочке и выводит его на консоль.

Итак, теперь давайте прикрепим цвет свойства к tesla и посмотрим, что произойдет !!!

const car = {
  color: 'white',
  wheels: 4,
  speed: 0,
  doors: 4
}
const tesla = Object.create(car)
 tesla.color = 'balck';
console.log(tesla.color)

Вы знаете упражнение, давайте начнем гадать

<<<<<<<<<<<<… >>>>>>>>>>>>>

И снова вы угадали, его «черный» классный !!!. На этот раз, когда выполняется поиск tesla.color, он находится в самой Tesla, поэтому консольный результат здесь будет «черным». Таким образом, мы видим, что свойства можно полностью переопределить.

Чтобы получить хорошее представление о цепочке, давайте создадим цепочку прототипов на один уровень глубже и проконсультируем ее.

const car = {
  color: 'white',
  wheels: 4,
  speed: 0,
  doors: 4
}
const tesla = Object.create(car)
tesla.color = 'balck'
const teslaVersion1 = Object.create(tesla);
console.log(teslaVersion1)

Здесь мы создаем еще одну машину из объекта tesla, который уже является автомобилем. Новый автомобиль / объект называется teslaVersion1. Это приведет к следующему выводу.

Здесь мы видим формирование цепочки прототипов, и мы уже обсуждали, как она проходит. И да, сейчас довольно ясно, как наследование достигается в Javascript с помощью прототипов и цепочки прототипов.

Хорошо, тогда на этом все. Надеюсь, эта статья была полезной. Увидимся в следующей статье. Ваше здоровье !!!! :)

Прототипы и прототипное наследование в JavaScript.

Похожие вопросы