Использование POP для создания раздела комментариев на веб-сайте

Введение

В JavaScript почти «все» — это Объекты, начиная от концепции, например, от строки до функции. Кто-то может дойти до того, что скажет: «Если выразбираетесь в объектах, вы понимаете и JavaScript».
В целом программирование состоит из разных парадигм программирования, таких как как императивное и декларативное программирование, в разделе императивное программирование у нас есть процедурное и объектно-ориентированное программирование.

Прототипно-ориентированное программирование — это модель объектно-ориентированного программирования, которая допускает наследование через процесс повторного использования объектов посредством делегирования, которые служат прототипами. Для наследования объекты могут иметь объект-прототип, который служит родительским объектом, в котором он наследует методы и свойства. Объект-прототип объекта может также иметь (родительский) объект-прототип, от которого он наследует методы и свойства и т. д. Это часто называется цепочкой прототипов и объясняет, почему разные объекты имеют свойства и методы, определенные для других доступных им объектов.

Пояснение: объект,класс, конструктор, ипрототип.

Давайте на минутку проясним эти понятия, не так ли?

Для абсолютного разъяснения,

объект

Объект является экземпляром класса/конструктора. объекты создаются из класса/конструктора.

Вы можете быть очень знакомы с этим

var user = {
  name: "Victor",
  email: "[email protected]"
}

Это литерал объекта, способ создания объектов в JavaScript, то, что под капотом делает JavaScript Engine, — это создание нового экземпляра конструктора объектов JavaScriptс ключевым словом "new" , вот так

var user = new Object();
user.name = "Victor";
user.email = "[email protected]";

Эти два в основном делают одно и то же, создавая экземпляр собственного объекта JavaScript. Подробнее об этом позже

Класс

Класс — это схема создания объектов.

Учитывая тот факт, что JavaScript не является языком на основе классов, он использует конструктор для создания экземпляров.

Конструктор

Конструктор — это схема создания объектов в JavaScript.

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

Прототип

Прототипы — это механизм, с помощью которого объекты JavaScript наследуют свойства друг друга.

Вы видите, как все это связано друг с другом, верно? Прежде чем двигаться дальше, убедитесь, что вы понимаете эти термины упрощенного определения.

Главной особенностью прототипно-ориентированного программирования является возможность повторного использования кода посредством наследования. Повторное использование кода как простого, так и сложного приложения играет большую роль в обеспечении удобства сопровождения кода. В Prototype свойства и методы передаются из родительского конструктора для использования экземплярами или объектами подкласса.

Для лучшего объяснения и визуализации давайте создадим простое приложение, демонстрирующее программирование, ориентированное на прототип.

Мы будем создавать раздел комментариев на веб-сайте, см. репозиторий на GitHub.

Во-первых, мы создадим функцию конструктора пользователя, которая будет служить нашим классом для создания экземпляров пользователя.

Приведенный выше код создал конструктор User, а ключевое слово this внутри конструктора не имеет значения внутри функции конструктора. при создании экземпляров пользователя значение this заменяется на новый созданный объект, который позже будет указателем для каждого экземпляра пользователя, привязывающего свойства к своему объекту. Также обратите внимание, что "this" – это ключевое слово, а не переменная.

Здесь мы можем пойти дальше, добавив методы в сам конструктор, вот так…

function User(name, email) {
  this.name = name;
  this.email = email;
  this.isAdmin = false;
  // Adding method directly to the class constructor
  // this is a *BAD WAY* to do it
  this.postComment = function(message) {
    //the implementation here
  };
  this.editComment = function(newMessage) {
    //add the codes here
  }
}

Добавление методов непосредственно в прототип User означает, что каждый экземпляр User также будет иметь эти методы в своем конструкторе "{}". Это целесообразно, потому что если пользовательский класс создал 1000 экземпляров, то эти методы (например, postComment, editComment) будут физически доступны в 1000 местах в памяти. Это замедлит работу и снизит эффективность приложения в целом.

Если вы помните, объекты в JavaScript имеют ссылочный тип, что означает, что сама переменная (User) является просто ссылкой, указывающей на расположение объекта (значения) в памяти. Переменные фактически не содержат значения.

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

Пользовательская функция — это конструктор, который ничего не делает сам по себе. фактически, он служит ПРОЕКТОМ для создания других объектов. Теперь мы можем использовать прототип для создания различных пользовательских объектов с помощью ключевого слова "new", которое будет иметь доступ к своим свойствам и методам, прикрепленным к его прототипу.

Для реализации логики и кода вы можете проверить мой репозиторий GitHub для этого Проекта.

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

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

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

Почему мы говорим о снова и снова и снова…когда весь созданный нами объект является экземпляром User, который является функцией-конструктором?

Правда в том, что хотя все пользовательские объекты создаются из конструктора пользователя, сам конструктор пользователя унаследовал некоторые свойства от своего родительского класса.

Следуя нашему примеру кода, если мы сделаем что-то вроде

phil.toString(); // we get "[object Object]"

но мы не определили какой-либо метод, такой как «toString», в пользовательском прототипе, почему это не возвращает ошибку?

Это связано с тем, что пользовательский конструктор, как и любая другая функция, наследуется от функции родительского класса, которая также наследуется от другого объекта класса, где был определен метод «toString», этот класс объекта имеет родительский «нулевой», который не имеет свойств или методов. Все это стало возможным благодаря Prototype Chain.

Поэтому, если бы мы попытались найти свойство someProperty в нашем объекте phil сверху, движок сначала проверил бы сам объект.

Он не найдет его, а затем перейдет к своему __proto__ объекту, который равен User.prototype. Он также не найдет его, затем перейдет к Object.prototype и все еще не найдет свойство, и, увидев, что следующим __proto__ является null, он вернет undefined.

При выполнении поиска движок будет проходить по цепочке в поисках свойства и возвращать первое найденное свойство или undefined, если оно отсутствует в цепочке прототипов.

__proto__ === null
|
|
__proto__ === Object.prototype
|
|
__proto__ === User.prototype
|
|
phil object

Давайте продемонстрируем это, расширив пользовательский конструктор для создания административного конструктора, который, в свою очередь, создаст экземпляр администратора, который имеет доступ к административному конструктору и пользовательскому конструктору посредством наследования.

Сначала создадим конструктор администратора

function Admin(name, email) {
  User.call(this, name, email);
  this.isAdmin = true;
}

Это создает конструктор администратора, а User.call(name, email) немедленно вызывает функцию пользователя и изменяет контекст name, email на "this" Admin.

Объект.создать()

На самом деле мы хотим создать новый класс для Admin, который унаследует свойства прототипа User. Мы можем сделать это, назначив прототип Admin прототипу User следующим образом:

Admin.prototype = Object.create(User.prototype);

Это создаст новый пустой объект, основанный на прототипе User, и назначит его прототипу Admin. Таким образом, все свойства, которые у нас есть в прототипе User, теперь могут быть доступны для прототипа Admin. Таким образом, вместо вызова new User мы можем вызвать new Admin, и все по-прежнему будет работать как надо.

Но мы должны пойти немного дальше, потому что прямо сейчас, потому что на этом этапе Admin.prototype указывает на конструктор пользователя напрямую.

Admin.prototype.constructor = Admin;

Теперь, когда Admin.prototype.constructor указывает на себя, это все равно, что сказать, что "I am me." процесс между Admin.prototype.constructor и Admin.constructor обеспечивает наследование прототипов на молекулярном уровне.

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

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

admin instanceof Admin // true
admin instanceof User // true
admin instanceof phil // false

В этом случае объект администратора возвращает true для Admin, поскольку он был создан из Конструктор администратора, а также true для Пользователь, потому что Admin наследует от User Constructor, но возвращает false для phil, потому что phil — это не конструктор, а объект от User.

Вывод

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

Прототип-ориентированное программирование — это весело, когда вы его понимаете. Понимание этого будет иметь большое значение для демистификации многих концепций в JavaScript. Как я уже говорил ранее, «объекты — короли» objects are Kings in JavaScript, и они зависят от наследования, чтобы получить от него максимальную отдачу.

конечно, этот проект находится на GitHub, и не стесняйтесь вносить свой вклад, разветвлять и экспериментировать с ним ЗДЕСЬ. Не стесняйтесь использовать раздел комментариев, если вам нужно больше разъяснений или есть что добавить.

С нетерпением ждите второй серии, в которой я расскажу о тестировании в JavaScript.

Также дайте ему столько хлопков, сколько вы считаете нужным, пометьте и разветвите репо на GitHub.

Мир