Ключевое слово this в JavaScript: привязка и ловушки

this определяется в момент вызова

Большая часть путаницы вокруг this в JavaScript растёт из одного ложного допущения: будто this зависит от того, где функция объявлена. Нет. this зависит от того, как функцию вызвали.

Посмотрите, как одна и та же функция ведёт себя при двух разных вызовах:

function whoAmI() {
    return this;
}

const user = { name: "Ada", whoAmI };

console.log(user.whoAmI() === user);   // true
console.log(whoAmI());                  // undefined (в строгом режиме)

Одна и та же функция — разный this. В первом вызове перед точкой стоит user, поэтому this равен user. Во втором вызове перед функцией нет ничего, и this оказывается undefined. Сама функция не изменилась — изменилось место вызова.

Запомните эту мысль: чтобы понять, чему равен this внутри функции javascript, смотрите не на объявление, а на вызов.

Четыре правила привязки this

Привязка this в javascript определяется одним из четырёх правил. Практически любой вопрос про this сводится к тому, чтобы понять, какое именно из них сработало.

1. Вызов как метод: obj.fn()

Если функция вызывается как свойство объекта, this — это сам объект:

const counter = {
    count: 0,
    increment() {
        this.count += 1;
        return this.count;
    },
};

console.log(counter.increment());   // 1
console.log(counter.increment());   // 2

То, что стоит перед точкой, и становится this. Вот и вся магия.

2. Обычный вызов: fn()

Если функция вызывается без объекта перед ней, то this будет undefined в strict mode (а он автоматически включается в модулях и классах) или глобальным объектом в нестрогом режиме:

"use strict";

function show() {
    console.log(this);
}

show();   // undefined

Именно отсюда берутся ошибки вида «this is undefined». Стоит вытащить метод из объекта — и вызов метода превращается в обычный вызов функции:

"use strict";

const counter = {
    count: 0,
    increment() { this.count += 1; },
};

const fn = counter.increment;
// fn();   // TypeError: Cannot read properties of undefined

Нет counter. перед вызовом — нет и привязки. Функция попросту не помнит объект, из которого её достали.

3. Явная привязка: .call(), .apply(), .bind()

this можно насильно указать вручную — в какое угодно значение:

function greet(greeting) {
    return `${greeting}, ${this.name}`;
}

const ada = { name: "Ada" };

console.log(greet.call(ada, "Hello"));       // Hello, Ada
console.log(greet.apply(ada, ["Hi"]));       // Hi, Ada

const greetAda = greet.bind(ada);
console.log(greetAda("Hey"));                // Hey, Ada

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

4. Вызов через new: new Fn()

Когда функция вызывается через new, создаётся новый объект, и именно он становится this:

function User(name) {
    this.name = name;
}

const ada = new User("Ada");
console.log(ada.name);   // Ada

Классы используют этот же механизм под капотом. Мы познакомимся с ними в одной из следующих глав.

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

Стрелочные функции намеренно ломают правила, о которых мы говорили выше. У них вообще нет собственной привязки this — они подхватывают его из окружающего контекста, причём фиксируют в момент объявления стрелки:

const user = {
    name: "Ada",
    regular: function () { return this; },
    arrow: () => this,
};

console.log(user.regular() === user);   // true
console.log(user.arrow());              // undefined (или window/globalThis)

Стрелочная функция на верхнем уровне модуля захватывает this самого модуля, а это undefined. И хотя мы вызываем её как user.arrow(), стрелка наотрез отказывается перепривязываться.

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

const timer = {
    seconds: 0,
    start() {
        setInterval(() => {
            this.seconds += 1;
            console.log(this.seconds);
        }, 1000);
    },
};

// timer.start();   // выводит 1, 2, 3, ...

Стрелочная функция внутри setInterval наследует this от start, а start был вызван как timer.start(). Поэтому this.seconds работает как надо. Обычная function на этом месте получила бы собственный this (тот, который подсунет setInterval), и всё бы сломалось.

Правило на практике: для колбэков внутри методов берите стрелочные функции, а сами методы объявляйте как обычные функции.

Классическая ловушка с this в колбэке

Это самый частый способ потерять this в javascript. Передаёте метод как колбэк — и привязка слетает:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();
c.increment();   // 1

// setTimeout(c.increment, 100);   // TypeError: this is undefined

setTimeout вызывает функцию как обычную, а не как c.increment(). Исправить это можно тремя способами:

class Counter {
    count = 0;
    increment() {
        this.count += 1;
        console.log(this.count);
    }
}

const c = new Counter();

// 1. Обёртка в стрелочную функцию — вызываем как метод внутри стрелки
setTimeout(() => c.increment(), 0);

// 2. .bind — фиксируем this на c
setTimeout(c.increment.bind(c), 0);

// 3. Поле класса со стрелочной функцией — автопривязка на каждый экземпляр
class Counter2 {
    count = 0;
    increment = () => {
        this.count += 1;
        console.log(this.count);
    };
}
setTimeout(new Counter2().increment, 0);

Все три варианта рабочие. Но обёртка со стрелочной функцией обычно читается понятнее всего.

this на верхнем уровне

Значение this на верхнем уровне зависит от того, где выполняется код:

• Скрипт в браузере (не модуль): this — это window.
• ES-модуль (сюда же относится большинство современного кода, собранного бандлером): this равен undefined.
• CommonJS-модуль в Node.js: this — это module.exports.

Если нужна надёжная ссылка на глобальный объект в любом окружении, используйте globalThis:

console.log(typeof globalThis);   // object
globalThis.appVersion = "1.0.0";
console.log(globalThis.appVersion);

На практике лучше не полагаться на this верхнего уровня. Если вам действительно нужен глобальный объект — берите globalThis. Во всех остальных случаях передавайте значения явно.

Быстрое дерево решений

Если вы смотрите на this и не понимаете, чему он будет равен, пройдитесь по этому списку:

1. Это стрелочная функция? Тогда this берётся из внешней области видимости. Как её вызвали — неважно.
2. Функцию вызвали через new? Тогда this — это новый объект.
3. Её вызвали через .call, .apply или как связанную (bound) функцию? Тогда this — то, что передали.
4. Вызов вида obj.method()? Тогда this — это obj.
5. Обычный вызов fn()? Тогда в strict mode this будет undefined.

Эта лесенка — именно в таком порядке — покрывает все случаи.

Дальше: функции высшего порядка

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