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

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

Что такое объектно-ориентированное программирование?

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

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

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

const person = {};

Затем мы присваиваем объекту пары ключ-значение.

const person = {
  name: "Bruce Wayne",
  age: 30,
  occupation: "Private Investigator",
};

В нашем объекте person ключевые слова name, age и occupation являются свойствами объекта (ключами), а присвоенные им значения являются значениями свойства.

Доступ к объектам

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

  • Точечная нотация: чтобы получить доступ к свойству или методу объекта, используя эту нотацию, мы пишем имя объекта, затем точку (.), а затем свойство, к которому мы хотим получить доступ. Используя наш объект person в качестве примера, давайте получим доступ к свойству name.
person.name;

Запись этого в консоль дает значение, хранящееся в свойстве name.

  • Скобочная нотация: чтобы получить доступ к свойству или методу объекта, используя эту нотацию, мы пишем имя объекта, затем пару квадратных скобок ([]) и свойство, к которому мы хотим получить доступ, в кавычках.
person["name"];

Запись этого в консоль дает тот же результат, что и запись через точку.

Функции конструктора

Это специальные функции, которые можно использовать для создания объектов. Они используются для создания нескольких экземпляров одного и того же объекта с одинаковыми свойствами и методами. Чтобы создать функцию-конструктор, мы используем следующий синтаксис. Сначала мы создаем обычную функцию и передаем ей параметры.

const Person = function (name, age) {
};

Затем мы вызываем нашу функцию с ключевым словом new. Ключевое слово new позволяет нашей функции стать функцией-конструктором.

const person1 = new Person("James Bond", 40);

Это создает экземпляр объекта Person и сохраняет его в person1. Этот процесс также устанавливает ключевое слово this для каждого экземпляра, который мы создаем. Имейте в виду, что ключевое слово this указывает на создаваемый объект. Затем мы заполняем наш только что созданный объект параметрами, которые мы передали при его создании.

const Person = function (name, age) {
  this.name = name;
  this.age = age;
};

Запись экземпляра person1 в консоль теперь дает результат;

И вот мы создали наш первый объект с помощью функции-конструктора!

Добавление методов в функции-конструкторы

Чтобы добавить метод в функцию-конструктор, мы определяем этот метод в функции-конструкторе. Таким образом, все экземпляры объектов наследуют этот метод при создании. Например, давайте добавим метод в нашу старую функцию-конструктор.

const Person = function (name, age) {
  this.name = name;
  this.age = age;
  this.calcBirthYear = function () {
    return 2023 - this.age;
  };
};

Чтобы получить результат этого метода, мы вызываем метод calcBirthYear для нашего экземпляра, используя нотацию DOT.

person1.calcBirthYear();

Регистрация этого в консоли дает

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

Ключевое слово «это»

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

Повтор сеанса для разработчиков

Раскройте разочарования, выявите ошибки и устраните замедления работы, как никогда раньше, с помощью OpenReplay — набора для воспроизведения сеансов с открытым исходным кодом для разработчиков. Его можно разместить самостоятельно за несколько минут, что дает вам полный контроль над данными клиентов.

Удачной отладки! Попробуйте использовать OpenReplay сегодня.

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

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

Как работает прототипное наследование

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

  1. Доступ к прототипу объекта можно получить с помощью свойства __proto__.
  2. Объект-прототип позволяет другим объектам наследовать его свойства и методы.
  3. Когда вы пытаетесь получить доступ к свойству или методу объекта, JavaScript сначала проверяет, существуют ли они в самом объекте. Если это не так, он проверяет прототип объекта. Если он все еще не существует, он проверяет прототип объекта. Это соединение объектов по прототипу называется prototype chain. Этот процесс продолжается до тех пор, пока не будет найдено свойство или метод или не будет достигнут конец prototype chain.

Совместное использование методов с Prototypal Inheritance

Во-первых, мы вспоминаем нашу функцию-конструктор Person.

const Person = function (name, age) {
  this.name = name;
  this.age = age;
};

Затем мы используем свойство prototype, чтобы добавить метод к нашему объекту person.

Person.prototype.calcBirthYear = function () {
   return 2023 - this.age;
 };

Свойство prototype позволяет нам добавлять методы к прототипу функции-конструктора, а не к самой функции-конструктору. Таким образом, экземпляры, созданные из функции-конструктора, не содержат методов, но могут наследовать их от прототипа своей функции-конструктора. Взглянув на функцию конструктора на консоли, вы получите;

Как мы видим, наш метод calcBirthYear не существует в функции-конструкторе. Но регистрация prototype нашей функции-конструктора дает другой результат.

console.log(Person.prototype);

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

Классы

Классы позволяют разработчикам создавать объекты с определенными свойствами и методами и выступать в качестве схемы для создания объектов с общими характеристиками. Чтобы создать класс в JavaScript, мы используем ключевое слово class для объявления переменной.

class PersonCl {};

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

class PersonCl {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

Чтобы создать объект из класса PersonCl, мы называем наш новый объект ключевым словом new.

const bruce = new PersonCl("Bruce", 30);

Вход в консоль дает

Наследование методов от классов

Как и в прототипном наследовании, объекты могут наследовать методы своего родительского класса. Чтобы проиллюстрировать это, мы создаем метод в нашем классе PersonCl.

class PersonCl {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  calcBirthYear() {
    return 2023 - this.age;
  }
}

Затем мы передаем этот метод нашему объекту экземпляра и регистрируем его в консоли.

console.log(bruce.calcBirthYear());

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

Как показано выше, функция calcBirthYear не существует в созданном нами объекте, но существует в прототипе этого объекта.

Заключение

В заключение, ООП — увлекательная тема, которая может вывести ваши навыки JavaScript на новый уровень. Это руководство охватывает все основные элементы ООП, от понимания объектов и функций конструктора до понимания ключевого слова this и наследования прототипов. Не будем забывать об элегантности использования классов в JavaScript, которые позволяют вам наследовать методы и писать более эффективный и организованный код. И так, чего же ты ждешь? Берите редактор кода, свою любимую чашку кофе и начинайте использовать ООП в своих проектах!