В чем разница между методами переопределения контекста в JavaScript?

Методы переопределения контекста (this) в JavaScript

Контекст (this) — это объект, в контексте которого выполняется функция. В JavaScript есть несколько способов явно управлять значением this: call(), apply(), bind() и стрелочные функции.

call()

call() вызывает функцию с явно указанным контекстом this и аргументами, передаваемыми отдельно.

const user = {
  name: "Alice",
  greet(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
  }
};

const otherUser = { name: "Bob" };

// Используем call для переопределения this
user.greet.call(otherUser, "Hello", "!");
// "Hello, Bob!"

// Сравнение с обычным вызовом
user.greet("Hello", "!");
// "Hello, Alice!"

Синтаксис:

function.call(thisArg, arg1, arg2, ...)

Особенности:

• Аргументы передаются поочередно
• Функция вызывается немедленно
• Каждый аргумент указывается отдельно

apply()

apply() похожа на call(), но аргументы передаются массивом.

const user = {
  name: "Alice",
  greet(greeting, punctuation) {
    return `${greeting}, ${this.name}${punctuation}`;
  }
};

const otherUser = { name: "Bob" };

// apply принимает массив аргументов
user.greet.apply(otherUser, ["Hello", "!"]);
// "Hello, Bob!"

// Полезно с функциями, принимающими переменное число аргументов
Math.max.apply(null, [1, 5, 3, 9, 2]);
// 9

// Эквивалент с spread оператором (modern)
Math.max(...[1, 5, 3, 9, 2]);
// 9

Синтаксис:

function.apply(thisArg, [arg1, arg2, ...])

Особенности:

• Аргументы передаются массивом
• Функция вызывается немедленно
• Удобна для работы с переменным числом аргументов

bind()

bind() создает новую функцию с заданным контекстом this. Функция не вызывается сразу, а возвращается новая функция.

const user = {
  name: "Alice",
  greet(greeting) {
    return `${greeting}, ${this.name}`;
  }
};

const otherUser = { name: "Bob" };

// bind создает новую функцию
const boundGreet = user.greet.bind(otherUser);
boundGreet("Hello");
// "Hello, Bob!"

// Полезно при передаче методов как callbacks
class Button {
  constructor(label) {
    this.label = label;
  }
  
  onClick() {
    console.log(`Button ${this.label} clicked`);
  }
}

const button = new Button("Submit");

// БЕЗ bind — this будет undefined
document.querySelector("button").addEventListener("click", button.onClick);
// TypeError: Cannot read property of undefined

// С bind — this привязана
document.querySelector("button").addEventListener(
  "click",
  button.onClick.bind(button)
);
// "Button Submit clicked"

Синтаксис:

function.bind(thisArg, arg1, arg2, ...)

Особенности:

• Возвращает новую функцию, не вызывает её
• Можно передать частичные аргументы (currying)
• Переопределенный this невозможно изменить позже

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

Стрелочные функции не имеют собственного this. Они наследуют this из окружающего контекста (lexical this).

const user = {
  name: "Alice",
  
  // Обычная функция — свой this
  greet() {
    return `Hello, ${this.name}`;
  },
  
  // Стрелочная функция — наследует this
  greetArrow: () => {
    return `Hello, ${this.name}`; // this из глобального контекста
  }
};

user.greet();
// "Hello, Alice"

user.greetArrow();
// "Hello, undefined" (this указывает на window/global)

Правильное использование стрелочных функций:

class UserProfile {
  constructor(name) {
    this.name = name;
  }
  
  // Обычная функция как метод
  getName() {
    return this.name;
  }
  
  // Стрелочная функция как поле класса
  // this наследуется из класса
  getNameAsync = () => {
    return setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
}

const profile = new UserProfile("Alice");
profile.getNameAsync();
// "Alice" (правильный this)

Сравнительная таблица

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

Использование call для наследования:

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

function Dog(name, breed) {
  Animal.call(this, name); // вызвать Animal с this = Dog instance
  this.breed = breed;
}

const dog = new Dog("Rex", "Labrador");
console.log(dog.name); // "Rex"

Использование apply с массивом:

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
sum.apply(null, numbers);
// 6

Использование bind для debounce:

function onResize() {
  console.log(`Window resized to ${this.innerWidth}x${this.innerHeight}`);
}

// Привязываем контекст
window.addEventListener("resize", onResize.bind(window));

Вывод

• call() — вызовет функцию с новым this и аргументами поочередно
• apply() — вызовет функцию с новым this и аргументами массивом
• bind() — создает новую функцию с привязанным this
• Стрелочные функции — наследуют this лексически, не переопределяют
• Для callbacks и обработчиков — используй bind()
• Современный JavaScript предпочитает стрелочные функции и методы классов