JS: Прототипы

Теория: Введение

JavaScript часто изучают через знакомую схему: классы, экземпляры, наследование, методы. На старте это удобно. Но в какой-то момент эта схема начинает мешать: код ведет себя не так, как вы ожидаете, а объяснения в духе "просто запомните" больше не работают.

В этом курсе мы разберем, как JavaScript устроен под капотом, и соберем более точную модель языка.

HTML builder preview

Зачем нужен этот курс

Этот курс про внутреннюю механику JavaScript. Мы будем говорить о вещах, которые обычно прячут за синтаксисом:

  • в JavaScript нет классической классовой модели, как в Java или C#
  • class в JS во многом синтаксический сахар
  • класс в итоге опирается на функции и прототипы
  • функции сами являются объектами
  • this не означает "текущий объект", его значение зависит от способа вызова

Это может звучать как "нам раньше объясняли неправильно". На деле нет. Раньше вы смотрели на язык с более высокого уровня, чтобы быстрее начать писать код. Сейчас добавляем следующий слой, чтобы понимать, почему код ведет себя именно так.

Что будем изучать

Основные темы курса:

  • иерархии типов
  • наследование
  • прототипы
  • позднее связывание

Параллельно пройдем еще две важные темы:

  • парсинг
  • абстрактное синтаксическое дерево (AST)

Эти темы не "для галочки". Они нужны для проекта, который проходит через весь курс.

Проект курса

Мы реализуем библиотеку, которая берет описание HTML в виде DSL и превращает его в обычную HTML-строку.

Пример входных данных:

const data = ['html', [
  ['meta', [
    ['title', 'hello, hexlet!'],
  ]],
  ['body', [
    ['h1', { 'class': 'header' }, 'html builder'],
  ]],
]];

HexletHtmlBuilder.parse(data).toString();

Результат:

<html>
  <meta><title>hello, hexlet!</title></meta>
  <body>
    <h1 class="header">html builder</h1>
  </body>
</html>

Зачем такой проект:

  • на нем удобно разбирать прототипы и поведение объектов
  • он показывает, как устроены шаблонизаторы
  • он связывает "теорию языка" с практикой: входные данные -> структура -> итоговый HTML

Где это встречается в реальной разработке

Такая идея используется постоянно:

  • в шаблонизаторах на бэкенде
  • в JSX и похожих подходах на фронтенде
  • во внутреннем представлении HTML в браузере (DOM)
  • в инструментах, которые программно генерируют и изменяют разметку

То есть проект учебный, но механика очень прикладная.

Как будем учиться

Формат курса построен вокруг инженерной практики:

  • разработка через тесты
  • серия рефакторингов вместо "сразу идеального" решения
  • внимание к дизайну кода
  • функциональный стиль там, где он упрощает решение

Мы начнем с более простой реализации, а затем шаг за шагом улучшим ее. На каждом шаге будет видно, что именно изменилось и зачем.

Что важно взять из вводного урока

Если коротко, цель этого урока такая: перестроить ожидания.

Дальше в курсе мы не будем воспринимать JavaScript как "упрощенную Java". Мы будем смотреть на него как на язык с собственной объектной моделью, где ключевую роль играют функции и прототипы. Когда эта рамка становится понятной, остальные темы курса ложатся заметно проще.

Дальше→
Навигация по темеТеория

Завершено

0 / 10

→