Руководство для начинающих по ООП в 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 у каждого объекта есть прототип, объект-схема, используемый для создания объектов.
- Доступ к прототипу объекта можно получить с помощью свойства
__proto__
. - Объект-прототип позволяет другим объектам наследовать его свойства и методы.
- Когда вы пытаетесь получить доступ к свойству или методу объекта, 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, которые позволяют вам наследовать методы и писать более эффективный и организованный код. И так, чего же ты ждешь? Берите редактор кода, свою любимую чашку кофе и начинайте использовать ООП в своих проектах!