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

Контекст (this) в JavaScript: полное руководство

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

Контекст (context) в JavaScript это значение this внутри функции. this указывает на объект, в контексте которого выполняется функция.

Простейший пример:

const person = {
  name: 'John',
  greet() {
    console.log(this.name); // 'this' указывает на 'person'
  }
};

person.greet(); // Output: John

Правила определения контекста

1. Default binding (по умолчанию)

// Функция вызывается без объекта
function sayHi() {
  console.log(this); // window (в браузере) или global (в Node.js)
}

sayHi();

// В Node.js:
// this это global объект или module.exports в строгом режиме undefined

2. Implicit binding (неявное связывание)

const user = {
  name: 'Alice',
  getName() {
    return this.name;
  }
};

user.getName(); // 'Alice' - this это user

// ВАЖНО: если присвоишь метод переменной, контекст теряется
const getName = user.getName;
getName(); // undefined - потому что this это не user

3. Explicit binding (явное связывание)

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

const person = { name: 'Bob' };

// call() - вызывает функцию с указанным контекстом
greet.call(person); // 'Hello Bob'

// apply() - то же что call, но аргументы в массиве
function introduce(greeting, punctuation) {
  return `${greeting} ${this.name}${punctuation}`;
}

introduce.apply(person, ['Hi', '!']); // 'Hi Bob!'

// bind() - создаёт новую функцию с привязанным контекстом
const boundGreet = greet.bind(person);
boundGreet(); // 'Hello Bob'
// Можно вызвать позже
setTimeout(boundGreet, 1000);

4. Constructor binding (конструктор)

function Person(name) {
  this.name = name; // this новый объект
}

const person = new Person('Charlie'); // this это новый объект
console.log(person.name); // 'Charlie'

5. Arrow function (стрелочная функция)

// Стрелочные функции НЕ имеют своего this
// Они наследуют this из окружающего контекста

const person = {
  name: 'David',
  regularMethod() {
    console.log(this.name); // 'David'
  },
  arrowMethod: () => {
    console.log(this.name); // undefined (this это global)
  },
  methodWithArrow() {
    setTimeout(() => {
      console.log(this.name); // 'David' (наследует от методa)
    }, 1000);
  }
};

person.regularMethod(); // David
person.arrowMethod(); // undefined
person.methodWithArrow(); // David (через 1 секунду)

Практические примеры

Проблема 1: Потеря контекста в callback'е

// ❌ ПЛОХО - контекст теряется
class Button {
  constructor(label) {
    this.label = label;
  }
  
  click() {
    console.log(`Button clicked: ${this.label}`);
  }
}

const btn = new Button('Submit');
const clickHandler = btn.click;
clickHandler(); // TypeError: Cannot read property 'label' of undefined

// ✅ РЕШЕНИЕ 1: bind в конструкторе
class Button {
  constructor(label) {
    this.label = label;
    this.click = this.click.bind(this);
  }
  
  click() {
    console.log(`Button clicked: ${this.label}`);
  }
}

// ✅ РЕШЕНИЕ 2: arrow function
class Button {
  constructor(label) {
    this.label = label;
  }
  
  click = () => {
    console.log(`Button clicked: ${this.label}`);
  }
}

// ✅ РЕШЕНИЕ 3: inline arrow function
const btn = new Button('Submit');
element.addEventListener('click', () => btn.click());

Проблема 2: this в обработчиках событий

// ❌ ПЛОХО
const user = {
  name: 'Emma',
  register() {
    document.getElementById('btn').addEventListener('click', function() {
      console.log(this.name); // undefined - this это DOM элемент
    });
  }
};

// ✅ ХОРОШО - bind или arrow
const user = {
  name: 'Emma',
  register() {
    document.getElementById('btn').addEventListener('click', () => {
      console.log(this.name); // 'Emma'
    });
  }
};

Контекст в Node.js/Express

// Express middleware
const app = require('express')();

// ❌ НЕПРАВИЛЬНО - this это undefined или объект middleware'а
app.get('/user', function(req, res) {
  console.log(this); // undefined в strict mode
});

// ✅ ПРАВИЛЬНО - используй стрелочную функцию или req/res
app.get('/user', (req, res) => {
  // Используй req и res вместо this
  res.json({ name: 'John' });
});

// Или явный контекст
const handler = {
  getUser(req, res) {
    res.json({ name: this.name });
  }
};

app.get('/user', handler.getUser.bind(handler));

Контекст в классах

// ES6 классы автоматически биндят методы
class User {
  constructor(name) {
    this.name = name;
  }
  
  // Обычный метод - нужно биндить если передаёшь как callback
  getName() {
    return this.name;
  }
  
  // Arrow function - автоматически биндится
  getNameArrow = () => {
    return this.name;
  }
}

const user = new User('Frank');
const getName = user.getName;
const getNameArrow = user.getNameArrow;

getName(); // undefined
getNameArrow(); // 'Frank'

call, apply, bind сравнение

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

const person = { name: 'Grace' };

// call() - аргументы переданы отдельно
introduce.call(person, 'Hi', '!'); // 'Hi Grace!'

// apply() - аргументы в массиве
introduce.apply(person, ['Hi', '!']); // 'Hi Grace!'

// bind() - создаёт новую функцию, не вызывает сразу
const boundIntroduce = introduce.bind(person, 'Hi', '!');
boundIntroduce(); // 'Hi Grace!' (вызывается позже)

// Эффективно для callbacks
setTimeout(boundIntroduce, 1000);

Проверка контекста

function checkThis() {
  console.log(this);
  console.log(typeof this);
  console.log(this instanceof Object);
}

checkThis(); // global object

const obj = {};
checkThis.call(obj); // {}

const arrow = () => {
  console.log(this); // this из окружающего контекста
};

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

// ✅ Используй стрелочные функции для callbacks
class UserService {
  getUser = (id: string) => {
    // this автоматически привязан
  }
  
  fetchUsers() {
    fetch('/api/users')
      .then(res => res.json())
      .then(data => {
        // this всё ещё указывает на UserService
        this.processData(data);
      });
  }
  
  processData(data: any) {
    // ...
  }
}

// ✅ Биндь методы в конструкторе если нужно
class Component {
  constructor() {
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    // this указывает на Component
  }
}

// ✅ Используй явные параметры вместо this
function processUser(user: User, action: string) {
  // явно понятно что ты используешь
}

// ❌ ИЗБЕГАЙ полагаться на this когда не нужно
const user = { name: 'Hank' };
const getName = function() {
  return this.name; // Зависит от контекста вызова
};

Выводы

Контекст (this):

• Определяется КАК вызывается функция (не где она определена)
• Default binding используется когда функция вызывается без объекта
• Implicit binding когда функция вызывается как метод объекта
• Explicit binding с call(), apply(), bind()
• Constructor binding в конструкторах с new
• Arrow functions наследуют this из окружающего контекста
• Для callbacks лучше использовать стрелочные функции или bind()
• Избегай излишней зависимости от this

Правило большого пальца: Если запутался в контексте это обычно означает что можно написать код проще без this.