Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Для полноценного изучения ООП в JavaScript нужно разобраться с таким понятием как контекст this. На базе контекста строится почти все остальное, включая то, как работают методы и классы.

2 Немного усложняет ситуацию то, что контекст по-разному работает для обычных и стрелочных функций. И так как стрелочные функции появились в языке позже, то для понимания темы нужно начать изучение контекста с обычных функций. Небольшое напоминание про то, как выглядят такие функции:

3 В этом уроке мы рассматриваем только обычные функции, стрелочные будут в одном из следующих уроков. Обычные функции работают с контекстом одинаково, независимо от того, именованные они или нет.

4 В JavaScript функции ведут себя как данные: их можно записывать в переменные, константы и даже в свойства объектов. Функции, записанные внутрь свойств объектов, называют методами:

5 Это всего лишь один из множества возможных вариантов добавления функции в объект. Ниже еще несколько примеров:

6 Все варианты выше эквивалентны. Они приводят к одному и тому же результату, но есть одна загвоздка. Метод возвращает строку и никак не использует данные объекта. Если поменяется имя, то метод продолжит возвращать "зашитое" в него значение, а не текущее имя компании внутри объекта.

7 Для решения этой задачи, нам нужно получить доступ к данным объекта внутри метода. Делается это через специальное ключевое слово this, называемое контекстом. Внутри методов оно ссылается на текущий объект, к которому привязан метод.

8 this дает возможность не только читать данные, но и менять их:

9 Другой пример - изменение внутреннего массива в объекте:

10 Как видно из примеров выше, свойства можно менять как напрямую, так и из методов. Какой способ предпочесть - зависит от ситуации. С дальнейшим прохождением курсов и опытом вы начнете лучше понимать, какой способ предпочесть.

11 <h2>Контекст</h2>

12 Выше, когда давалось определение this, говорилось, что this ссылается на текущий объект, к которому привязан метод. И здесь кроется ключевое отличие this в JavaScript от this в других языках. В JavaScript this у метода может измениться:

13 Что здесь произошло? Вызов той же самой функции из другого объекта привел к смене объекта, на который ссылается this. Эта особенность называется поздним связыванием. Значение this ссылается на тот объект, из которого происходит вызов метода.

14 Лучше всего можно понять эту особенность, познакомившись с тем, как вызываются функции внутри самого JavaScript и откуда там берется this. Так как в JavaScript функции - это тоже объекты, то у них есть свои методы. Среди них есть метод call(), который и используется для вызова:

15 Зачем так сделано? Дело в том, что первым параметром call() принимает контекст - объект, на который и будет ссылаться this внутри функции. Функции для этого не обязательно быть методом:

16 В примере выше мы заменили контекст функции getName() с помощью call(), передав в него новый контекст.

17 В этом и заключается весь секрет this. Это ссылка на контекст, который мы можем заменить в функции, как показано выше. Также JavaScript прокидывает контекст автоматически в метод. В этом случае можно точно сказать, на какой объект ссылается контекст. Например, в коде ниже метод getName() принадлежит объекту company и контекст ссылается на этот же объект:

18 Теперь, когда вы знаете как работает this, попробуйте ответить на вопрос, что будет выведено на экран?

19 Правильный ответ: "Finland". Почему? Потому что контекстом для метода getName() является объект country, а не company. Если немного модифицировать код, то понять эту идею станет проще:

20 <h2>Сокращенное определение методов</h2>

21 Из-за необходимости использовать обычные функции при создании объектов в JavaScript был введен специальный сокращенный синтаксис создания методов при определении объектов:

22 Такой способ - всего лишь "синтаксический сахар". Он позволяет сделать запись чуть короче, но не меняет поведение. Главное запомните - это обычная функция, а не стрелочная. В дальнейшем мы будем использовать именно такое определение.