Прототипно-ориентированное программирование на Javascript
В этой статье предполагается, что у вас есть базовые знания JavaScript.
почему тебе нужно это знать
Все говорят о es6, es7, es… и любой, кто начинает с javascript, испытывает соблазн сразу перейти к причудливому ключевому слову «class» в es6 и последующих версиях, но как разработчик программного обеспечения вы, скорее всего, столкнетесь с базой кода, написанной с помощью es5 и такие слова, как «прототип», могут вывести вас из равновесия. Я собрал этот фрагмент, чтобы объяснить несколько концепций, смоделировав платформу заказа фаст-фуда.
что такое объектно-ориентированное программирование?
ООП (объектно-ориентированное программирование) — это просто парадигма программирования, основанная на концепции объектов. Это один из нескольких основных подходов к процессу разработки программного обеспечения. поэтому любой язык программирования, использующий объекты, является объектно-ориентированным.
что такое прототипно-ориентированное программирование?
Прототипно-ориентированное программирование — это на самом деле просто стиль объектно-ориентированного программирования, в котором свойства и методы объектов могут совместно использоваться посредством обобщенных объектов, которые могут быть клонированы и расширены. В отличие от других языков на основе классов, например Java, которые вместо этого определяют классы как схемы объектов.
Объекты
Объекты в JavaScript — это пары ключ-значение, используемые для моделирования реальных объектов. Они используются для группировки связанных данных. «Учить больше»…
Пример:. Рассмотрим пользователя, который хочет заказать еду в Интернете, какие качества или свойства определяют этого пользователя?
мы могли бы создать такой простой пользовательский объект…
Все в пользовательском объекте называется свойствами объекта, переменные называются переменными экземпляра, а функции внутри объекта называются методами.
Проблема с этим простым стилем создания объектов становится очевидной, когда мы хотим создать 30 или более пользовательских объектов, потому что похожие объекты имеют одни и те же свойства, но могут иметь разные значения этих свойств. Например, у всех пользователей есть имя и адрес, но не у всех пользователей одинаковое имя или адрес.
Мы могли бы решить эту проблему, скопировав и вставив пользовательский объект столько раз, сколько захотим, скажем 30. Я уверен, что вы начинаете видеть, насколько это будет безумно напряженным, просматривая каждый объект и изменяя все свойства, чтобы сделать они уникальны для каждого пользователя. Это нарушает принцип DRY (не повторяйтесь) в программировании.
Музыка в стиле Игры престолов…
Конструкторы функций спешат на помощь
Многие из этих языков программирования в большей или меньшей степени поддерживают объектно-ориентированное программирование. Javascript не поддерживает полную концепцию объектно-ориентированного программирования, как другие языки, такие как Java или C #. Однако вы можете создать функцию таким образом, чтобы она действовала как класс.
Класс — это просто план / шаблон для объектов. Больше похоже на архитектурный план того, как будет выглядеть предлагаемое здание. Из него будет построено много зданий.
Следовательно, Конструкторы — это функции, которые создают новые объекты. Они определяют свойства и методы, которые будут применяться к новому объекту.
Конструкторы следуют нескольким соглашениям :
- Первая буква в имени конструктора всегда пишется с заглавной буквы, чтобы отличить их от функций, не являющихся конструкторами.
- Конструкторы используют ключевое слово «this» внутри тела функции для установки свойств объекта, который они будут создавать в будущем при вызове. «this» относится к новому объекту, который он создаст.
- Конструкторы определяют свойства и поведение вместо того, чтобы возвращать значение, как это делают обычные функции.
Теперь давайте создадим план для наших будущих пользовательских объектов.
Мы успешно создали функцию-конструктор User с пятью параметрами. Ключевое слово this будет указывать на новый созданный экземпляр, поэтому установка для this.name, this.email… соответствующих параметров гарантирует, что новый объект будет иметь все эти свойства установлены. Подробнее о ключевом слове« это »
Когда вы создаете новый объект из конструктора, мы говорим, что вы создаете экземпляр нового объекта. Следовательно, объект является экземпляром класса (известного как конструктор в javascript).
Ключевое слово новое выполняет следующие четыре задачи:
- Он создает новый пустой объект, например. Арья = <>;
- Он связывает свойство нового пустого объекта [[prototype]] со свойством «prototype» конструктора (каждая функция имеет видимый ‘прототип‘ свойство, тогда как каждый объект включает невидимое свойство [[prototype]])
- Он связывает все свойства и методы, объявленные с ключевым словом this в теле конструктора, с вновь созданным объектом.
- Он неявно возвращает вновь созданный объект.
Теперь мы можем создать экземпляр нашего нового объекта (ов) на основе определений, которые мы сделали в нашем конструкторе, просто поместив ключевое слово «new» перед конструктором.
Мы успешно решили проблему дублирования / повтора кода. Но с этой реализацией есть еще одна проблема.
Проверим созданные объекты с помощью хромированной консоли.
Вы заметили, что каждый из этих новых пользовательских объектов, созданных из конструктора, содержит два метода, каждый из которых выполняет одно и то же. Итак, если у нас есть 100 объектов, созданных из этого конструктора, у нас будет 100 объектов каждого метода. Это неэффективно с точки зрения памяти, поскольку эти методы просто делают то же самое.
Мы могли бы хранить эти методы где-то централизованно, и каким-то образом каждый объект-экземпляр сможет отслеживать методы и вызывать их. Здесь и вступает в игру прототипно-ориентированное программирование.
Прототипы
«Прототип» — это просто еще один объект, который по умолчанию связан с каждой функцией и объектом в JavaScript.
Каждый объект, созданный с использованием синтаксиса литерала объекта или синтаксиса конструктора с ключевым словом new, включает свойство __proto__, объект, который указывает на свойство [[prototype]] (также объект) функции конструктора.
Поэтому всякий раз, когда вы пытаетесь получить доступ к свойству или методу объекта, JavaScript сначала будет искать сам объект, а если он не найден, он будет искать __proto__ или [[prototype ]].
Если вы работали с массивами в javascript, вы знаете, что у них есть много встроенных методов, таких как pop () и push (). Причина, по которой у вас есть доступ к этим методам при создании нового массива, заключается в том, что любой созданный вами массив имеет доступ к свойствам и методам в Array.prototype.
// when you do const myArray = []; // behind the scene, javascript does something like.. myArray = new Array(); // And immediately you have access to all the array methods like pop(), push(), shift(). on the instance object myArray. // it will first check the myArray object to see if your desired methods is available. If not available, it then checks the myArray's __proto__ which is linked to the Array() constructor's [[prototype]]. Boom! you've got your method.
Давайте исправим нашу функцию конструктора User, переместив методы getAllFoodItems () и placeOrder () в ее прототип.
Посмотрим на нашу консоль.
Обратите внимание на связь между __proto__ объекта экземпляра и конструктором [[prototype]] слева. также обратите внимание, что все методы были перемещены из тела функции конструктора в прототип. Это хорошая практика.
Наследование
Наследование — это механизм, при котором один класс (функции в javascript) приобретает свойство другого класса (функции). Например, ребенок наследует черты своих родителей. С наследованием мы можем повторно использовать поля и методы существующего класса. Следовательно, наследование облегчает повторное использование и является важной концепцией ООП.
- Если между двумя классами существует связь «Is-A», используйте «Наследование».
- Класс, от которого вы наследуете, называется суперклассом / родительским классом, а тот, который наследует, называется подчиненным / дочерним классом.
Существует несколько типов наследования, но я буду только иллюстрировать «одиночное наследование» с помощью нашей платформы заказа еды.
У нас есть пользователи (Arya и Sansa), созданные с помощью нашего конструктора User. И они могут сделать заказ на конкретную еду. Нам понадобится кто-то на платформе, кто сможет просматривать всех пользователей на платформе, просматривать все заказы, сделанные пользователями, и иметь возможность удалять вещи с платформы.
Если вы думаете Админ, вы правы.
У администратора будет идентификатор, имя, пароль, адрес электронной почты, телефон, для параметра isAdmin установлено значение true, а также возможность выполнять действия обычного пользователя и некоторые дополнительные возможности.
Поскольку у администратора будут те же свойства, что и у пользователей, существует связь, потому что администратор — это тип пользователя.
Давайте создадим новую функцию конструктора Admin и настроим ее для наследования свойств и методов конструктора User, чтобы каждый экземпляр / объект, созданный с помощью конструктора Admin, имел доступ к свойствам и методам конструктора User.
Вывод на хромированную консоль
Все экземпляры Admin теперь могут получить доступ к этим методам благодаря ссылке на прототип.
Заключение
JavaScript — это язык, основанный на прототипах, и его функции отличаются от традиционной парадигмы на основе классов, которую используют многие другие объектно-ориентированные языки. Но с помощью функций, которые действуют как классы, мы можем реализовать oop и избежать дублирования кода.
Ознакомьтесь с полной версией проекта на Github здесь
Если вам это понравилось, похлопайте и поделитесь.
Спасибо за уделенное время.