Что делает метод bind?

Метод bind в JavaScript

bind — это один из трёх методов функции для управления контекстом this. Это критически важный концепт для фронтенд-разработчика, особенно при работе с React и обработчиками событий.

Что такое bind?

bind() создаёт новую функцию, у которой контекст this постоянно привязан (bound) к указанному объекту. Это отличается от call() и apply() тем, что bind не вызывает функцию сразу, а возвращает новую функцию.

const obj = {
  name: 'Alice',
  greet: function() {
    console.log('Hello, ' + this.name);
  }
};

// Без bind — контекст теряется
const greetFunc = obj.greet;
greetFunc(); // undefined

// С bind — контекст сохраняется
const boundGreet = obj.greet.bind(obj);
boundGreet(); // 'Hello, Alice'

Синтаксис и параметры

thisArg — объект, который будет this в функции. arg1, arg2, ... — аргументы, которые будут прибиты.

function multiply(a, b) {
  return a * b;
}

const multiplyByTwo = multiply.bind(null, 2);
multiplyByTwo(5); // 10

Зачем нужен bind?

Сохранение контекста в callback-функциях — одна из самых частых проблем в JavaScript — потеря контекста при передаче функции как callback.

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

  onClick() {
    console.log('Button clicked: ' + this.name);
  }
}

const btn = new Button('Submit');
document.addEventListener('click', btn.onClick.bind(btn));

React: обработчики событий в классовых компонентах

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this);
  }

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

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

Partial application — прибивание аргументов:

const greet = (greeting, name) => greeting + ', ' + name;
const sayHello = greet.bind(null, 'Hello');
sayHello('Alice'); // 'Hello, Alice'

bind vs call vs apply

Это три метода для управления this, но они отличаются:

const person = {
  name: 'John',
  introduce: function(greeting) {
    console.log(greeting + ', I am ' + this.name);
  }
};

const animal = { name: 'Dog' };

person.introduce.call(animal, 'Hi'); // 'Hi, I am Dog'
person.introduce.apply(animal, ['Hey']); // 'Hey, I am Dog'
const greetAsAnimal = person.introduce.bind(animal);
greetAsAnimal('Hello'); // 'Hello, I am Dog'

Важные особенности bind

1. bind возвращает новую функцию — каждый вызов bind создаёт новую функцию.

2. bind нельзя отменить — определённый контекст нельзя переписать.

3. bind работает с конструкторами

function User(name) {
  this.name = name;
}
const AdminUser = User.bind(null);
const admin = new AdminUser('John');

Современные альтернативы в React

// Class field
class Counter extends React.Component {
  handleClick = () => {
    console.log(this.state);
  };

  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

// Функциональные компоненты с hooks (рекомендуется)
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);
  return <button onClick={handleClick}>{count}</button>;
}

На собеседовании

Краткий ответ: bind() создаёт новую функцию с привязанным контекстом this. Это нужно, когда функция передаётся как callback и может потерять контекст.

Развёрнутый ответ: bind() — это один из способов управления контекстом. Он не вызывает функцию, а возвращает новую функцию. Отличается от call() и apply() тем, что те вызывают функцию сразу.