Краткое описание объектно-ориентированного программирования (ООП) в JavaScript

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

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

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

Объектно-ориентированное программирование – это две составляющие: создание отдельных объектов из общего объекта и наследование. В сегодняшней статье мы рассмотрим только первую составляющую, а наследование мы рассмотрим в последующих статьях.

Создание отдельных объектов из общего объекта

Объекты в JavaScript имеют свойства и методы. Эти объекты можно соотнести с реальными вещами (и даже людьми!). Допустим, вам нужно создать объект для описания человека с помощью JavaScript. У человека есть имя, фамилия и возраст. Вы можете добавить эти атрибуты как свойства в JavaScript. Для того, чтобы человек представлялся, можно использовать функцию, с помощью которой он будет называть свое имя. И эта функция будет методом в объекте.

Ниже небольшой пример этого:

<script>
const chelovek = {
 firstName: 'Ivan',
 lastName: 'Ivanov',
 age: 35,
 sayName() {
  console.log(chelovek.firstName + ' ' + chelovek.lastName);
 }
}
chelovek.sayName(); // Ivan Ivanov
</script>

Поскольку люди очень похожи друг на друга, вы также можете создать другой объект chelovek с такими же свойствами (firstName, lastName, age) и методами (скажем, sayName).

Для других объектов вам нужно будет использовать другое название, поскольку переменная chelovek уже занята. И, скорее всего, именовать переменные человеческими именами было бы более разумным. Т.е., вместо chelovek и chelovek2, имеет смысл называть их, например, ivanov и petrov.

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

Люди немного отличаются друг от друга – у нас разные имена, и мы разного возраста. Но у нас есть общая черта – мы можем назвать свое имя. Для этого мы можем создать функцию, которая будет отвечать за это. И для этого будем использовать ключевое слово this, которое будет принимать свои значения для каждого нового объекта.

Вот как это может выглядеть:

<script>
function Chelovek(firstName, lastName, age) {
 this.firstName = firstName;
 this.lastName = lastName;
 this.age = age;
 this.sayName = function() {
  console.log(firstName + ' ' + lastName + ' ' + age);
 }
}
// создаем новый экземпляр 'человека' с помощью ключевого слова 'new'
const ivanov = new Chelovek('Ivan', 'Ivanov', 35);
ivanov.sayName(); // Ivan Ivanov 35
</script>

Неплохо, не правда ли?

В этом и заключается суть объектно-конструкторская часть объектно-ориентированного программирования – вы создаете функцию или метод (Chelovek), которая может создавать экземпляры (такие как ivanov и petrov). Каждый создаваемый экземпляр будет иметь возможность содержать отдельные данные, которые отличаются от других экземпляров.

Функция (метод), которую вы используете для создания экземпляров, называется конструктором.

Именование конструкторов и экземпляров

В объектно-ориентированном программировании первая буква конструктора пишется с заглавной буквы (Chelovek), а каждый экземпляр записывается как обычная переменная (ivanov, petrov).

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

Что такое this?

this – это ключевое слово в JavaScript. Когда оно используется в конструкторе, оно ссылается на экземпляр, созданный с помощью конструктора. Т.е., ключевое слово this в конструкторе указывает на его экземпляр.

Краткий итог

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

Когда вы создаете конструктор, вы должны использовать первую заглавную букву его названия (например, Chelovek), чтобы отличать его от экземпляров (например, ivanov).

Читать далее: Ознакомление с классами в JavaScript