Получить доступ

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 и объяснить разницу с классами.

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

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

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

Закрытая бета

Знать тему — половина дела

На живом собеседовании sotto слышит вопрос интервьюера и показывает короткий ответ и план. Оставьте контакт — пришлём доступ и промокод.

  • Промокод на 2 часа — сверх пробных 30 минут
  • Программа для Windows — скачать сразу, войти — через Яндекс ID или VK ID
  • Прямая связь с разработчиком: что улучшить — сделаем