Автор оригинала: FreeCodeCamp Community Member.
Nash Vail.
Прототипов наследования, возможно, наименее понимаемый аспект JavaScript. Ну, хорошая новость заключается в том, что если вы понимаете, как работает CSS, вы также можете понять, как работают прототипы JavaScript.
Красиво, когда что-то простое способное объяснить что-то, казалось бы, сложное, аналогию – как пиледриюр, приводит к полюсу глубоко в землю, аналогия управляет точкой домой.
Я любитель аналогии, аналогии.
Вот так.
Прототипы в кнопках CSS
Смотрите две кнопки выше? Мы собираемся разработать их в CSS.
Давайте пойдем вперед и быстро писать стили для этих двух кнопок, начиная с .BTN
.btn { min-width: 135px; min-height: 45px; font-family: 'Avenir Next', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 1.3px; color: #4D815B; background-color: #FFF; border: 2px solid #4D815B; border-radius: 4px; padding: 5px 20px; cursor: pointer;}Это достаточно простой блок CSS-кода.
Теперь давайте перейдем к стилям для .BTN-TOVE
.btn-solid { min-width: 135px; min-height: 45px; font-family: 'Avenir Next', sans-serif; font-size: 18px; font-weight: bold; letter-spacing: 1.3px; color: #FFF; background-color: #4D815B; border: 2px solid #4D815B; border-radius: 4px; padding: 5px 20px; cursor: pointer;}Как вы могли бы уже заметить, кроме жирных смелых, все остальные стили в .BTN-SOVE идентичны такому из .btn Отказ И если вы знакомы с Sass , вы можете знать, что .BTN-SOVE Стили могут быть переписаны в SAS, как так:
.btn-solid { @extend .btn; color: #FFF; background-color: #4D815B;}Как вы можете видеть, .BTN-SOVE наследует стили из .btn Затем затем переопределяют некоторые из них (цвет шрифта и фона), чтобы создать себя. Что приводит нас к выводу, что .BTN-SOVE является специализированной версией .btn Отказ Или, другими словами, .BTN-SOVE это .btn Но с разными цветами шрифта и фона. Это имеет смысл правильно? Но подожди, что есть.
Допустим, мы хотим создать большую кнопку, .BTN-LG Отказ Мы будем использовать .btn как Прототип поставлять базовые стили. Тогда, похоже, как мы модифицировали фон и цвета шрифта для создания .BTN-SOVE , мы изменим свойство размера шрифта в большее значение, чтобы создать большую кнопку.
Оба .BTN-LG и .BTN-SOVE специализированные версии .btn Отказ .btn Поставляет базовые стили до .BTN-LG и .BTN-SOVE Что затем перезаписывает некоторые из базовых стилей, чтобы создать себя. Это говорит нам, что одна кнопка, которую мы решаем – .btn В нашем случае – можно использовать в качестве поставщика базовых стилей для нескольких предметов.
В этом разделе мы попытались определить концепцию Прототипы Для кнопок CSS. Прототип является объектом, который поставляет базовые стили, которые могут быть расширены для создания различных экземпляров кнопок. Это определение прототипа очень близко к тому, какие прототипы на самом деле означают в условиях программирования.
В условиях программирования прототип – это объект, который обеспечивает базовое поведение второму объекту. Затем второй объект расширяет это основание для формирования собственной специализации. Давайте посмотрим в следующем разделе, как наши знания о прототипах в CSS кнопки отображаются на JavaScript.
Прототипы в JavaScript
Рассмотрим следующий объект JavaScript:
let obj = { a: 1};Мы знаем, что ценность А можно получить доступ к obj.a Учитывая, что А явно недвижимость obj Отказ Но есть еще, вы также можете позвонить obj.hasownProperty («A») Чтобы проверить, если obj на самом деле имеет свойство имени А Отказ
Теперь подождите секунду – от того, что мы можем видеть, obj не имеет свойства под названием HasownProperty Определяется на нем. Где сделал HasownProperty родом из? Чтобы ответить на этот вопрос, мы должны вернуться к кнопкам, которые мы только что закончили создание.
.BTN-SOVE Просто имеет фон и цвета шрифта, определенные на нем. Где это становится, например, Пограничный радиус из? Мы знаем, что .BTN-SOVE это специализация .btn Итак, мы можем видеть это .BTN-SOVE становится стилем как Пограничный радиус , ширина , Высота и прокладка от .btn Отказ Может быть то же самое с obj ?
Так же, как .BTN-SOVE и .BTN-LG Получите их базовые стили из .btn , obj или любой другой объект JavaScript для этого получают их базовое поведение от Еще один объект – Объект. Прототип Отказ И это Объект. Прототип есть HasownProperty Определяется на нем. И в результате это дает obj Доступ к HasownProperty Метод – просто как .BTN-SOVE имел доступ к .btn ‘s Пограничный радиус свойство.
Это – объект (Обжим) Наследование его свойств и базового поведения от другого объекта (Объект. Прототип) – это то, что мы называем прототипом наследования. Обратите внимание, что нет Класс участвует в взаимодействии.
Фактическая внутренняя работа прототипов JavaScript и наших CSS «Прототипы» – это способ. Но с целью нашей аналогии мы можем игнорировать, как они работают за кулисами.
Объект. Прототип Разве не единственный прототип, доступный в JavaScript. Есть Array.Prototype , Функция. Прототип , Номер. Прототип и несколько других. Работа всех этих прототипов заключается в том, чтобы поставить базовое поведение или методы полезности в их экземпляры.
Например, каждый массив, объявленный в JavaScript, имеет доступ к . купить , .sort , .Foreach и .map только из-за прототипового связывания. И по той же причине, что каждая функция имеет доступ к .call , .apply , .bind Отказ
Прототипы и прототиповому наследству не относятся к JavaScript. Это конструкция, которую JavaScript использует внутренне, что позволяет нам использовать его в наших собственных программах. Прежде чем мы посмотрим на то, как именно мы можем сделать это, нам нужно понять, что такое прототипов цепочки.
Прототип цепочки
Нам нужно вернуться к аналогии кнопки на один раз. Допустим, я хочу создать большую сплошную кнопку, .BTN-Solid-LG :
Базовые стили к .BTN-Solid-LG поставляются .BTN-SOVE и .BTN-Solid-LG Перезаписывает свойство размера шрифта для создания самого.
Посмотрите ближе, хотя. .BTN-SOVE Определяется всего два стиля фона-цвет и цвет (шрифт). Это значит .BTN-Solid-LG Имеет всего 3 стиля для себя: фоновый цвет, цвет и размер шрифта. Где ширина , Высота , Пограничный радиус приходящий из?
Хорошо, вот подсказка:
Если вы хотели создать дополнительную большую кнопку .BTN-Solid-XLG Вы могли бы сделать это с .BTN-Solid-LG как прототип. Но как вся эта карта для JavaScript?
В JavaScript вам разрешено также создавать прототипы цепей. Как только вы понимаете это, вы разблокируете целый набор инструментов для написания удивительно мощного кода. Да, Удивительно мощный Отказ
Давайте посмотрим, как прототипные цепи в JavaScript работают.
Помните объект, который мы создали в предыдущем разделе? Тот, который мы тщательно названы obj ? Знаете ли вы, что вы можете создать столько объектов, сколько вы хотите с obj как прототип?
Object.Create Позволяет создать новый объект из указанного объекта прототипа. Это означает, что вы можете создать другой объект, obj2 , который имеет obj Как его первый прототип:
let obj2 = Object.create(obj);
// Add a property 'b' to obj2obj2.b = 2;
Если вы не следуете до сих пор, вы должны понимать, что даже …| obj2 нет недвижимости А Определяется на нем, делает console.log (obj2.a) не приведет к ошибке, но вместо этого 1 Войдите в консоль. Вроде так:
Когда obj2 ищет А Сначала он сначала ищет свои собственные свойства. Если он не может найти соответствующую собственность, он просит его прототип (OBJ), где он наконец находит А Отказ Если бы такой случай, когда он все еще не мог найти А Поиск будет продолжать цепь прототипа, пока не достигнет последней ссылки, Объект. Прототип Отказ
С другой стороны, если А был определен на obj2 он переопределил все остальные А S, если определено на любом из его прототипов. Подобно как .BTN-SOVE Переопределен .btn ‘s цвет и Фон-цвет характеристики. Это называется Недвижимость замыкает Отказ
Но как насчет длины прототипа цепи? Есть ли ограничение?
Там нет предела до длины цепи прототипа. Там также нет никаких ограничений на ветви. Это означает, что вы можете создать несколько экземпляров с Объект. Прототип , obj или obj2 как прототип.
Итак, как это новые знания о прототипах и прототиповом цепочке помогут вам написать лучший код?
Написание лучшего кода с прототипами
Целью данной статьи было объяснить вам, какие прототипы являются, и как работает прототипов наследования. Я надеюсь, что мне удалось в этом.
Для этого последнего раздела я позволю себе пойти немного разглагольствовать. Я надеюсь, что вы не возражаете.
Если вы посмотрите на код JavaScript, доступны в Интернете – будь то в открытых исходных проектах на Github или в ручках на кодепене – вы обнаружите, что большинство из них используют шаблон конструктора для создания объектов.
function Circle(radius) { this.radius = radius;}Circle.prototype.area = function() { return Math.PI * this.radius * this.radius;}// Constructor pattern for creating new objectslet circ = new Circle(5);
Шаблон конструктора выглядит как классы. В первые дни, когда JavaScript был гораздо менее популярен, чем сегодня, Новый Ключевое слово было добавлено в качестве маркетинговой стратегии.
Это космение было призвано сделать JavaScript более знакомы для классически обученных программистов. Хотя это спонтибильно, насколько это было успешно, оно непреднамеренно также скрыло истинную прототирующую природу языка.
Реальность такова, что хотя конструкторы похожи на классы, они вообще не ведут себя как занятия. В JavaScript есть объекты, а объекты, простирающиеся от других объектов. Конструкторы и классы никогда не приходят в картину. Шаблон конструктора без необходимости усложняет вещи, есть много, что происходит за кулисами Отказ
Я умоляю вас – теперь, когда у вас есть твердое понимание прототипов – прекратить использование рисунка конструктора.
Почему бы не сделать это вместо этого?
let Circle = { create(radius) { // Creating prototypal linkage using Object.create let obj = Object.create(this); obj.radius = radius; return obj; }, area() { return Math.PI * this.radius * this.radius; }};let circ = Circle.create(5);
Я надеюсь, что эта аналогия помогла вам лучше понять прототипы, прототипы цепочки и прототипы наследования с Object.Create Отказ Теперь вы можете написать лучший код и прекратить использование претенциозных классов.
Спасибо за чтение! Если моя статья была полезна, щелкните маленькое зеленое сердце ниже, чтобы порекомендовать его, и, пожалуйста, поделитесь этим с вашим собратьем.
А для дальнейшего чтения, проверьте aadit shah’s Почему прототипы наследования имеют значение Отказ