Недавно я впервые прошел интенсивную пятичасовую техническую аттестацию. Это был нервный опыт, который оставил меня психологически истощенным, но в то же время гордым тем, что я его прошел. Это помогло мне понять, насколько важно знать основы, когда речь идет о технических оценках. Понимание основ выбранного языка может стать направляющей силой в решении технических вопросов или проблем.
Оценка была разделена на отведенные по времени части, начиная с технических вопросов от двух интервьюеров, затем сама техническая оценка, затем прогулка по моей работе вместе с дальнейшими техническими вопросами и, наконец, интервью с менеджером по продукту.
Основная техническая оценка включала в себя создание функции с логикой, которая извлекала данные из статического json. Мне сказали, что не имеет значения, если я не закончу функцию, если я расскажу интервьюерам о своих намерениях и дальнейших шагах.
Когда пришло время, я, как и ожидалось, остался с наполовину завершенным проектом. Я был настолько вымотан, что чувствовал, как меня трясет при объяснении своей работы.
Интервьюеры были полезны, спрашивая меня о технических проблемах, с которыми я столкнулся. Я чувствовал, что скорее разглагольствую, чем использую технический язык для объяснения своих трудностей, чувствуя, что мои объяснения ни к чему не приводят. И только когда один из интервьюеров спросил: «Это проблема с абстракцией? Наследованием? Как вы думаете, что происходит?».
Эти слова вывели меня из мозгового тумана и указали на основы JavaScript, которые я мог понять, — принципы объектно-ориентированного программирования. Я почувствовал, что интервьюер подталкивает меня в правильном направлении. Я начал объяснять абстракцию и то, как я боролся с ней в своем коде, что привело меня к развитию других концепций ООП в моем проекте.
Я понял, что, хотя я и заблудился, у меня были те столпы знаний, которые помогли мне вернуться к техническому мышлению. Несмотря на момент затруднения, я смог продемонстрировать свои сильные основы, не позволив нервам взять верх. Наличие основ ООП в вашем словарном запасе позволяет вам опираться на примеры в вашем коде и показать, что даже если вы застряли, вы все равно способны эффективно передать свои технические навыки.
Этот момент позволил мне лучше понять, почему мой учитель кодирования постоянно вдалбливал нам основы ООП. Поэтому, несмотря на то, что я уже затрагивал эту тему, мне захотелось вернуться к ней на примерах, чтобы помочь другим подготовиться к их первой технической аттестации!
Для начала давайте спросим себя:
Что такое объект?
Объект — это набор свойств и функций, которые описывают любую существующую сущность.
Примером объекта может быть собака, у нее есть такие свойства, как:
имя, порода, окрас. Свойства позволяют нам идентифицировать наши объекты и отличать их от других объектов.
На примере нашей собаки мы можем наделить ее различными функциями (методами), такими как fetch() или speak(), которые возвращают определенные действия.
Итак, как мы создаем новые объекты в JavaScript?
Существуют различные методы, которые можно использовать для создания нового объекта в JavaScript, но пока давайте просто создадим пустой объект.
const dog1 = {}; //using object literals
const dog2 = Object.create(null); //using Object.create()
const dog3 = new Object(null); //using the "new" keyword
Создав объект, давайте наделим его некоторыми свойствами и методами.
const dog = {
name: 'Sophie',
breed: 'German Shepard',
sayHello: () => {
console.log('Bark!');
}
}
dog.sayHello(); //'Bark!'
-
Выше мы создаем наш объект собаки с помощью литерала объекта.
-
Внутри объектного литерала мы определяем свойства и методы в синтаксисе, известном как «ключ:значение».
-
«имя» и «порода» — это свойства объекта в формате «ключ:значение».
-
sayHello — это метод объекта, который возвращает действие, а именно console.log(‘Bark!’);
-
последняя строка вызывает метод объекта, используя нотацию dot(.) для доступа к свойствам и методам внутри литерала объекта.
Теперь мы знаем, как создавать объекты со свойствами, методами и обращаться к ним. Давайте включим их в классы.
Классы JavaScript известны как «чертеж» или шаблон для создания новых объектов.
class Dog {
name;
breed;
constructor(name, breed) {
this.name = name;
this.breed = breed;
}
sayHello = () => console.log(`$(this.name) says hi!`);
}
const myDog = new Dog('Fletcher','Pit bull');
myDog.sayHello(); //'Fletcher says hi!'
Чтобы освежить в памяти, классы всегда начинаются с заглавной буквы.
-в приведенном выше классе перечислены наши свойства.
-после него находится наш конструктор, который мы используем для присвоения значений новым объектам с помощью ключевого слова «new».
Для создания экземпляров объектов в классе мы используем ключевое слово «new» и имя класса: new Dog
-В скобках мы указываем значения свойств, определенных в конструкторе, чтобы присвоить их новому объекту Dog:
new Dog(‘Fletcher’,’Pit bull’);
Давайте перейдем к другой важной теме:
Наследование!
Это не слишком далеко от нетехнического определения характеристик или генов, которые передаются от родителей к детям.
В техническом контексте наследование — это концепция создания нового дочернего класса, также известного как подкласс, из существующего родительского класса или суперкласса.
Дочерний класс/подкласс может наследовать свойства и методы родительского класса, а может создавать собственные свойства и методы.
// parent class
class Mom {
constructor(name) {
this.name = name;
}
greet() {
console.log(`${this.name} says bark!`);
}
}
// inheriting parent class
class Puppy extends Mom {
}
let puppy1 = new Puppy('Fletcher');
puppy1.greet(); //'Fletcher says bark!'
Чтобы создать класс, который будет наследовать свойства родительского класса, мы используем «extends» с именем класса. В данном случае puppy — это подкласс или дочерний класс, который наследует свойства своей мамы, она же родительский класс/суперкласс.
Экземпляр объекта puppy был создан с помощью ключевого слова «new» и назван Fletcher. Флетчер наследует лай мамы, потому что когда мы вызываем команду puppy1.greet и вызываем ее с круглой скобкой, наш ответ будет «Флетчер говорит «лай!».
Давайте перейдем к инкапсуляции!
Инкапсуляция — это очень важный столп ООП, потому что она дает нам возможность скрывать и защищать данные от доступа к ним извне класса. По названию «инкапсуляция» можно догадаться, что данные хранятся внутри капсулы, которой по сути является наш класс.
Свойства и методы, которые инкапсулируются, известны как «приватные» свойства и методы.
Для примера, допустим, моя собака Флетчер хочет пополнить свой рецепт на лакомства в ветеринарной клинике. Чтобы получить доступ к его медицинской карте, ему нужен его fileCode.
class Dog extends Vet {
#fileCode; //private property
constructor(breed, fileCode) {
super(breed);
this.#fileCode = fileCode;
}
unlock = () => {
console.log(`Unlocked using ${this.#fileCode}`)
}
const myDog = new Dog('Fletcher', 9119);
myDog.unlock(); // 'Unlocked using 9119'
console.log(myDog.#fileCode); //throws error
}
В классе Dog является дочерним классом родительского класса Vet. Мы задаем значения для свойств, определенных внутри конструктора, чтобы впоследствии присвоить их новым объектам.
Чтобы объявить приватные свойства или приватные методы, добавьте «#» в начале их имени, чтобы сделать их недоступными за пределами класса.
Другой пример — использование синтаксиса, основанного на функциях:
class Dog {
setAttr(breed, age){
this.breed = breed;
this.age = age;
}
getBreed() {
console.log(this.breed)
}
getAge() {
console.log(this.age)
}
}
const d = new Dog()
d.setAttr("Fletcher", 3) //undefined
d.getBreed() //undefined
d.getAge() //undefined
Теперь, когда мы знакомы с инкапсуляцией, давайте рассмотрим абстракцию.
Абстракция — это то, что помогает сделать наш код многократно используемым, скрывая сложные детали и показывая простые. Это помогает сделать код более понятным, читабельным и повысить безопасность вашего приложения.
Допустим, Флетчер все еще пытается взломать свою медицинскую карту, чтобы получить больше лекарств.
function Dog(name, age) {
this.name = name;
this.age = age;
const pin = "pin"
const findPin = function() {
console.log(pin+ ' is private')
}
this.getPin = function() {
console.log(name, age)
findPin()
}
}
const myDog = new Dog("Fletcher", 3)
myDog.getPin(); //undefined
Выше у нас есть две функции внутри главной функции: findPin и getPin. Абстракция достигается тем, что переменная ‘pin’ и функция ‘findPin’ скрыты от посторонних глаз и доступны только из функции getPin.
И наконец,
Полиморфизм
Из названия мы можем сделать вывод, что полиморфизм означает принимать различные формы. Но в данном случае полиморфизм означает, что один и тот же метод может быть использован для разных объектов.
Например, если Софи и Флетчер имеют одну и ту же функцию — fetch(), то полиморфизм позволяет вызывать один и тот же метод на разных объектах.
class Dog {
fetch() {
console.log('jog')
}
}
class Puppy extends Dog {
fetch() {
console.log('run')
}
}
const sophie = new Dog()
const fletcher = new Puppy()
sophie.fetch()
fletcher.fetch()
Выше мы видим, как одна и та же функция вызывается на разных классах.
Выводы:
Принципы ООП в JS:
Наследование, инкапсуляция, абстракция и полиморфизм
Несмотря на то, что я уже давно не новичок, освежить в памяти основы объектно-ориентированного программирования по-прежнему важно. Чем больше времени уделяется их пониманию, тем яснее и даже интуитивнее становится, что каждый из них делает, когда сталкиваешься с технической оценкой.
PS: Если вы дочитали эту длинную статью до конца, поздравляю. И если вы чувствуете себя немного подавленным, не волнуйтесь. Со временем все станет понятно. Чтобы загладить свою вину, вот вам Флетчер, перекусывающий хакерами.
