О ключевом слове «this» языка JavaScript: особенности использования с пояснениями

Рассказывает Дмитрий Павлютин 


Тайна this

Долгое время ключевое слово this оставалось для меня загадкой. Это мощный инструмент, но разобраться в нём нелегко.

С точки зрения Java, PHP или любого другого обычного языка this расценивается как экземпляр текущего объекта в методе класса, не больше и не меньше. Чаще всего его нельзя использовать вне метода, и этот подход не вызывает непонимания.

В JavaScript this — это текущий контекст исполнения функции. Поскольку функцию можно вызвать четырьмя способами:

  • вызов функции: alert('Hello World!'),
  • вызов метода: console.log('Hello World!'),
  • вызов конструктора: new RegExp('\\d'),
  • непрямой вызов: alert.call(undefined, 'Hello World!'),

и каждый из них определяет свой контекст, поведение this слегка не соответствует ожиданиям начинающих разработчиков. Кроме того, strict mode также влияет на контекст исполнения.

Ключом к пониманию ключевого слова this является осознание принципов вызова функции и его влияния на контекст. В этой статье рассказывается про вызовы функций, влияние вызовов на this и типичные ловушки при идентификации контекста.

Прежде чем мы начнём, давайте познакомимся с несколькими терминами:

  • Вызов — это исполнение кода тела функции. Например, вызовом функции parseInt будет parseInt('15').
  • Контекстом вызова является значение this в теле функции.
  • Область видимости функции — это набор переменных, объектов и функций, к которым можно получить доступ из тела функции.

Содержание:

  1. Тайна this
  2. Вызов функции
    2.1. this при вызове функции
    2.2. this при вызове функции в strict mode
    2.3. Ловушка: this во внутренней функции
  3. Вызов метода
    3.1. this при вызове метода
    3.2. Ловушка: отделение метода от его объекта
  4. Вызов конструктора
    4.1. this при вызове конструктора
    4.2. Ловушка: как не забыть про new
  5. Непрямой вызов
    5.1. this при непрямом вызове
  6. Связанная функция
    6.1. this в связанной функции
  7. Стрелочная функция
    7.1. this в стрелочной функции
    7.2. Ловушка: определение метода стрелочной функцией
  8. Заключение

Вызов функции

Вызов функции совершается, когда за выражением, являющимся объектом функции, следуют открывающая скобка (, разделённый запятыми список аргументов и закрывающая скобка ), например, parseInt('18'). Выражение не может быть аксессором myObject.myFunction, который совершает вызов метода. Например, [1,5].join(',') — это вызов не функции, а метода.

Простой пример вызова функции:

hello('World') — это вызов функции: hello расценивается как объект функции, за которым в скобках следует аргумент 'World'.

Более сложный пример — немедленно вызываемая функция:

Это тоже вызов функции: первая пара скобок (function(name) {...}) расценивается как объект функции, за которым в скобках следует аргумент: ('World').

this при вызове функции

this — это глобальный объект при вызове функции

Глобальный объект определяется средой исполнения. В веб-браузере это объект window.

В вызове функции контекстом исполнения является глобальный объект. Давайте проверим контекст следующей функции:

Когда вызывается sum(15, 16), JavaScript автоматически инициализирует this как глобальный объект, являющийся window в браузере.

Когда this используется вне области видимости какой-либо функции (самая внешняя область видимости: контекст глобального исполнения), он также относится к глобальному объекту:

this при вызове функции в strict mode

this принимает значение undefined при вызове функции в strict mode

Strict mode был введён в ECMAScript 5.1 и представляет собой более надёжную систему защиты и проверки ошибок. Для активации поместите директиву 'use strict' вверху тела функции. Этот режим влияет на контекст исполнения, заставляя this быть undefined. Контекст исполнения перестаёт быть глобальным объектом, в отличие от предыдущего случая.

Пример функции, запущенной в strict mode:

Когда multiply(2, 5) вызывается this становится undefined.

Strict mode активен не только в текущей области видимости, но и во всех вложенных:

'use strict' вставлена вверху тела execute, что активирует strict mode внутри её области видимости. Поскольку concat объявлена внутри области видимости execute, она наследует strict mode. И вызов concat('Hello', ' World!') приводит к тому, что this становится undefined.

Один файл JavaScript может содержать как «строгие», так и «нестрогие» функции. Поэтому возможно иметь в одном скрипте разные контексты исполнения для одного типа вызова:

Ловушка: this во внутренней функции

Обычной ошибкой при работе с вызовом функции является уверенность в том, что this во внутренней функции такой же, как и во внешней.

Вообще-то контекст внутренней функции зависит только от вызова, а не от контекста внешней функции.

Чтобы получить ожидаемый this, модифицируйте контекст внутренней функции при помощи непрямого вызова (используя .call() или .apply(), об этом позже) или создайте связанную функцию (используя .bind(), об этом тоже поговорим позже).

Следующий пример вычисляет сумму двух чисел:

numbers.sum() — это вызов метода объекта, поэтому контекстом sum является объект numbers. Функция calculate определена внутри sum, поэтому вы можете ожидать, что this — это объект numbers и в calculate(). Тем не менее, calculate() — это вызов функции, а не метода, и поэтому его this — это глобальный объект window или undefined в strict mode. Даже если контекстом внешней функции sum является объект numbers, у него здесь нет власти.

Результатом вызова numbers.sum() является NaN или ошибка TypeError: Cannot read property 'numberA' of undefined в strict mode. Точно не ожидаемый результат 5 + 10 = 15, а всё потому, что calculate вызвана некорректно.

Для решения проблемы функция calculate должна быть исполнена в том же контексте, что и метод sum, чтобы получить доступ к значениям numberA и numberB. Это можно сделать при помощи метода .call():

calculate.call(this) исполняет функцию calculate, но дополнительно модифицирует контекст в соответствии с первым параметром. Теперь this.numberA + this.numberB эквивалентно numbers.numberA + numbers.numberB и функция возвращает ожидаемый результат 5 + 10 = 15.

Вызов метода

Метод — это функция, хранящаяся в объекте. Пример:

helloFunction — это метод в myObject. Для доступа к методу нужно использовать аксессор: myObject.helloFunction.

Вызов метода совершается, когда за выражением в виде аксессора, расценивающемся как объект функции, следует пара скобок и разделенный запятыми список аргументов между ними.

В прошлом примере myObject.helloFunction() — это вызов метода helloFunction объекта myObject. Также вызовами метода являются: [1, 2].join(',') или /\s/.test('beautiful world').

Важно отличать вызов функции от вызова метода. Главным отличием является то, что для вызова метода необходим аксессор (<expression>.functionProperty() или <expression>['functionProperty']()), а для вызова функции — нет (<expression>()).

this при вызове метода

this — это объект, которому принадлежит метод

При вызове метода, принадлежащего объекту, this становится этим объектом.

Давайте создадим объект, метод которого увеличивает число на 1:

Вызов calc.increment() сделает контекстом функции increment объект calc. Поэтому можно спокойно использовать this.num.

Объект JavaScript наследует метод своего прототипа. Когда вызывается метод, унаследованный от объекта, контекстом всё равно является сам объект:

Object.create() создаёт новый объект myDog и создаёт прототип. Объект myDog наследует метод sayName. Когда исполняется myDog.sayName(), myDog является контекстом исполнения.

В синтаксисе ECMAScript 6 class контекст вызова метода — тоже сам объект:

Ловушка: отделение метода от его объекта

Метод объекта можно переместить в отдельную переменную. При вызове метода с использованием этой переменной вы можете подумать, что this — это объект, в котором определён метод.

На самом деле, если метод вызван без объекта, происходит вызов функции, и this становится глобальным объектом window или undefined. Создание связанной функции исправляет контекст — им становится объект, в котором содержится метод.

Следующий пример создаёт конструктор Animal и его экземпляр — myCat. Затем через 1 секунду setTimeout() логирует информацию об объекте myCat:

Вы можете подумать, что setTimeout вызовет myCat.logInfo(), которая запишет информацию об объекте myCat. Но метод отделяется от объекта, когда передаётся в качестве параметра: setTimout(myCat.logInfo), и через секунду происходит вызов функции. Когда logInfo вызывается как функция, this становится глобальным объектом или undefined (но не объектом myCat), поэтому информация об объекте выводится некорректно.

Функцию можно связать с объектом, используя метод .bind(). Если отделённый метод связан с объектом myCat, проблема контекста решается:

myCat.logInfo.bind(myCat) возвращает новую функцию, исполняемую в точности как logInfo, но this которой остаётся myCat даже в случае вызова функции.

Вызов конструктора

Вызов конструктора совершается, когда за ключевым словом new следует выражение, расцениваемое как объект функции, и пара скобок с разделённым запятыми списком аргументов. Пример: new RegExp('\\d').

В этом примере объявляется функция Country, которая затем вызывается в качестве конструктора:

new Country('France', false) — это вызов конструктора функции Country. Результатом исполнения является новые объект, чьё поле name равняется 'France'.

Если конструктор вызван без аргументов, скобки можно опустить: new Country.

Начиная с ECMAScript 6, JavaScript позволяет определять конструкторы ключевым словом class:

new City('Paris') — это вызов конструктора. Инициализация объекта управляется специальным методом класса: constructorthis которого является только что созданным объектом.

Вызов конструктора создаёт новый пустой объект, наследующий свойства от прототипа конструктора. Ролью функции-конструктора является инициализация объекта. Как вы уже знаете, контекст этого типа вызова называется экземпляром. Это — тема следующей главы.

Когда перед аксессором myObject.myFunction идёт ключевое слово new, JavaScript совершит вызов конструктора, а не метода. Возьмём в качестве примера new myObject.myFunction(): сперва при помощи аксессора extractedFunction = myObject.myFunction функция извлекается, а затем вызывается как конструктор для создания нового объекта: new extractedFunction().

this в вызове конструктора

this — это только что созданный объект

Контекстом вызова конструктора является только что созданный объект. Он используется для инициализации объекта данными из аргументом функции-конструктора.

Давайте проверим контекст в следующем примере:

new Foo() делает вызов конструктора с контекстом fooInstance. Объект инициализируется внутри Foo: this.property задаётся значением по умолчанию.

Тоже самое происходит при использовании class, только инициализация происходит в методе constructor:

Когда исполняется new Bar(), JavaScript создаёт пустой объект и делает его контекстом метода constructor. Теперь вы можете добавлять свойства, используя this: this.property = 'Default Value'.

Ловушка: как не забыть про new

Некоторые функции JavaScript создают экземпляры при вызове не только в качестве конструктора, но и функции. Например, RegExp:

При исполнении new RegExp('\\w+') и RegExp('\\w+') JavaScript создаёт эквивалентные объекты регулярных выражений.

Использование вызова функции для создания объектом потенциально опасно (если опустить фабричный метод), потому что некоторые конструкторы могут не инициализировать объект при отсутствии ключевого слова new.

Следующий пример иллюстрирует проблему:

Vehicle — это функция, задающая свойства type и wheelsCount объекту-контексту. При исполнении Vehicle('Car', 4) возвращается объект car, обладающий корректными свойствами: car.type равен 'Car' а car.wheelsCount — 4. Легко подумать, что всё работает как надо.

Тем не менее, this — это объект window при вызове функции, и Vehicle('Car', 4) задаёт свойства объекта window — упс, что-то пошло не так. Новый объект не создан.

Обязательно используйте оператор new, когда ожидается вызов конструктора:

new Vehicle('Car', 4) работает верно: новый объект создан и инициализирован, поскольку присутствует слово new.

В вызове функции добавлена верификация: this instanceof Vehicle, чтобы убедиться, что у контекста исполнения верный тип объекта. Если this — не Vehicle, генерируется ошибка. Таким образом, если исполняется  Vehicle('Broken Car', 3) (без new), то выбрасывается исключение: Error: Incorrect invocation.

Непрямой вызов

Непрямой вызов производится, когда функция вызывается методами .call() или .apply().

Функции в JavaScript — объекты первого класса, то есть функция — это объект типа Function.

Из списка методов этой функции два, .call() и .apply(), используются для вызова функции с настраиваемым контекстом:

  • Метод .call(thisArg[, arg1[, arg2[, ...]]]) принимает в качестве первого аргумента thisArg контекст вызова, а список аргументов arg1, arg2, ... передаётся вызываемой функции.
  • Метод .apply(thisArg, [args]) принимает в качестве первого аргумента thisArg контекст вызова, а array-like объект [args] передаётся вызываемой функции в качестве аргумента.

Следующий пример демонстрирует непрямой вызов:

increment.call() и increment.apply() оба вызывают функцию-инкремент с аргументом 10.

Главным отличием между ними является то, что .call() принимает список аргументов, например, myFunction.call(thisValue, 'value1', 'value2'), а .apply() принимает эти значения в виде array-like объекта: myFunction.apply(thisValue, ['value1', 'value2']).

this при непрямом вызове

this — это первый аргумент .call() или .apply()

Очевидно, что при непрямом вызове this — значение, передаваемое .call() или .apply() в качестве первого аргумента. Пример:

Непрямой вызов может пригодиться, когда функцию нужно вызвать в особом контексте, например, решить проблему при вызове функции, где this — всегда window или undefined. Его также можно использовать для симуляции вызова метода объекта.

Ещё одним примером использования является создание иерархии классов в ES5 для вызова родительского конструктора:

Runner.call(this, name) в Rabbit создаёт непрямой вызов родительской функции для инициализации объекта.

Связанная функция

Связанная функция — это функция, связанная с объектом. Обычно она создаётся из обычной функции при помощи метода .bind(). У двух функций совпадают тела и области видимости, но различаются контексты.

Метод .bind(thisArg[, arg1[, arg2[, ...]]]) принимает в качестве первого аргумента thisArg контекст вызова связанной функции, а необязательный список аргументов arg1, arg2, ... передаётся вызываемой функции. Он возвращает новую функцию, связанную с thisArg.

Следующий код создаёт связанную функцию и вызывает её:

multiply.bind(2) возвращает новый объект функции double, который связан с числом 2. Код и область видимости у multiply и double совпадают.

В отличие от методов .apply() и .call(), сразу вызывающих функцию, метод .bind() возвращает новую функцию, которую впоследствии нужно будет вызвать с уже заданным this.

this в связанной функции

this — это первый аргумент .bind()

Ролью .bind() является создание новой функции, чей вызов будет иметь контекст, заданный в первом аргументе .bind(). Это — мощный инструмент, позволяющий создавать функции с заранее определённым значением this.

Давайте посмотрим, как настроить this связанной функции:

numbers.getNumbers.bind(numbers) возвращает функцию boundGetNumbers, которая связана с объектом numbers. Затем boundGetNumbers() вызывается с this, равным numbers, и возвращает корректный объект.

Функцию numbers.getNumbers можно извлечь в переменную simpleGetNumbers и без связывания. При дальнейшем вызове функции simpleGetNumbers() задаёт this как window или undefined, а не numbers. В этом случае simpleGetNumbers() не вернет корректное значение.

.bind() создаёт перманентную контекстную ссылку и хранит её. Связанная функция не может изменить контекст, используя .call() или .apply() с другим контекстом — даже повторное связывание не даст эффекта.

Только вызов связанной функции как конструктора может изменить контекст, но это не рекомендуется (используйте нормальные функции).

В следующем примере сперва объявляется связанная функция, а затем производится попытка изменить контекст:

Только new one() изменяет контекст связанной функции, в остальных типах вызова this всегда равен 1.

Стрелочная функция

Стрелочная функция нужна для более короткой формы объявления функции и лексического связывания контекста.

Её можно использовать следующим образом:

Стрелочные функции используют облегчённый синтаксис, убирая ключевое слово function. Можно даже опустить return, когда у функции есть лишь одно выражение.

Стрелочная функция анонимна анонимна, что означает, что её свойство name — пустая строка ''. Таким образом, у неё нет лексического имени, которое нужно для рекурсии и управления хэндлерами.

Кроме того, она не предоставляет объект arguments, в отличие от обычной функции. Тем не менее, это можно исправить, используя rest-параметры ES6:

this в стрелочной функции

this — это контекст, в котором определена стрелочная функция

Стрелочная функция не создаёт свой контекст исполнения, а заимствует this из внешней функции, в которой оа определена.

Следующий пример показывает прозрачность контекста:

setTimeout вызывает стрелочную функцию в том же контексте (метод myPoint), что и метод log(). Как мы видим, стрелочная функция «наследует» контекст той функции, в которой определена.

Если попробовать использовать в этом примере обычную функцию, она создаст свой контекст (window или undefined). Поэтому для того, чтобы код работал корректно, нужно вручную привязать контекст: setTimeout(function() {...}.bind(this)). Это громоздко, поэтому проще использовать стрелочную функцию.

Если стрелочная функция определена вне всех функций, её контекст — глобальный объект:

Стрелочная функция связывается с лексическим контекстом раз и навсегдаthis нельзя изменить даже при помощи метод смены контекста:

Функция, вызываемая непрямым образом с использованием .call(numbers), задаёт this значение numbers. Стрелочная функция get также получает numbers в качестве this, поскольку принимает контекст лексически. Неважно, как вызывается get, её контекстом всегда будет numbers. Непрямой вызов с другим контекстом (используя .call() или .apply()), повторное связывание (с использованием .bind()) не принесут эффекта.

Стрелочную функцию нельзя использовать в качестве конструктора. Если вызвать new get(), JavaScript выбросит ошибку: TypeError: get is not a constructor.

Ловушка: определение метода стрелочной функцией

Вы можете захотеть использовать стрелочную функцию для объявления метода. Справедливо: их объявления гораздо короче по сравнению с обычным выражением: (param) => {...} вместо function(param) {..}.

В этом примере демонстрируется определение метода format() класса Period с использованием стрелочной функции:

Так как format — стрелочная функция, определённая в глобальном контексте, её this — это объект window. Даже если format исполняется в качестве метода объекта walkPeriod.format(), window остаётся контекстом вызова. Так происходит, потому что стрелочная функция имеет статический контекст, не изменяемый другими типами вызовов.

this — это window, поэтому this.hours и this.minutes становятся undefined. Метод возвращает строку 'undefined hours and undefined minutes', что не является желаемым результатом.

Функциональное выражение решает проблему, поскольку обычная функция изменяет свой контекст в зависимости от вызова:

walkPeriod.format() — это вызов метода с контекстом walkPeriod. this.hours принимает значение 2, а this.minutes — 30, поэтому метод возвращает корректный результат: '2 hours and 30 minutes'.

Заключение

Поскольку вызов функции имеет наибольшее влияние на this, отныне не спрашивайте:

Откуда берется this?

а спрашивайте:

Как функция вызывается?

А в случае со стрелочной функцией спросите:

Каков this там, где объявлена стрелочная функция?

Такой подход к this убережет вас от лишней головной боли.

Не путайтесь в контекстах! 🙂

Перевод статьи «Gentle explanation of 'this' keyword in JavaScript»