Термін «лексична область» на перший погляд може здатися неочевидним. Корисно було б розібрати значення цих слів окремо.

Ця стаття пояснить лексичну область, спершу розібравши значення слів «лексична» та «область».

Давайте почнемо з розбору значення слова «область».

Що ж таке область?

Область — це простір, в якому предмет (функція або змінна) є видимим та доступним для решти коду.

Зверніть увагу:

• Область — це територія, простір або регіон.
• Глобальна область — це глобальний простір (або публічний).
• Локальна область — це місцевий простір (або обмежений).

Ось приклад:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Спробуйте на StackBlitz

У фрагменті вище ми визначили змінну fullName в глобальній області. Через це вона є видимою та доступною глобально всьому коду всередині цього скрипту.

Але ми визначили writeName() всередині функції sayName(), тому writeName() перебуває в локальній області sayName().

Не забувайте, що кожен раз, коли ми викликаємо функцію writeName(), комп’ютер не піде до глобальної області, щоб викликати змінну fullName. Натомість, він послідовно пройде через ланцюг областей, шукаючи fullName.

Що таке ланцюг областей?

Ланцюгом областей називають унікальні простори, які існують поза областю, де змінну викликали до глобальної області.

Для прикладу:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Зверніть увагу, в фрагменті вище змінна fullName була викликана з області функції writeName().

Тому ланцюг областей, який існує від виклику змінної до глобальної області, виглядатиме так:

Область writeName() ---> область sayName() ---> область profile() ---> глобальна область

Іншими словами, від області виклику змінної fullName до її лексичної області (в даному випадку глобальної області) знаходяться чотири інших областей.

Зверніть увагу: глобальна область є останньою ланкою в ланцюгу областей JavaScript.

Як працює ланцюг областей?

Ланцюг областей JavaScript визначає ієрархію областей, через які має пройти комп’ютер, щоб знайти лексичну область конкретної функції, яка була викликана.

Для прикладу розглянемо такий код:

// Визначення змінної в глобальній області:
const fullName = "Oluwatobi Sofela";

// Визначення вкладених функцій:
function profile() {
  function sayName() {
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

У фрагменті вище, кожен раз при виклику функції profile(), комп’ютер спочатку викликатиме функцію sayName(), яка є єдиним кодом всередині функції profile().

Після цього комп’ютер викликатиме функцію writeName(), яка є єдиним кодом всередині функції sayName().

Тепер, оскільки код всередині writeName() каже комп’ютеру викликати та повернути вміст змінної fullName, комп’ютер викличе fullName. Але комп'ютер не піде напряму до глобальної області, щоб викликати fullName.

Натомість комп’ютер крок за кроком проходить через ланцюг областей, щоб знайти лексичну область змінної fullName.

Ось послідовність кроків, які має зробити комп’ютер, щоб знайти лексичну область змінної fullName:

1. Комп’ютер провірить, чи змінна fullName була визначена локально всередені функції writeName(). Але він не знайде визначення fullName тут, тому він рухається до наступної області, щоб продовжити свої пошуки.
2. Комп’ютер шукатиме визначення fullName всередині sayName() (це наступна область в ланцюгу). Він не знайде визначення змінних тут, тому далі рухається вверх по ланцюгу.
3. Комп’ютер шукатиме визначення fullName у функції profile(). Визначення fullName тут немає. Комп’ютер далі шукає лексичну область змінної fullName в наступній частині ланцюга областей.
4. Комп’ютер доходить до глобальної області (наступна область після profile()). На щастя, він знаходить визначення fullName! Як наслідок, комп’ютер отримає вміст змінної ("Oluwatobi Sofela") і поверне його.

Час попрактикуватися з областю 🤸‍♂️🏋️‍♀️🏊‍♀️

Розглянемо код. Яку з трьох змінних fullName викличе комп’ютер?

// Спочатку змінна fullName визначається в глобальній області:
const fullName = "Oluwatobi Sofela";

// Вкладені функції, які містять ще дві змінні fullName:
function profile() {
  const fullName = "Tobi Sho";
  function sayName() {
    const fullName = "Oluwa Sofe";
    function writeName() {
      return fullName;
    }
    return writeName();
  }
  return sayName();
}

Комп’ютер викличе першу, другу чи третю змінну fullName?

Зверніть увагу: ви візьмете від цієї статті набагато більше, якщо випробуєте надані приклади на власній практиці.

Якщо у вас не буде виходити, не засмучуйтесь. Натомість, перегляньте урок та спробуйте ще раз.

Продовжуйте лише після того, як виклались на всі сто (якщо ви змухлюєте або проігноруєте цей крок, ви зробите гірше для себе!).

Впоралися?

Серед трьох визначень fullName, що представлені в коді вище, комп’ютер викличе та поверне ту змінну, яка визначена у функції sayName().

Змінна fullName всередині sayName() буде викликана, тому що sayName() є першою областю, в якій комп’ютер знайде визначення fullName.

Тому, якщо викликати profile(), поверненим значенням буде "Oluwa Sofe".

Спробуйте на StackBlitz

Запам’ятайте:

• Уявімо, що комп’ютер не знайде визначення fullName у жодній області. В такому випадку комп’ютер поверне Uncaught ReferenceError: fullName is not defined.
• Глобальна область завжди є останньою в ланцюгу областей. Іншими словами, глобальна область — це те місце, де закінчуються всі пошуки.
• Внутрішня область (нащадок) має доступ до батьківської (зовнішньої) області, але зовнішня область не має доступу до області-нащадка. Наприклад, у фрагменті вище функція writeName() має доступ до коду всередині будь-якої батьківської області (sayName(), profile() або глобальної області). Однак sayName(), profile() та глобальна область не мають доступу до коду всередині writeName().

Швидкий огляд того, що ми вивчили

Область в JavaScript — це про простір.

Тому наступного разу, коли партнер запрошує вас у свою особисту область, пам’ятайте, що вони запрошують вас у свій особистий простір 😜!

Коли прибудете туди, не забудьте попросити їх продемонструвати лексичні вміння...

Ви питаєте, що означає «лексичний»? Давайте розберемося.

Що означає «лексичний»?

Лексичний — це про визначення речей.

Все, що пов’язано зі створенням слів, виразів або змінних, є лексичним.

Наприклад, гра scrabble є лексичною активністю, оскільки вона пов’язана зі створенням слів.

Також особа, робота якої пов’язана з лінгвістикою (дослідженням мов), має лексичну кар’єру.

Зверніть увагу: другою назвою словника є лексикон. Іншими словами, лексикон — це словник, в якому перераховані та визначені слова.

Тепер, коли ми розуміємо значення слів «лексична» та«область», ми можемо говорити про лексичну область.

Що таке лексична область в JavaScript?

Лексична область — це область визначення виразу.

Іншими словами, лексична область предмету — це місце, в якому предмет було створено.

Зверніть увагу:

• Інакшою назвою для лексичної області є статична область.
• Місце, де предмет був викликаним, не завжди є лексичною областю предмета. Натомість область визначення предмету є його лексичною областю.

Приклад лексичної області:

Розглянемо такий код:

// Визначення змінної в глобальній області:
const myName = "Oluwatobi";

// Виклик змінної myName всередині функції:
function getName() {
  return myName;
}

Зверніть увагу, що у наведеному фрагменті ми визначили змінну myName в глобальній області та викликали її всередині функції getName().

Питання: який з двох просторів є лексичною областю змінної myName? Це глобальна область чи локальна область функції getName()?

Відповідь: не забувайте, що лексична область — це простір визначення, а не простір виклику. Тому лексичною областю змінної myName є глобальна область, оскільки ми визначили myName в глобальному середовищі.

Ще один приклад лексичної області

function getName() {
  const myName = "Oluwatobi";
  return myName;
}

Питання: де знаходиться лексична область myName?

Відповідь: зверніть увагу, що ми створили та викликали змінну myName всередині getName(). Тому лексичною областю myName є локальне серидовище getName(), оскільки getName() є простором визначення myName.

Як працює лексична область?

Область визначення виразу JavaScript визначає, який код має доступ до нього.

Іншими словами, лише код всередині лексичної області предмету має доступ до цього предмету.

Наприклад, розглянемо такий код:

// Визначення функції:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Визначення іншої функції:
function displayFullName() {
  const fullName = "Oluwatobi " + lastName;
  return fullName;
}

// Виклик функції displayFullName():
console.log(displayFullName());

// Виклик функції вище поверне:
Uncaught ReferenceError: lastName is not defined

Зверніть увагу, що виклик функції displayFullName() у фрагменті вище повернув Uncaught ReferenceError. Помилка повертається, бо лише код всередині лексичної області предмету може мати доступ до предмету.

Як наслідок, ані функція displayFullName(), ані її внутрішній код не мають доступу до змінної lastName, оскільки lastName була визначена в іншій області.

Іншими словами, лексична область змінної lastName відрізняється від області змінної displayFullName().

Простір визначення lastName знаходиться у showLastName(), якщо лексична область displayFullName() — це глобальне серидовище.

Тепер розглянемо інший код:

// Визначення функції:
function showLastName() {
  const lastName = "Sofela";
  return lastName;
}

// Визначення іншої функції:
function displayFullName() {
  const fullName = "Oluwatobi " + showLastName();
  return fullName;
}

// Виклик функції displayFullName():
console.log(displayFullName());

// Виклик функції вище поверне:
"Oluwatobi Sofela"

У фрагменті вище displayFullName() успішно повернула "Oluwatobi Sofela", оскільки displayFullName() та showLastName() знаходяться в одній лексичній області.

Іншими словами, displayFullName() може викликати showLastName(), бо обидві функції визначено в глобальній області.

Зверніть увагу:

• У другому прикладі displayFullName() не отримала доступу до змінної lastName всередині showLastName(). Натомість displayFullName() викликала showLastName(), яка потім повернула вміст змінної lastName.
• Альтернативою лексичої області є динамічна область, але вона рідко використовується в програмуванні. Лише декілька мов, наприклад bash, використовують динамічну область.

Висновок

Кожен раз, коли ви чуєте «лексична», думайте про визначення.

Тобто лексична область машини, змінної, телефону, функції або купальника — це місце походження.

Огляд

У цій статті описано лексичну область в JavaScript. Також пояснено, чому це важливе поняття в програмуванні.

Дякую за увагу!

У цій статті ми дізнаємось, що таке лексична область видимості, розглянувши декілька корисних прикладів.

Також ми обговоримо, яким чином JavaScript компілює та виконує програми.

Вкінці ми поговоримо про те, яким чином можна використовувати лексичну область для пояснення помилок неоголошених змінних чи посилання.

Без зайвих слів, почнемо.

Зміст

• Як JavaScript виконує програми?
• Як JavaScript парсить/компілює та виконує код
• Розуміння помилки синтаксису
• Розуміння піднесення змінних та функцій
• Що таке лексична область?
• Розуміння лексичної області
• Підсумки

Як JavaScript виконує програми?

Перед тим як розбиратися, як JavaScript виконує код/програму, ми розглянемо різні кроки, що залучені у будь-якому процесі компіляції з точки зору теорії компілятора.

Для будь-якої мови компілятор виконує такі операції:

Токенізація/лексування

Під час цього процесу вся програма розділяється на ключові слова, які називаються токенами. Наприклад, розглянемо інструкцію let temp = 10: коли виконується токенізація, вона ділить інструкцію на такі ключові слова: let, temp, =, 10.

Лексування та токенізація є взаємозамінними термінами, але між ними є невелика різниця. Лексування — це процес токенізації, який також перевіряє, чи він сам має розглядатися як окремий токен. Ми можемо вважати лексування «розумною» версією токенізації.

Парсинг

Це процес збирання всіх токенів, згенерованих під час попереднього кроку та їх перетворення у структуру вкладеного дерева, що представляє код з граматичної точки зору.

Цю структуру дерева називають абстрактним синтаксичним деревом (AST).

Генерування коду

Цей процес конвертує AST у код, який може прочитати машина.

Це був короткий огляд того, як компілятор працює та генерує машинний код.

Звісно, в компіляції є більше кроків ніж описано вище, але опис інших кроків компіляції знаходиться поза темою цієї статті.

Найважливішим спостереженням щодо виконання коду JavaScript є той факт, що в межах виконання коду відбуваються дві фази:

1. Парсинг
2. Виконання

Перед тим, як ми перейдемо до лексичної області, важливо розуміти, як JavaScript виконує програму. У наступному розділі ми детальніше розберемо, як працюють ці дві фази.

Як JavaScript парсить/компілює та виконує код

Спочатку обговоримо фазу парсингу. Під час цієї фази двигун JavaScript оглядає всю програму, призначає змінні до відповідних областей та перевіряє наявність помилок. Якщо він знаходить помилку, виконання програми зупиняється.

Під час наступної фази відбувається виконання коду.

Для того, щоб краще зрозуміти цей процес, розглянемо детальніше два сценарії:

• Синтаксична помилка
• Піднесення змінної

Синтаксична помилка

Найкращий та найпростіший спосіб показати, як JS спочатку парсить, а потім виконує програму, — показати поведінку синтаксичної помилки.

Розглянемо такий помилковий код:

const token = "ABC";
console.log(token);

//Синтаксична помилка:
const newToken = %((token);

Програма вище видасть синтаксичну помилку в останньому рядку. Помилка буде виглядати ось так:

Uncaught SyntaxError: Unexpected token '%'

JavaScript не виконує console.log. Натомість він проходить через всю програму наступним чином:

• Рядок 1: знайдено оголошення та визначення змінної. Збережено посилання на змінну token в поточній області, яка є глобальною.
• Рядок 2: двигун JavaScript побачив, що змінна token використовується. Спочатку він звертається до поточної області з метою перевірити, чи присутня змінна token. Якщо вона присутня, то посилається на оголошення змінної token.
• Рядок 3: двигун побачив, що змінна newToken була оголошена та визначена. Він перевірив, чи змінна під назвою newToken вже існувала у поточній області. Якщо так, двигун видає помилку посилання. Якщо ні, двигун зберігає посилання на цю змінну в поточній області.
• У тому ж рядку двигун побачив, що він намагався посилатися на змінну %((token). Також він помітив, що назва почалася з символу %, а назви змінних не можуть починатися з резервованих ключових слів, тому двигун видав синтаксичну помилку.

Піднесення змінних та функцій

Піднесення — це механізм, завдяки якому всі змінні у своїх відповідних областях «підіймаються», тобто стають доступними зверху.

Поглянемо на приклад нижче, який покаже, що піднесення відбувається під час фази парсингу і потім відбувається виконання:

doSomething();

function doSomething(){
	console.log("How you doing?");
}

В прикладі вище, двигун проходить всю програму у такій послідовності:

• Рядок 1: двигун JavaScript потрапив нa функцію під назвою doSomething. Він перевірив, чи doSomething доступна в поточній області. Якщо так, він посилається на функцію, в інакшому випадку він видає помилку посилання.
• Виявилось, що під час фази парсину двигун знайшов function doSomething у поточній області. Як наслідок, він додав посилання на змінну в поточну область та зробив її доступною в межах всієї програми.
• Вкінці функція doSomething друкує рядок How you doing?.

Виходячи з пояснення вище, спочатку код парсувався, щоб згенерувати проміжний код, який забезпечує доступ до посилання на змінні та функції в поточній області.

В наступній фазі JavaScript знає про існування функції та починає її виконувати.

З прикладів наведених вище, ми можемо впевнено дійти до висновку, що двигун JavaScript робить наступні кроки перед виконанням коду:

1. Парсить код.
2. Генерує проміжний код, що описує доступні змінні та функції.
3. Використовуючи цей проміжний код, двигун починає виконання програми.

Що таке лексична область?

Процес визначення областей змінних та функцій під час виконання називається лексичною областю. Слово лексична походить від лексичної фази/фази токенізації компіляції JavaScript.

Протягом часу виконання JavaScript робить дві дії: парсинг та виконання. Як ми дізналися в попередньому розділі, під час фази парсингу визначаються області змінних та функцій. Тому й було важливо спочатку зрозуміти, як працює фаза парсингу у виконанні коду, оскільки вона закладає фундамент для розуміння лексичної області.

Простими словами, під час фази парсингу відбувається створення лексичної області.

Тепер, коли ми знаємо основи, розглянемо основні характеристики лексичної області:

По-перше, під час фази парсингу, область призначається/посилається на змінну там, де вона оголошена.

Наприклад, розглянемо сценарій, коли змінна згадується у внутрішній функції, а її оголошення знаходиться в глобальній області. У цьому випадку внутрішня змінна призначена з зовнішньою областю, що є глобальною областю.

Потім, під час призначення області до змінної, двигун JavaScript перевіряє батьківські області на наявність змінної.

Якщо змінна присутня, батьківська область застосовується до змінної. Якщо змінна не знайдена в цих областях, двигун видає помилку посилання.

Поглянемо на ілюстрацію знизу, яка показує, як відбувається пошук області змінної.

А ця ілюстрація показує, як двигун JS намагається знайти змінну, яка не існує в жодній області:

Розуміння лексичної області

У розділі вище ми дали визначення лексичній області. Також ми розібралися з її характеристиками.

У цьому розділі ми розглянемо лексичну область на прикладі. Як то кажуть, складні теми завжди легше зрозуміти на реальних прикладах.

Приклад, який ми розглянемо, полягає у забарвленні часток коду, які мають схожі області. Звучить незрозуміло, але дозвольте продемонструвати простою ілюстрацією.

Розберемо, що відбувається на цій ілюстрації.

У нашій програмі знаходяться:

• empData: масив об’єктів.
• allPositions: масив рядків що описує посади працівників.
• Інструкція, яка друкує змінні allPositions.

Тепер поглянемо, що відбувається під час фази парсингу цієї програми:

• Двигун починає з першого рядка і він потрапляє на оголошення змінної empData.
• Потім двигун провіряє, чи empData доступна в поточній області. Оскільки схожої змінної не знайдено, він шукає наявність цієї змінної в батьківських областях.
• Двигун зупиняє свій пошук, оскільки немає доступних областей і поточна область є глобальною.
• Далі двигун призначає значення undefined до змінної empData під час фази парсингу, щоб у випадку, коли щось у внутрішніх областях намагається посилатися на змінну, її можна було викликати.
• Права частина оператора присвоєння «розв’язується» під час фази виконання програми.
• Подібним чином двигун присвоює значення undefined до змінної allPositions.
• Але на правій частині ми також посилаємось на змінну empData. На цьому етапі двигун провіряє, чи змінна доступна в поточній області. Оскільки вона доступна, на неї далі йде посилання (тобто вона доступна у глобальній області).
• Двигун досі на правій частині оператора присвоєння, бо він помітив стрілкову функцію всередині функції «map». Оскільки двигун натрапив на визначення функції, він створює нову область. В ілюстрації ця область позначена цифрою 2.
• Оскільки це нова область, ми даємо їй чорний колір.
• Ця стрілкова функція має аргумент data та повертає data.position. У фазі парсингу, двигун підіймає всі потрібні змінні, посилавшись на змінні, доступні в поточній області, а також батьківській.
• Всередині цієї функції згадується змінна data, тому двигун провіряє, чи поточна область має цю змінну. Оскільки змінна присутня в поточній області, посилання йде туди ж.
• Коли двигун потрапляє на фігурну дужку }, він покидає функціональну область.
• Вкінці програми знаходиться інструкція, яка друкує змінні allPositions. Оскільки згадується змінна allPositions, двигун шукає її в поточній області (тобто глобальній області). Оскільки вона знайдена, вона посилається туди ж в інструкції console.

Підсумки

У цій статті ми ознайомилися з лексичною областю та розібралися, як вона працює, розглянувши простий приклад з забарвленням.

Дякую, що прочитали!

Підпишіться на мене у твіттері, GitHub та LinkedIn.

JavaScript є мовою, що підтримує багато парадигм програмування. Парадигмою програмування називають набір правил, згідно з якими ви пишете код, щоб було легше вирішити певну проблему.

Якраз цим є чотири опори — принципами програмного забезпечення, які допомагають писати чистий об’єктно-орієнтований код.

Цими принципами є:

• Абстракція
• Інкапсуляція
• Успадкування
• Поліморфізм

Давайте детальніше розглянемо кожен з них.

Абстракція в об’єктно-орієнтованому програмуванні

Щось «абстрагувати» означає приховати деталі імплементації всередині певної обгортки — іноді прототипа, іноді функції. ­Як наслідок, при виклику функції вам не треба розуміти, як саме вона працює.

Якби ви мали досконало знати кожну функцію у великій базі коду, ви б взагалі не писали код. Вам довелося б потратити місяці на прочитання всього коду.

Ви можете створити придатну до багаторазового використання, гнучку та просту для розуміння базу коду, абстрагуючи певні деталі. Наприклад:

function hitAPI(type){
	if (type instanceof InitialLoad) {
		// приклад імплементації
	} else if (type instanceof NavBar) {
		// приклад імплементації
	} else {
		// приклад імплементації
	}
}

Помітили, як у цьому прикладі довелося імплементувати все те, що потрібно для кожного сценарію використання?

Для кожного API, до якого вам потрібно звернутися, необхідно створювати новий блок if зі своєю власною імплементацією. Такий код не є абстрагованим, оскільки вам необхідно турбуватися про імплементацію кожного нового типу, який ви будете додавати. Такий код непридатний до повторного використання і його дуже складно підтримувати.

А що стосується прикладу знизу?

hitApi('www.kealanparr.com', HTTPMethod.Get)

Ви можете просто передати URL та метод HTTP як аргументи до цієї функції і все.

Вам не потрібно думати про те, як ця функція працює. Ця проблема давно вирішена. Це суттєво допомагає повторному використанню коду і полегшує його утримання.

В цьому і полягає суть абстракції: в пошуку схожих частин коду та їх обгортанні в загальну функцію або об’єкт для використання в багатьох місцях/вирішення багатьох проблем.

Ось хороший підсумовуючий приклад абстракції: уявіть, що ви створюєте машину, яка робить каву для ваших користувачів. Ви можете використати два підходи:

Як створити кавову машину з абстракцією

• Створіть кнопку з заголовком «Зробити каву»

Як створити кавову машину без абстракції

• Створіть кнопку з заголовком «Закип’ятити воду»
• Створіть кнопку з заголовком «Налити холодну воду в чайник»
• Створіть кнопку з заголовком «Насипати одну ложку кави в кружку»
• Створіть кнопку з заголовком «Помити брудні кружки»
• І багато інших кнопок

Це дуже простий приклад, але суть в тому, що перший підхід абстрагує всю логіку в обгортку у вигляді кавової машини. А другий приклад змушує користувача вміти робити каву і зробити напій самостійно.

Наступна опора об’єктно-орієнтованого програмування покаже нам один зі способів, завдяки якому ми можемо досягнути абстракції, а саме за допомогою інкапсуляції.

Інкапсуляція в об’єктно-орієнтованому програмуванні

Визначенням інкапсуляції є «обмеження чогось у певних рамках, ніби у капсулі». По суті, інкапсуляція — це відбирання доступу до певних частин коду та їх приватизація (інкапсуляцію також часто називають приховуванням інформації).

Інкапсуляція означає, що кожен об’єкт у коді повинен контролювати свій стан. Стан — це поточний вигляд об’єкта, до якого відносять ключі, методи об’єкта, булеві властивості і так далі. Коли ви змінюєте булеве значення або видаляєте ключ з об’єкта, ви змінюєте його стан.

Обмежуйте доступ до частин свого коду. Робіть їх менш відкритими, якщо в них немає першочергової необхідності.

Приватні властивості в JavaScript можливі завдяки замиканням. Ось приклад нижче:

var Dog = (function () {

	// приватна
	var play = function () {
		// імплементація play
	};
    
	// приватна
	var breed = "Dalmatian"
    
	// публічна
	var name = "Rex";

	// публічна
	var makeNoise = function () {
 		return 'Bark bark!';
	};

 	return {
		makeNoise: makeNoise,
		name: name
 	};
})();

Спочатку ми створили функцію, яка одразу викликається (її називають виразом негайно викликаної функції, скорочено IIFE). Це створило об’єкт, до якого будь-хто має доступ, але разом з тим приховали деякі деталі. Ви не зможете викликати метод play та властивість breed, оскільки ми не зробили їх публічними в об’єкті, який повертає функція.

Використана нами схема називається паттерном викриття модуля, але це лише приклад того, як ви можете досягти інкапcуляції.

Я хотів би зосередитись саме на ідеї інкапсуляції (що набагато важливіше, ніж вивчити один паттерн і вважати, що ми повністю розібрали інкапсуляцію).

Зробіть перерву, щоб подумати над тим, як ви можете приховати свою інформацію та код і розділити їх. Модуляризація та чіткий розподіл обов’язків є ключовими для об’єктної орієнтації.

Чому варто надавати перевагу приватності? Чому не можна просто зробити все глобальним?

• Багато непов’язаних між собою за змістом частин стануть залежними/згрупованими через глобальну змінну.
• Скоріше за все, ви зміните значення змінних, якщо їхні імена будуть використовуватися декілька разів, що може привести до багів або непередбачуваної поведінки.
• Ймовірно, ви створите багато спагеті (коду, який тяжко зрозуміти та в якому тяжко побачити, що зчитує та переписує змінні й змінює стан).

Інкапсуляція може бути застосована шляхом поділу довгих рядків коду на менші окремі функції. Розподіліть ці функції на модулі. Ми приховуємо інформацію в місцях, де ніщо не має до неї доступ, відкриваючи лише те, що є необхідним.

По суті це і є інкапсуляцією: прив’язка вашої інформації до чогось, незалежно від того чи це клас, об’єкт, модуль або функція та спроба зробити її настільки приватною, наскільки це можливо в розумних рамках.

Успадкування в об’єктно-орієнтованому програмуванні

Успадкування дозволяє одному об’єкту отримувати властивості та методи від іншого. У JavaScript це реалізовано у вигляді прототипного успадкування.

Багаторазове використання є основною перевагою такого рішення. Іноді багато частин коду мають робити те саме, і в процесі вони мають виконувати однаково усе, окрім одної маленької деталі. Успадкування може вирішити таку проблему.

Коли б нами не використовувалось успадкування, ми намагаємося зробити все так, щоб батьківський об’єкт та об’єкт-нащадок мали високу згуртованість. Згуртованість — це змістовий зв’язок у коді. Наприклад, чи походить тип Bird від DieselEngine?

Намагайтеся робити успадкування у своєму коді легким для розуміння та передбачуваним. Не наслідуйте з абсолютно непов’язаних об’єктів лише через те, що вони мають один метод чи властивість, які вам потрібні. Успадкування не вирішує конкретно цю проблему.

При успадкуванні вам знадобиться більша частина наслідуваного функціоналу (вам не потрібно завжди наслідувати все).

Серед розробників відомий принцип підстановки Лісков. Цей принцип стверджує, що якщо ви можете використати батьківський клас (наприклад, ParentType) будь-де, де ви б використали спадкоємця (наприклад, ChildType) і ChildType успадковує від ParentType — тоді ви пройдете тест.

Головною причиною, з якої ви можете не пройти тест, є видалення об’єктом ChildType методів, які він успадкував від батьківського об’єкта. Це призвело б до TypeError, де методи чи властивості не визначені або є не тим, що ви очікували.

Ланцюг успадкування — це термін, який використовується для описання потоку успадкування від прототипу об’єкта-основи (того, від якого успадковують всі інші об’єкти) до «кінця» ланцюга успадкування (останній об’єкт, що наслідує; в нашому випадку «Dog»).

Намагайтеся тримати свої ланцюги успадкування чистими та змістовними. Можна дуже легко почати писати антипаттерни під час успадкування (наприклад, антипаттерн крихкої основи). Таке стається, коли ваші прототипи-основи вважаються «крихкими», тому що ви робите «безпечну» зміну до об’єкта-основи, через яку ламаються всі спадкоємці.

Поліморфізм в об’єктно-орієнтованому програмуванні

Поліморфізм — це «можливість відбуватися в декількох різних формах». Саме за це і відповідає четверта опора об’єктно-орієнтованого програмування: за типи в межах окремих ланцюгів успадкування, які можуть робити різні речі.

Якщо ви правильно реалізували успадкування, ви можете використовувати батьківські об’єкти так само, як і їхніх нащадків. Коли два типи мають спільний ланцюг успадкування, їх можна використовувати почергово без помилок чи тверджень у своєму коді.

Згідно останнього малюнку, у нас може бути базовий прототип під назвою Animal, який визначає метод makeNoise. Кожен тип, що наслідує від цього прототипу, може переписати makeNoise таким чином, щоб він виконував власну функцію. Наприклад:

// Cтворимо приклади Dog та Animal
function Animal(){}
function Dog(){}

Animal.prototype.makeNoise = function(){
	console.log("Base noise");
};

// Більшість наших Animal мають 4. При потребі це можна змінити
Animal.prototype.legs = 4;

Dog.prototype = new Animal();

Dog.prototype.makeNoise = function(){
	console.log("Woof woof");  
};

var animal = new Animal();
var dog = new Dog();

animal.makeNoise(); // Base noise
dog.makeNoise();    // Woof woof — наслідок переписування
dog.legs;           // 4! — це було успадковано

Dog походить від Animal і може використовувати властивість legs за замовчуванням. Також він може мати власну імплементацію методу, визначеного в Animal, щоб мати власний звук.

Справжня сила поліморфізму полягає у спільності поведінки та можливості її зміни при потребі.

Висновки

Сподіваюсь, я зміг пояснити в чому полягають чотири опори об’єктно-орієнтованого програмування і те, як вони допомагають писати чистіший та практичніший код.

Якщо вам сподобалася ця стаття, можете підписатися на твіттер автора, де він ділиться власними думками та новими статтями.