Как поменять контекст вызова функции?

Изменение контекста вызова (this) в JavaScript

Контекст вызова — это значение this внутри функции. Это ключевое понятие в JavaScript, которое часто вызывает проблемы. Рассмотрю способы контролировать и менять контекст.

1. Понимание контекста — this и bind()

// Проблема: потеря контекста
class User {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
}

const user = new User("John");
user.greet(); // "Hello, I am John" - this работает

// Но если передать метод как callback:
const greetFunc = user.greet;
greetFunc(); // "Hello, I am undefined" - this потерян!

// Решение 1: bind() - жёсткое связывание
const boundGreet = user.greet.bind(user);
boundGreet(); // "Hello, I am John" - теперь работает

// Решение 2: call() - вызов с заданным this
user.greet.call(user); // "Hello, I am John"

// Решение 3: apply() - как call, но с массивом аргументов
user.greet.apply(user); // "Hello, I am John"

2. Bind в классах и компонентах

// Класс с методом
class Calculator {
  value = 0;

  add(num) {
    this.value += num;
    return this.value;
  }

  // Вариант 1: bind в конструкторе
  constructor() {
    this.add = this.add.bind(this);
  }

  // Вариант 2: стрелочная функция (автоматически привязана)
  subtract = (num) => {
    this.value -= num;
    return this.value;
  };

  // Вариант 3: используем стрелочную функцию в методе
  multiply(num) {
    return (() => {
      this.value *= num;
      return this.value;
    })();
  }
}

const calc = new Calculator();
calc.value = 10;

const addToCalculator = calc.add; // Передаём как callback
addToCalculator(5); // 15 (благодаря bind)

const subtractFromCalc = calc.subtract;
subtractFromCalc(3); // 12 (стрелочная функция автоматически привязана)

3. React компоненты и контекст

// Проблема в классовых компонентах
class Counter extends React.Component {
  state = { count: 0 };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  // Если передать increment как onClick callback, this будет undefined
  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        
        {/* Неправильно - потеря контекста */}
        <button onClick={this.increment}>+</button>
        
        {/* Правильно - несколько вариантов */}
        
        {/* Вариант 1: bind в конструкторе */}
        <button onClick={this.increment.bind(this)}>+ (bind)</button>
        
        {/* Вариант 2: стрелочная функция */}
        <button onClick={() => this.increment()}>+ (arrow)</button>
        
        {/* Вариант 3: стрелочный метод (публичное поле класса) */}
        <button onClick={this.incrementArrow}>+ (field)</button>
      </div>
    );
  }

  // Вариант 3: публичное поле класса со стрелочной функцией
  incrementArrow = () => {
    this.setState({ count: this.state.count + 1 });
  };
}

4. Функциональные компоненты с useCallback

// В функциональных компонентах нет проблемы с this
// Но есть проблема с переменой callback references

function Counter() {
  const [count, setCount] = useState(0);

  // Проблема: callback создаётся каждый раз при рендере
  const handleIncrement = () => {
    setCount(count + 1);
  };

  // Если компонент сложный, это может вызвать лишние ре-рендеры
  // Решение: useCallback
  const handleIncrementMemo = useCallback(() => {
    setCount(prev => prev + 1);
  }, []); // Зависимостей нет, callback создаётся один раз

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleIncrementMemo}>+</button>
    </div>
  );
}

5. Call, Apply, Bind — различия

function sayHello(greeting, punctuation) {
  console.log(`${greeting}, I am ${this.name}${punctuation}`);
}

const person = { name: "John" };

// call() - передаёт аргументы списком
sayHello.call(person, "Hello", "!");
// "Hello, I am John!"

// apply() - передаёт аргументы массивом
sayHello.apply(person, ["Hi", "?"]);
// "Hi, I am John?"

// bind() - возвращает новую функцию, привязанную к контексту
const boundSayHello = sayHello.bind(person, "Hey");
boundSayHello("!!!"); // "Hey, I am John!!!"

// Практический пример: bind при передаче параметров
function processData(data, callback) {
  callback(data);
}

const processor = {
  name: "Processor",
  process(data) {
    console.log(`${this.name} processed: ${data}`);
  }
};

// Без bind - потеря контекста
processData("data", processor.process); // "undefined processed: data"

// С bind - контекст сохранён
processData("data", processor.process.bind(processor)); // "Processor processed: data"

// Или со стрелочной функцией
processData("data", (data) => processor.process(data)); // "Processor processed: data"

6. Практические примеры в React

// Компонент с обработчиками событий
interface FormProps {
  onSubmit: (data: FormData) => void;
}

export function Form({ onSubmit }: FormProps) {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  // Проблема: контекст внутри handleSubmit
  // Решение: useCallback
  const handleSubmit = useCallback((e: React.FormEvent) => {
    e.preventDefault();
    onSubmit({ email, password });
  }, [email, password, onSubmit]);

  return (
    <form onSubmit={handleSubmit}>
      <input value={email} onChange={e => setEmail(e.target.value)} />
      <input value={password} onChange={e => setPassword(e.target.value)} />
      <button type="submit">Submit</button>
    </form>
  );
}

// Если нужно передать параметр в обработчик
interface ListProps {
  items: Item[];
  onDelete: (id: string) => void;
}

export function List({ items, onDelete }: ListProps) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>
          {item.name}
          
          {/* Неправильно - onDelete вызывается сразу */}
          <button onClick={onDelete(item.id)}>Delete</button>
          
          {/* Правильно - стрелочная функция */}
          <button onClick={() => onDelete(item.id)}>Delete</button>
          
          {/* Или useCallback */}
          <button onClick={useCallback(() => onDelete(item.id), [item.id, onDelete])}>
            Delete
          </button>
        </li>
      ))}
    </ul>
  );
}

7. Когда нужно менять контекст

// Ситуация 1: Передача метода как callback
const obj = {
  value: 42,
  getValue() { return this.value; }
};

setTimeout(obj.getValue, 1000); // undefined - потеря контекста
setTimeout(obj.getValue.bind(obj), 1000); // 42 - правильно

// Ситуация 2: Функция высшего порядка
function withLogging(fn) {
  return function(...args) {
    console.log("Calling:", fn.name);
    return fn.apply(this, args); // Сохраняем контекст
  };
}

// Ситуация 3: Array методы с callback (forEach, map, filter)
const numbers = [1, 2, 3];
const doubler = {
  factor: 2,
  double(num) { return num * this.factor; }
};

// Неправильно
numbers.map(doubler.double); // NaN - потеря this

// Правильно
numbers.map(doubler.double.bind(doubler)); // [2, 4, 6]

// Или использовать стрелочную функцию
numbers.map(num => doubler.double(num)); // [2, 4, 6]

Рекомендация

Используй следующие подходы в порядке предпочтения:

1. Стрелочные функции (избегают проблему контекста) — в React компонентах
2. useCallback (функциональные компоненты) — для производительности
3. bind() (классовые компоненты) — в конструкторе для методов
4. Публичные поля класса со стрелочными функциями — альтернатива bind
5. Избегай call/apply в обычном коде — используй bind или стрелочные функции