JavaScript this, замыкания и классы: полный разбор проблем с контекстом

Если ты когда-нибудь получал undefined там, где ожидал объект, или методы класса вдруг «не видели» свои свойства - ты не одинок. Потеря контекста this, сломанные замыкания и ошибки наследования - одни из самых частых проблем в JavaScript. В этой статье разберём каждую из них по шагам: что происходит, почему и как починить.

Что такое контекст в JavaScript

Контекст - это объект, на который ссылается ключевое слово this в момент вызова функции. Главная особенность JavaScript: значение this определяется не при объявлении функции, а при её вызове.

function greet() {
  console.log(this.name);
}

const user = { name: 'Алексей', greet };
user.greet();   // 'Алексей' - this === user
greet();        // undefined - this === window (или undefined в strict mode)

Именно поэтому контекст так легко «потерять».

Почему this указывает не на тот объект

Основные причины потери контекста

1. Передача метода в качестве колбэка

class Timer {
  constructor() {
    this.seconds = 0;
  }
  start() {
    setInterval(this.tick, 1000); // ❌ this внутри tick - уже не Timer
  }
  tick() {
    this.seconds++; // TypeError: Cannot read properties of undefined
  }
}

При передаче this.tick в setInterval функция теряет связь с объектом - она вызывается как обычная функция, а не как метод.

2. Деструктуризация метода

const obj = {
  value: 42,
  getValue() { return this.value; }
};

const { getValue } = obj;
getValue(); // undefined - контекст потерян
3. Вложенные функции
const counter = {
  count: 0,
  increment() {
    function inner() {
      this.count++; // ❌ this здесь - не counter
    }
    inner();
  }
};

Как исправить потерю контекста: bind, call, apply

call - вызов с явным контекстом

function introduce(greeting) {
  console.log(`${greeting}, я ${this.name}`);
}

const person = { name: 'Мария' };
introduce.call(person, 'Привет'); // 'Привет, я Мария'

call(thisArg, arg1, arg2, ...) - вызывает функцию сразу, передаёт аргументы через запятую.

apply - то же самое, но аргументы массивом

introduce.apply(person, ['Добрый день']); // 'Добрый день, я Мария'

Удобно, когда аргументы уже лежат в массиве, например при проксировании вызовов.

bind - создаёт новую функцию с зафиксированным контекстом

class Timer {
  constructor() {
    this.seconds = 0;
    this.tick = this.tick.bind(this); // ✅ фиксируем this
  }
  start() {
    setInterval(this.tick, 1000);
  }
  tick() {
    this.seconds++;
    console.log(this.seconds);
  }
}

bind возвращает новую функцию, которую можно передавать куда угодно - контекст всегда будет правильным.

Стрелочные функции как альтернатива

Стрелочные функции не имеют собственного this - они захватывают его из окружающего лексического контекста:

class Timer {
  constructor() {
    this.seconds = 0;
  }
  start() {
    setInterval(() => {
      this.seconds++; // ✅ this === Timer, потому что стрелка
    }, 1000);
  }
}

Когда что использовать:

• bind - для методов, которые передаются как колбэки

• call / apply - для разового вызова с нужным контекстом

• Стрелка - для вложенных функций и колбэков внутри методов

JavaScript замыкания: переменные не сохраняются

Что такое замыкание

Замыкание (closure) - это функция, которая «помнит» переменные из своей области видимости даже после того, как внешняя функция завершила работу.

function makeCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

count живёт в замыкании и не сбрасывается между вызовами.

Классическая проблема: var в цикле

// ❌ Проблема - все функции видят одно и то же i
for (var i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // Выведет: 3, 3, 3
  }, 100);
}

var не имеет блочной области видимости - к моменту срабатывания таймеров цикл уже завершился.

Решение 1: заменить var на let

for (let i = 0; i < 3; i++) {
  setTimeout(function() {
    console.log(i); // ✅ 0, 1, 2
  }, 100);
}

let создаёт отдельную переменную для каждой итерации.

Решение 2: IIFE (немедленно вызываемая функция)

for (var i = 0; i < 3; i++) {
  (function(j) {
    setTimeout(function() {
      console.log(j); // ✅ 0, 1, 2
    }, 100);
  })(i);
}

Решение 3: замыкание через фабричную функцию

function makeHandler(i) {
  return function() {
    console.log(i);
  };
}

for (var i = 0; i < 3; i++) {
  setTimeout(makeHandler(i), 100); // ✅ 0, 1, 2
}

JavaScript class: конструктор не инициализирует свойства

Типичная ошибка

class User {
  constructor(name, age) {
    name = name;   // ❌ присваивает параметру, не свойству
    age = age;
  }
}

const user = new User('Иван', 25);
console.log(user.name); // undefined

Забытый this. - одна из самых частых опечаток.

Правильный конструктор

class User {
  constructor(name, age) {
    this.name = name;   // ✅
    this.age = age;     // ✅
  }

  greet() {
    return `Привет, меня зовут ${this.name}`;
  }
}

const user = new User('Иван', 25);
console.log(user.greet()); // 'Привет, меня зовут Иван'

Ошибка: вызов без new

const user = User('Иван', 25); // ❌ TypeError в strict mode

Инициализация свойств в теле класса (Class Fields)

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

class User {
  role = 'user';          // публичное поле
  #password = null;       // приватное поле

  constructor(name) {
    this.name = name;
  }
}

Поддерживается во всех современных браузерах и Node.js 12+.

JavaScript extends: наследование не работает

Ошибка: не вызван super()

class Animal {
  constructor(name) {
    this.name = name;
  }
  speak() {
    return `${this.name} издаёт звук`;
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    // ❌ Забыли вызвать super()
    this.breed = breed; // ReferenceError: Must call super constructor
  }
}

В дочернем классе обязательно нужно вызвать super() до первого обращения к this.

Правильное наследование

class Dog extends Animal {
  constructor(name, breed) {
    super(name);          // ✅ сначала super
    this.breed = breed;   // теперь можно использовать this
  }

  speak() {
    return `${this.name} лает`;
  }
}

const dog = new Dog('Рекс', 'Лабрадор');
console.log(dog.speak());        // 'Рекс лает'
console.log(dog instanceof Animal); // true

Вызов родительского метода через super

class Dog extends Animal {
  speak() {
    const parentResult = super.speak(); // ✅ вызов метода родителя
    return `${parentResult} (гав!)`;
  }
}

dog.speak(); // 'Рекс издаёт звук (гав!)'
Проблема: переопределение без super теряет данные
class Admin extends User {
  constructor(name) {
    super(name);
    this.role = 'admin'; // ✅ перезаписывает role из родителя
  }
}

Если не вызвать super(name), свойство this.name из родительского конструктора не установится.

Частые ошибки и быстрые решения

Часто задаваемые вопросы (FAQ)

В чём разница между call и apply? Оба вызывают функцию с явным this. Разница только в передаче аргументов: call принимает их через запятую, apply - массивом. В современном коде apply часто заменяют на call со spread-оператором: fn.call(ctx, ...args).

Когда bind лучше стрелочной функции? bind удобен, когда нужно зафиксировать контекст для уже существующего метода (например, в конструкторе). Стрелочные функции лучше подходят для встроенных колбэков - они короче и нагляднее.

Может ли this быть null или undefined? Да, в strict mode ('use strict') при обычном вызове функции this === undefined. В браузерах без strict mode this по умолчанию - глобальный объект window.

Зачем нужны замыкания, если есть классы? Замыкания - более лёгковесный способ создавать приватное состояние без классов. Они широко используются в функциональном программировании, хуках React (useState, useEffect) и модульных паттернах.

Почему var в цикле ломает замыкания? var имеет функциональную область видимости, а не блочную. Все итерации цикла разделяют одну переменную. let и const создают отдельную переменную для каждого блока {}.

Можно ли переопределить приватное поле из родителя? Нет. Приватные поля (#field) доступны только внутри того класса, в котором они объявлены. Дочерний класс не видит и не может изменить #field родителя.

Что происходит, если не написать constructor в дочернем классе? JavaScript автоматически подставит constructor(...args) { super(...args); }. Это удобно, когда дочерний класс не добавляет новых свойств.

Как передать несколько аргументов через bind? bind поддерживает частичное применение: const addFive = add.bind(null, 5) - первый аргумент всегда будет 5. Остальные передаются при вызове.

Лучшие практики

• Всегда используй let и const вместо var - это избавит от большинства проблем с замыканиями в циклах.

• Включай strict mode - 'use strict' в начале файла или модуля сразу показывает ошибки с контекстом.

• Фиксируй методы в конструкторе через this.method = this.method.bind(this), если передаёшь их как колбэки.

• Используй стрелочные функции для колбэков - они не создают свой this, что делает код предсказуемым.

• Всегда вызывай super() первым в конструкторе дочернего класса - это требование языка, не рекомендация.

• Проверяй instanceof для отладки цепочки прототипов при проблемах с наследованием.

• Используй приватные поля (#) вместо соглашения об именовании _field - это настоящая инкапсуляция.

Итоги

Проблемы с this, замыканиями и классами в JavaScript почти всегда имеют одну природу: непонимание того, когда и как JavaScript связывает переменные с контекстом.

Запомни главное:

• this определяется при вызове, а не при объявлении - используй bind, стрелки или call/apply чтобы контролировать его.

• Замыкания работают правильно с let и const - var в циклах создаёт ловушку.

• В конструкторе дочернего класса super() должен идти первым.

• Класс - это синтаксический сахар над прототипами, но его правила строгие и явные.

Разобравшись с этими концепциями, ты устранишь целый класс трудноуловимых багов и напишешь более предсказуемый код.