Многие начинающие 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 равняется глобальному объекту.
Читайте также:
- 5 библиотек JavaScript, которые повысят вашу эффективность
- Хитрости объектно-ориентированного программирования. Часть 6 SLAP для функций
- 10 программистских терминов на понятном языке
Читайте нас в Telegram, VK и Дзен
Перевод статьи Evgeniykravtsov: A Complete Guide to “this” in JavaScript
