Введение в классы и объекты в JavaScript
Сейчас мы с вами займемся изучением ООП в JavaScript. Давайте рассмотрим пример из жизни, а потом перенесем его на JavaScript.
В качестве примера возьмем автомобиль. У него есть колеса, цвет, вид кузова, объем двигателя и так далее. Кроме того, водитель может отдавать ему команды: ехать, остановится, повернуть направо, налево и тп.
Можно говорить о том, что существует некоторый класс автомобилей, обладающий общими свойствами (у всех есть колеса и всем им можно отдавать команды).
Конкретный автомобиль, стоящий на улице - это представитель этого класса, или, другими словами, объект этого класса. У всех объектов этого класса есть свойства: количество колес, цвет, вид кузова и методы: ехать, остановится, повернуть направо, налево.
Другими словами сам класс - это чертеж, по которым на заводе делаются автомобили. Объект же - это сама машина, сделанная по этим чертежам.
В JavaScript класс создается с помощью ключевого
слова class, за которым следует название
этого класса. Давайте сделаем класс Car:
class Car {
// тут код, то есть JavaScript-чертеж автомобиля
}
Укажем теперь в нашем чертеже, что любой автомобиль, созданный по этому чертежу, будет иметь свойство для цвета и свойство для количества топлива.
Для этого внутри класса напишем свойство
color и свойство fuel:
class Car {
color; // цвет автомобиля
fuel; // количество топлива
}
Давайте теперь сделаем методы нашего класса.
В JavaScript методы похожи на обычные функции,
только объявляются без ключевого слова function.
Как уже упоминалось выше, наш автомобиль может ехать, может поворачивать, может останавливаться. Сделаем соответствующие методы в нашем классе:
class Car {
color; // цвет автомобиля
fuel; // количество топлива
// Команда ехать:
go() {
// какой-то JavaScript код
}
// Команда поворачивать:
turn() {
// какой-то JavaScript код
}
// Команда остановиться:
stop() {
// какой-то JavaScript код
}
}
Мы с вами сделали чертеж нашего автомобиля. Теперь нужно отправится на завод и сделать объект этого класса (то есть конкретный автомобиль).
В JavaScript это делается с помощью ключевого слова
new, после которого пишется имя класса:
new Car; // командуем заводу сделать автомобиль
Однако, если просто создать объект класса - это ни к чему не приведет (это все равно, что, к примеру, объявить массив и никуда его не записать). Нам нужна переменная для хранения этого объекта.
Пусть эта переменная будет называться myCar
- запишем в нее созданный нами объект:
let myCar = new Car;
После создания автомобиля можно обращаться к его свойствам. Обращение к ним происходит через точку. Давайте установим свойства нашего объекта:
let myCar = new Car; // командуем заводу сделать автомобиль
myCar.color = 'red'; // красим в красный цвет
myCar.fuel = 50; // заливаем топливо
Все, наш автомобиль создан, покрашен и заправлен. Теперь мы можем отдавать ему команды через методы этого автомобиля.
Обращение к методам также происходит через точку, но, в отличие от свойства, после имени метода следует писать круглые скобки. Давайте покомандуем нашим объектом:
myCar.go();
myCar.turn();
myCar.stop();