13,8 тыс подписчиков

Полное руководство по "this" в JavaScript

3 мая 20233 мая 2023

2 мин

Источник: Nuances of Programming Курс SkillFactory Веб-разработчик с нуля. Освойте PHP и JavaScript, чтобы создавать веб-сайты и настраивать базы данных. Многие начинающие JS-разработчики не понимают значения ключевого слова this. Выяснить его роль в JavaScript будет полезно не только новичкам, но и тем, кто просто хочет освежить в памяти этот аспект. Ключевое слово this — одна из особенностей JavaScript, наиболее часто сбивающих с толку неопытных программистов. Пришедшее из Java, this было призвано помочь в реализации ООП. Тем не менее сомнения по поводу роли this в JavaScript могут возникать ежедневно — по крайней мере, пока вы не усвоите несколько простых, но неочевидных правил. Ошибочные представления о this Прежде чем перейти к сути, развеем самое распространенное заблуждение относительно этого ключевого слова. this используется в лексическом контексте Такое впечатление часто возникает у новичков. Им кажется, что this — это объект, в котором в качестве свойств хранятся все п

Оглавление

Ошибочные представления о this
this используется в лексическом контексте
Как определить значение this

Источник: Nuances of Programming

Курс SkillFactory Веб-разработчик с нуля. Освойте PHP и JavaScript, чтобы создавать веб-сайты и настраивать базы данных.

Многие начинающие JS-разработчики не понимают значения ключевого слова this. Выяснить его роль в JavaScript будет полезно не только новичкам, но и тем, кто просто хочет освежить в памяти этот аспект.

Ключевое слово this — одна из особенностей JavaScript, наиболее часто сбивающих с толку неопытных программистов. Пришедшее из Java, this было призвано помочь в реализации ООП. Тем не менее сомнения по поводу роли this в JavaScript могут возникать ежедневно — по крайней мере, пока вы не усвоите несколько простых, но неочевидных правил.

Ошибочные представления о this

Прежде чем перейти к сути, развеем самое распространенное заблуждение относительно этого ключевого слова.

this используется в лексическом контексте

Такое впечатление часто возникает у новичков. Им кажется, что this — это объект, в котором в качестве свойств хранятся все переменные в конкретной области видимости. Подобное заблуждение возникает из-за того, что в одном конкретном случае, так оно и есть. Если мы находимся на верхнем уровне, то this равно window (в случае обычного браузерного скрипта). А, как известно, все переменные, объявленные на верхнем уровне, доступны как свойства window.

В общем случае это не так, что легко проверить.

function fakeFunction () {
const someString = "some string";
console.log(this.someString);
}
fakeFunction();

Как определить значение this

Вот четкий и лаконичный алгоритм, с помощью которого даже неопытный программист сможет понять, чему равно this в каждом конкретном случае.

1. Если мы не находимся внутри функции, то this равно глобальному объекту. Если нет — переходим ко второму пункту.

2. Если мы находимся внутри стрелочной функции, то значение this равно значению this, находящемуся вне этой функции. Значение this в стрелочной функции определяется исключительно тем, где (в каком лексическом контексте) она была создана, и никак не зависит от того, как она была впоследствии вызвана. Если это не так — движемся дальше.

3. Если эта функция вызывается с помощью оператора new, то this будет ссылаться на вновь созданный объект в конструкторе функции. Если нет — идем дальше.

4. Если эта функция создана с помощью метода bind, call или apply, то значение this будет аргументом этой функции. Если нет — идем дальше.

5. Если эта функция получена как свойство объекта и сразу же вызвана, то this будет равно данному объекту. Если нет — переходим к последнему пункту.

6. Если функция вызывается в строгом режиме use strict, то this будет равно undefined. В противном случае this равняется глобальному объекту.