Введение в объектно-ориентированное программирование в JavaScript

Автор оригинала: FreeCodeCamp Community Member.

Rainer Hahnekamp.

Эта статья предназначена для студентов JavaScript, у которых нет предшествующих знаний в объектно-ориентированном программировании (OOP). Я сосредотачиваюсь на частях ООП, которые имеют отношение только к JavaScript и не OOP в целом. Я пропускаю полиморфизм, потому что он лучше подходит с статическим языком.

зачем вам это знать?

Вы выбрали JavaScript, чтобы стать вашим первым языком программирования? Вы хотите быть разработчиком Hot-Shot, который работает на гигантских системах Enterprise, охватывающих сотни тысяч линий кода или более?

Если вы не научитесь обнимать объектно-ориентированные программирование полностью, вы будете хорошо и по-настоящему потеряны.

Разные мыслители

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

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

Объектно-ориентированное программирование или OOP, является парадигма для современного развития приложений. Он поддерживается основными языками, такими как Java, C # или JavaScript.

Объектно-ориентированная парадигма

С точки зрения ООП, приложение – это коллекция «объектов», которые общаются друг с другом. Мы основываем эти объекты на вещах в реальном мире, таких как продукты в запасах или записях сотрудников. Объекты содержат данные и выполняют некоторую логику на основе их данных. В результате код OOP очень легко понять. Что не так просто, решает, как сломать приложение в эти маленькие объекты в первую очередь.

Если бы вы были похожи на меня, когда я услышал это первый раз, вы не знаете, что это на самом деле означает – все это звучит очень абстрактно. Чувствую себя таким образом абсолютно хорошо. Более важно, чтобы вы слышали идею, помните ее и попробуйте применить OOP в вашем коде. Со временем вы получите опыт и выровняйте больше вашего кода с этой теоретической концепцией.

Урок : OOP на основе объектов Real-World позволяет всем прочитать ваш код и понять, что происходит.

Объект как центральная часть

Простой пример поможет вам увидеть, как JavaScript реализует фундаментальные принципы ООП. Рассмотрим случаю использования покупок, в котором вы помещаете продукты в корзину, а затем рассчитать общую цену, которую вы должны заплатить. Если вы возьмете свои знания JavaScript и код использования случая использования без ООП, он будет выглядеть так:

const bread = {name: 'Bread', price: 1};const water = {name: 'Water', price: 0.25};

const basket = [];basket.push(bread);basket.push(bread);basket.push(water);basket.push(water);basket.push(water);

const total = basket  .map(product => product.price)  .reduce((a, b) => a + b, 0);

console.log('one has to pay in total: ' + total);

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

Версия ООП из торгового прецеденту может быть записана как:

const bread = new Product('bread', 1);const water = new Product('water', .25)const basket = new Basket();basket.addProduct(2, bread);basket.addProduct(3, water);basket.printShoppingInfo();

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

Разница между двумя фрагментами кода очевидна. Версия OOP почти читает как настоящие английские предложения, и вы можете легко сказать, что происходит.

Урок : Объект, смоделированный на реальном мире, состоит из данных и функций.

Класс как шаблон

Мы используем классы в OOP в качестве шаблонов для создания объектов. Объект является «экземпляром класса» и «змеевия» – это создание объекта на основе класса. Код определен в классе, но не может выполнить, если он не находится в живом объекте.

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

В нашем использовании мы используем класс продукта для создания двух объектов, хлеба и воды. Конечно, эти объекты нуждаются в коде, который вы должны предоставить в классах. Это идет так:

function Product(_name, _price) {  const name = _name;  const price = _price;

this.getName = function() {    return name;  };

this.getPrice = function() {    return price;  };}

function Basket() {  const products = [];

this.addProduct = function(amount, product) {    products.push(...Array(amount).fill(product));  };

this.calcTotal = function() {    return products      .map(product => product.getPrice())      .reduce((a, b) => a + b, 0);  };

this.printShoppingInfo = function() {    console.log('one has to pay in total: ' + this.calcTotal());  };}

Класс в JavaScript выглядит как функция, но вы используете его по-разному. Имя функции – это имя класса и является капитализированным. Поскольку он ничего не возвращает, мы не называем функцию обычным способом, как Const («хлеб», 1); Отказ Вместо этого мы добавляем ключевое слово New, как Const Product («хлеб», 1); Отказ

Код внутри функции является конструктор. Этот код выполняется каждый раз, когда объект создается. Продукт имеет параметры _имя и _price Отказ Каждый новый объект хранит эти значения внутри него.

Кроме того, мы можем определить функции, которые будет предоставлять объект. Мы определяем эту функцию, добавив это ключевое слово, которое делает их доступными снаружи (см. Инкапсуляцию). Обратите внимание, что функции имеют полный доступ к свойствам.

Классическая корзина не требует от каких-либо аргументов для создания нового объекта. Расположение нового объекта корзины просто генерирует пустой список продуктов, которые программа может заполнить после этого.

Урок : Класс – это шаблон для генерации объектов во время выполнения.

Инкапсуляция

Вы можете столкнуться с другой версией, как объявить класс:

function Product(name, price) {  this.name = name;  this.price = price;}

Разумейте назначение свойств переменной это Отказ На первый взгляд, кажется, является лучшей версией, потому что она больше не требует методов Getter (Getname & Getname & GetPrice) и, следовательно, короче.

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

const bread = new Product('bread', 1);bread.price = -10;

Это то, что вы не хотите, поскольку это заставляет заявку сложнее сохранить. Что произойдет, если вы добавили код проверки, чтобы предотвратить, например, цены меньше нуля? Любой код, который обращается к ценовой собственности напрямую, будет обойти проверку. Это может ввести ошибки, которые будут трудно проследить. Код, который использует методы Getter объекта, с другой стороны, гарантированно проходит через проверку цен на объект.

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

Данные и обработка (ака логика) принадлежат вместе. Это особенно верно, когда речь идет о более крупных приложениях, где очень важно, чтобы данные обработки ограничены конкретно определенными местами.

Сделано правильно, OOP производит модульность по дизайну, Святой Грааль в разработке программного обеспечения. Он поражает боязнил спагетти-код, где все тесно связано, и вы не знаете, что происходит, когда вы меняете небольшой кусок кода.

В нашем случае объекты классового продукта не позволяют изменять цену или имя после их инициализации. Инстанции продукта только для чтения.

Урок : Инкапсуляция предотвращает доступ к данным, кроме как через функции объекта.

Наследование

Наследование позволяет создать новый класс, расширив существующий класс с дополнительными свойствами и функциями. Новый класс «наследует» все особенности своего родителя, избегая создания нового кода с нуля. Кроме того, любые изменения, внесенные в родительский класс, будут автоматически доступны для детского класса. Это делает обновления намного проще.

Допустим, у нас есть новый класс под названием книга, имеющая имя, цену и автор. С наследством вы можете сказать, что книга такая же, как продукт, но с дополнительным авторским имуществом. Мы говорим, что продукт является суперклассом книги и книги – это подкласс продукта:

function Book(_name, _price, _author) {  Product.call(this, _name, _price);  const author = _author;    this.getAuthor = function() {    return author;  }}

Обратите внимание на дополнительные Product.Call вдоль это как первый аргумент. Пожалуйста, будьте осторожны: Хотя Книга предоставляет методы Getter, у него все еще нет прямого доступа к имени и цене свойств. Книга должна вызвать эти данные из класса продукта.

Теперь вы можете добавить объект книги в корзину без каких-либо проблем:

const faust = new Book('faust', 12.5, 'Goethe');basket.addProduct(1, faust);

Корзина ожидает объекта типа продукта. Поскольку книга наследуется от продукта через книгу, это также продукт.

Урок : Подклассы могут наслеживать свойства и функционировать из суперкласс при добавлении свойств и функций их собственного.

JavaScript и OOP

Вы найдете три разных парадигма программирования, используемые для создания приложений JavaScript. Это программирование на основе прототипов, объектно-ориентированное программирование и функционально-ориентированное программирование.

Причина этого заключается в истории JavaScript. Первоначально это был прототип. JavaScript не был предназначен в качестве языка для больших приложений.

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

Подход на основе прототипа показан ниже. Это рассматривается как «классический и по умолчанию», чтобы построить классы. К сожалению, это не поддерживает инкапсуляцию.

Несмотря на то, что поддержка JavaScript для OOP не на том же уровне, что и другие языки, такие как Java, он все еще развивается. Выпуск версии ES6 добавил выделенный класс Ключевое слово мы могли бы использовать. Внутри он служит той же цели, что и свойство прототипа, но это уменьшает размер кода. Однако классы ES6 все еще не хватает частных свойств, поэтому я застрял к «старому пути».

Ради полноты, именно так мы написали продукт, корзину и книгу с классами ES6, а также с прототипом (классическим и по умолчанию) подходом. Обратите внимание, что эти версии не предоставляют инкапсуляцию:

// ES6 version

class Product {  constructor(name, price) {    this.name = name;    this.price = price;  }}

class Book extends Product {  constructor(name, price, author) {    super(name, price);    this.author = author;  }}

class Basket {  constructor() {    this.products = [];  }

  addProduct(amount, product) {    this.products.push(…Array(amount).fill(product));  }

  calcTotal() {    return this.products      .map(product => product.price)      .reduce((a, b) => a + b, 0);  }

  printShoppingInfo() {    console.log('one has to pay in total: ' + this.calcTotal());  }}

const bread = new Product('bread', 1);const water = new Product('water', 0.25);const faust = new Book('faust', 12.5, 'Goethe');

const basket = new Basket();basket.addProduct(2, bread);basket.addProduct(3, water);basket.addProduct(1, faust);basket.printShoppingInfo();

//Prototype versionfunction Product(name, price) {  this.name = name;  this.price = price;}function Book(name, price, author) {  Product.call(this, name, price);  this.author = author;}Book.prototype = Object.create(Product.prototype);Book.prototype.constructor = Book;function Basket() {  this.products = [];}Basket.prototype.addProduct = function(amount, product) {  this.products.push(...Array(amount).fill(product));};Basket.prototype.calcTotal = function() {  return this.products    .map(product => product.price)    .reduce((a, b) => a + b, 0);};Basket.prototype.printShoppingInfo = function() {  console.log('one has to pay in total: ' + this.calcTotal());};

Урок : OOP был добавлен в JavaScript позже в своем развитии.

Резюме

Как новый программист, обучающий JavaScript, потребуется время, чтобы полностью ценить объектно-ориентированное программирование. Важными вещами, которые необходимо понять на этом раннем этапе, являются принципами Paradigm OOP основана на преимуществах, которые они предоставляют:

Объекты, смоделированные на реальном мире, являются центральной частью любого приложения на основе OOP.
Инкапсуляция защищает данные от неконтролируемого доступа.
У объектов есть функции, работающие на данных, которые содержат объекты.
Классы – это шаблоны, используемые для создания объектов.
Наследование – это мощный инструмент для избежания резервирования.
Ооп более многословна, но проще читается, чем другие кодирующие парадигмы.
Поскольку OOP позже пришло в разработке JavaScript, вы можете столкнуться с более старым кодом, который использует прототип или функциональные методы программирования.

дальнейшее чтение

Оригинал: “https://www.freecodecamp.org/news/an-introduction-to-object-oriented-programming-in-javascript-8900124e316a/”