Этап 5 из 19 · ≈ 6 ч

this, прототипы и классы

Основа с Junior

Как определяется this, чем отличаются стрелочные функции и как устроено наследование.

this определяется способом вызова, а не местом объявления:

вызовthis
obj.method()obj
fn()undefined в строгом режиме
new Fn()новый объект
fn.call(ctx), fn.bind(ctx)ctx
стрелочная функцияthis внешней области

Отсюда классическая ошибка: передали obj.method как колбэк — this потерялся. Решения: стрелочная функция, bind, поле класса со стрелкой.

Прототипы

У каждого объекта есть скрытая ссылка [[Prototype]]. Если свойства нет в объекте, оно ищется по цепочке прототипов. class — синтаксис над той же моделью: методы лежат в Class.prototype, extends связывает прототипы.

class Animal { speak() { return "..." } }
class Dog extends Animal { speak() { return "Гав" } }
Object.getPrototypeOf(Dog.prototype) === Animal.prototype  // true

Приватные поля — #field, статические — static.

Критерии освоения

Junior ≈ 6 ч

  • Определяет this в разных способах вызова и чинит потерю контекста
  • Пишет классы с наследованием и приватными полями

Практика. Решить 10 задач «чему равно this» и исправить потерю контекста в колбэках учебного кода.

Middle ≈ 4 ч

  • Объясняет цепочку прототипов и как class устроен поверх неё
  • Реализует bind вручную

Практика. Реализовать bind, наследование без class через Object.create и объяснить разницу с классами.

Проверка знаний

Войдите, чтобы пройти тест: сданный тест отмечает тему пройденной на карте и в ИПР.

Вопросы с собеседований

Смотреть все
Как определяется this в JavaScript и чем стрелочные функции отличаются от обычных?Junior

В обычной функции this определяется в момент вызова: obj.method() — obj; простой вызов f() — undefined в строгом режиме; new F() — новый объект; call/apply/bind — заданный явно. Стрелочная функция своего this не имеет — берёт его из окружения, где создана.

Полный разбор
Как работает прототипное наследование и что такое class в JavaScript?Junior

У каждого объекта есть ссылка на прототип; если свойства нет в объекте, оно ищется по цепочке прототипов. Методы хранятся в прототипе и разделяются всеми экземплярами. class — синтаксический сахар над конструктором и прототипом, с более строгими правилами.

Полный разбор
Что такое замыкание в JavaScript и где оно применяется?Junior

Замыкание — функция вместе с лексическим окружением, в котором она создана: она помнит переменные внешней функции даже после её завершения. Применение: приватное состояние, фабрики функций, обработчики событий, debounce, мемоизация, хуки React.

Полный разбор
Чем var отличается от let и const?Junior

var — область видимости функции, поднимается (hoisting) со значением undefined, допускает повторное объявление. let и const — область видимости блока {}, до строки объявления — временная мёртвая зона (ReferenceError). const запрещает переприсваивание, но не…

Полный разбор

Документация

← Вся карта «Frontend-разработчик»

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования