Коротко о this в функциях javascript


Предисловие
На просторах интернета довольно много информации о том, как работает this, но мне всё время не хватало буквально чуть-чуть, чтобы до конца в этом разобраться.

Недавно я все же, как мне кажется, сделал это и хотел бы поделиться с вами.

Без лишних слов
Мы разберем как простые, так и сложные примеры — так что всем будет интересно.

Два основных тезиса, которые мы рассмотрим:

(1) Для функций, объявленных через function(){}, this вычисляется в момент вызова.
(2) Для стрелочных функций this определяется в момент создания функции.

Начнем с простых примеров.

function globalFunc() {
console.log(this);
}
const globalArrowFunc = () => {
// создали функцию в глобальной области видимости, где this — window/undefined
// мы будем полагать, что включен use strict и глобально this === undefined
console.log(this);
}

globalFunc(); // undefined
globalArrowFunc(); // undefined

А что, если мы добавим эти функции в объект:

const cat = {
name: ‘Pirate’,
globalFunc,
globalArrowFunc
};

cat.globalFunc(); // { name: ‘Pirate’, … }
cat.globalArrowFunc(); // undefined

Давайте разберемся.

Вызов cat.globalFunc() вернул нам объект cat. Для простоты понимания, можно рассматривать это так «this, при вызове функций, объявленных через function(){}, будет равен объекту перед точкой».

Тогда почему cat.globalArrowFunc() вернул нам undefined? Дело в том, что значение this для стрелочной функции определяется в момент ее создания, а, когда мы ее создавали, значение this было undefined.

Теперь давайте создадим объект с парой методов:

const dog = {
name: ‘Viking’,
// для наглядности мы не будем использовать сокращенный синтаксис
// но с ним было бы тоже самое
localFunc: function() {
console.log(this);
},
localArrowFunc: () => {
console.log(this);
}
};

dog.localFunc(); // { name: ‘Viking’, … }
dog.localArrowFunc(); // undefind

Почему так?

dog.localFunc() — потому что объект перед точкой dog.
dog.localArrowFunc() — потому что внутри объекта this — это тоже глобальный объект, а значит мы получаем undefined.

Давайте немного усложним наш пример.

const dog = {
name: ‘Viking’,
localFunc: function() {
const arrowFuncInLocalFunc = () => {
console.log(this);
};
function funcInLocalFunc() {
console.log(this);
};
arrowFuncInLocalFunc(); // 1
funcInLocalFunc(); // 2
},
localArrowFunc: () => {
const arrowFuncInLocalArrowFunc = () => {
console.log(this);
};
function funcInLocalArrowFunc() {
console.log(this);
};
arrowFuncInLocalArrowFunc(); // 3
funcInLocalArrowFunc(); // 4
}
};

dog.localFunc();
// 1 — { name: ‘Viking’, … }
// 2 — undefind
dog.localArrowFunc();
// 3 — undefind
// 4 — undefind

Давайте разбираться!

(1) arrowFuncInLocalFunc() // { name: ‘Viking’,… }

Почему так происходит?

Потому что, когда мы создавали объект, мы записали ему функцию localFunc. А, как мы помним из предыдущих примеров, для нее this — это объект перед точкой, то есть { name: ‘Viking’,… }. Теперь поговорим про саму функцию arrowFuncInLocalFunc — она создается непосредственно в момент вызова localFunc и запоминает значение this, которое было в месте ее создания. Таким образом мы получаем, что arrowFuncInLocalFunc возвращает нам { name: ‘Viking’,… }.

(2) funcInLocalFunc() // undefind

Почему так происходит?

Как мы говорили ранее, для функций, объявленных через function(){} значение this определяется в момент вызова и равно объекту перед точкой. В данном случае у нас нет объекта перед точкой, а значит this — глобальный объект или, в нашем случае, undefined.

(3) arrowFuncInLocalArrowFunc() // undefined

Почему так происходит?

Этот пример очень похож на (1), только наша функция arrowFuncInLocalArrowFunc создается внутри такой же стрелочной функции. Также мы помним, что стрелочные фукнции в момент объявления записывают в this значение из своего окружения. Однако, наша функция была создана внутри localArrowFunc, для которой this — undefined. А значит и для arrowFuncInLocalArrowFunc this будет равен undefined.

(4) funcInLocalArrowFunc() // undefined

Почему так происходит?

Точно по той же причине, что и в пункте (2) для funcInLocalFunc

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

const cat = {
name: ‘Tom’,
getFuncWithTomName: function() {
return () => {
console.log(this.name);
}
}
};

const mouse = {
name: ‘Jerry’,
logName: cat.getFuncWithTomName()
};

mouse.logName(); // Tom o_O !?

Так происходит потому что getFuncWithTomName создает и возвращает стрелочную функцию, а в момент создания стрелочной функции this тот же самый, что и у getFuncWithTomName. А для getFuncWithTomName this — это объект перед точкой (cat).

Итого
Контекст для стрелочных функци определяется в момент их создания.

Контекст для function(){} определяется в момент их вызова и равен объекту перед точкой.

Оставить комментарий

Интересное