Узнайте, как классы составляют основу объектно-ориентированного программирования, позволяя вам определять схемы объектов и повторно использовать код. Мы создадим класс котят и сделаем более 100 кошек! Давайте начнем кодировать и раскроем привлекательность!
Объектно-ориентированного программирования
Хорошо, прежде чем мы перейдем к созданию класса котенка, я хочу дать больше информации о том, что такое объектно-ориентированное программирование и как мы можем использовать его в JavaScript. Не стесняйтесь пропустить вперед, если вы уже знакомы и / или просто хотите создать несколько котят.
Примечание
В JavaScript мы можем использовать объектно-ориентированную парадигму, но важно отметить, что язык по своей сути не является объектно-ориентированным. Это означает, что классы и структура ООП в JavaScript, по сути, являются синтаксическим сахаром, построенным поверх «цепочки прототипов».
Определение пользовательских объектов
По сути, объектно-ориентированное программирование (ООП) позволяет нам определять концепции или идеи в коде. Например, JavaScript по своей сути не понимает такие термины, как «Красная машина» или «Зеленая машина».:
console.log(Red Car) // Error console.log(Green Car) // Error console.log(Blue Car) // Error
Но с помощью ООП мы можем создавать эти объекты, определяя класс:
// Define a Car class
class Car {
// color variable
color;
constructor(color) {
this.color = color;
}
}
// Now we can make different colored cars
const redCar = new Car("red")
const greenCar = new Car("green");
const blueCar = new Car("blue");
Определяя класс, мы вводим концепцию автомобиля в JavaScript, позволяя ему понять, когда мы хотим создать красные, зеленые или синие автомобили. Самое приятное то, что как только мы определили эти объекты, нам не нужно делать это снова.
Каждый раз, когда мы создаем новый автомобиль, например const car = new Car("color"), мы создаем экземпляр нашего класса Car. Этот экземпляр — объект, созданный на основе правил, которые мы установили в классе, и каждый из них может иметь уникальное состояние.
С помощью ООП мы можем вносить небольшие коррективы в аналогичные объекты, используя наследование, и использовать многие другие функции, которые помогают нам эффективно создавать и управлять сложными концепциями.
Кошки! 🐈
Теперь давайте перейдем к тому, чтобы рассказать JavaScript, что такое кошка. Чтобы сделать это, я начну с того, что разберу, что делает кошку кошкой.
- Ловкий нападающий, прыгающий на ничего не подозревающие игрушки
- Скрытный сталкер, охотящийся на невидимую добычу
- Ласковое мурлыканье, уткнувшееся носом в своих любимых людей
- Любознательный исследователь, исследующий каждый уголок
- Опытный сонник, находящий самые уютные места, чтобы вздремнуть
- зуми
Теперь с этим, давайте превратим это в код, я начну с написания класса Cat
class Cat {
biscuitRevenue = 0;
batchSize = 0;
preyList = ["birds", "mice", "bugs", "lizards", "snakes", "other cats", "dogs", "people", "ghosts"];
prey = "";
#friendliness = 0;
#playfulness = 0;
constructor(name) {
this.prey = this.preyList[Math.floor(Math.random() * this.preyList.length)];
this.name = name;
}
stalkPrey() {
console.log(`${this.name} is stalking ${this.prey}!`);
}
pounce() {
console.log(`${this.name} pounces on ${this.prey}`);
}
purr() {
console.log(`purrrrrrrrrrrrrr`);
}
explore() {
console.log(`${this.name} explores! 🌎`);
}
nap() {
console.log(`${this.name} naps. Zzzzzzzzzz...`);
((n) => new Promise((r) => setTimeout(r, n)))(Math.random() * 1000);
console.log(`${this.name} wakes up!`);
}
zoomies() {
console.log(`${this.name} does zoomies! Zoooooooom!`);
}
makeBiscuits() {
console.log(`${this.name} makes biscuits!`);
this.batchSize += Math.floor(Math.random() * 10);
}
sellBiscuits(biscuitOrder) {
console.log(`${this.name} sells biscuits! Yum!`);
this.biscuitRevenue += biscuitOrder;
}
meow() {
console.log(`Meow`);
}
hungryMeow() {
console.log(`Meow! Meow! Meow!`);
}
angryMeow() {
console.log(`Meow! Meow! Meow! Meow! Meow!`);
}
}
Потрясающий! Теперь, когда мы определили, что такое кошка, мы можем создать ее и наслаждаться восхитительными кошачьими занятиями. Создавая экземпляр кота, мы, по сути, создаем объекты, использующие методы, описанные в нашем классе.
Наследование
В ООП мы можем разработать «мастер-класс» и вывести из него более специализированные классы. Этот процесс, называемый наследованием, вращается вокруг концепции родительских и дочерних элементов. Например, общий класс Cat может служить родителем для более конкретных классов, представляющих разные породы кошек.
// Cat Class remains the same
class Calico extends Cat {
#friendliness = 60;
#playfulness = 70;
constructor() {
super();
}
}
class MaineCoon extends Cat {
#friendliness = 85;
#playfulness = 90;
constructor() {
super();
}
}
class Siamese extends Cat {
#friendliness = 100;
#playfulness = 100;
constructor() {
super();
}
}
class Tabby extends Cat {
#friendliness = Math.floor(Math.random() * 100);
#playfulness = Math.floor(Math.random() * 100);
constructor() {
super();
}
}
В этом примере каждая порода кошек имеет уникальные уровни дружелюбия и игривости, а также имеет доступ ко всем характеристикам, которые делают кошку, в общем, кошкой! К ним относятся stalking prey, pouncing, purring, exploring, napping, zoomies, making biscuits, selling biscuits, meowing, hungry meows, and angry meows. Самое приятное то, что нам не нужно переопределять все эти функции, поскольку мы наследуем их от родительского класса (Cat).
Инкапсуляция
Инкапсуляция относится к объединению данных и методов, которые работают в классе. Инкапсуляция позволяет ограничить доступ к определенным свойствам или методам, сделав их закрытыми для класса и предотвратив непреднамеренные изменения из внешнего кода. Это помогает гарантировать, что поведение объекта остается последовательным и предсказуемым.
В JavaScript синтаксис # используется для объявления закрытых переменных в классах. #friendliness и #playfulness демонстрируют инкапсуляцию, гарантируя, что они останутся закрытыми внутри класса и его дочерних классов. Доступ к их значениям или их изменение можно получить только с помощью методов getter.
class Cat {
// Variables
biscuitRevenue = 0;
batchSize = 0;
preyList = ["birds", "mice", "bugs", "lizards", "snakes", "other cats", "dogs", "people", "ghosts"];
prey = "";
#friendliness = 0;
#playfulness = 0;
// Rest of the class is the same ...
}
Дочерние классы Calico, MaineCoon, Siamese и Tabby также демонстрируют инкапсуляцию, наследуя свойства и методы от класса Cat и инкапсулируя свои собственные частные свойства #friendliness и #playfulness.
class MaineCoon extends Cat {
#friendliness = 85;
#playfulness = 90;
constructor() {
super();
}
}
Полиморфизм
Полиморфизм в объектно-ориентированном программировании — это идея о том, что объекты имеют изменчивую форму и могут быть повторно использованы и изменены в соответствии с конкретными вариантами использования.
class Calico extends Cat {
#friendliness = 60;
#playfulness = 70;
constructor() {
super();
}
meow() {
console.log(`Meow from Calico`);
}
}
class MaineCoon extends Cat {
#friendliness = 85;
#playfulness = 90;
constructor() {
super();
}
meow() {
console.log(`Meow from Maine Coon`);
}
}
class Siamese extends Cat {
#friendliness = 100;
#playfulness = 100;
constructor() {
super();
}
meow() {
console.log(`Meow from Siamese`);
}
}
class Tabby extends Cat {
#friendliness = Math.floor(Math.random() * 100);
#playfulness = Math.floor(Math.random() * 100);
constructor() {
super();
}
meow() {
console.log(`Meow from Taby`);
}
}
В этом примере мы перегружаем — это означает, что мы перезаписываем существующую функцию с другим результатом. В этом случае мы написали метод «мяу» для отображения уникального «мяу» в зависимости от породы кошки. Этот метод особенно полезен, когда у вас есть множество объектов с небольшими вариациями, что упрощает работу с ними.
Испытание
Следующий! Я призываю вас сделать что-то крутое, если у вас нет идей, я бы порекомендовал начать делать дилерский центр, или продуктовый магазин, или школу. Так, например, если вы должны были сделать Дилерство, вот несколько общих шагов — грубый план, если хотите.
- Создайте класс Dealership (родительский класс)
- Добавьте массив, содержащий сотрудников, и добавьте логику, применимую к дилерскому центру.
- Создайте класс Employee (дочерний класс)
- Добавьте массив, содержащий список автомобилей, проданных сотрудником, и список клиентов, которых сотрудник должен проверить.
- Создайте класс Customer (дочерний класс)
- Добавьте некоторую логику, которая будет представлять клиента
Итак, небольшой обзор проекта, который вы можете попробовать, если хотите продолжать играть и учиться с помощью классов JavaScript. Я сам сделал этот небольшой проект и действительно узнал кое-что в процессе, который я использовал для написания этого блога!
Давайте подключим!
🌎 Линкедин | Гитхаб | Электронная почта 🌎
Пожалуйста, не стесняйтесь обращаться по любому из этих каналов. Я приветствую отзывы о моем содержании и написании! Также рассмотрите возможность подписаться на мою учетную запись Medium для регулярных статей о программировании.
Спасибо!
