Bind Function Context

Beginner

This tutorial is from open-source community. Access the source code

Введение

В этом практическом занятии мы изучим, как создать функцию, которая связывает заданный контекст с другой функцией. Функция bind() позволяет легко установить значение this внутри функции для определенного объекта, что может быть полезно в некоторых сценариях. Мы также узнаем, как использовать оператор расширения для передачи дополнительных аргументов в связанную функцию.

Создание функции с заданным контекстом

Для создания функции с заданным контекстом используйте функцию bind. Сначала откройте Терминал/SSH и введите node.

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

Для использования bind передайте исходную функцию (fn) и желаемый контекст (context). Вы также можете передать любые дополнительные параметры, которые должны быть связаны с функцией (...boundArgs).

Функция bind возвращает новую функцию, которая использует Function.prototype.apply() для применения заданного context к fn. Она также использует оператор расширения (...), чтобы добавить любые дополнительно переданные параметры к аргументам.

Вот пример использования bind:

const bind =
  (fn, context, ...boundArgs) =>
  (...args) =>
    fn.apply(context, [...boundArgs, ...args]);

function greet(greeting, punctuation) {
  return greeting + " " + this.user + punctuation;
}

const freddy = { user: "fred" };
const freddyBound = bind(greet, freddy);
console.log(freddyBound("hi", "!")); // 'hi fred!'

В этом примере мы определяем функцию greet, которая принимает два параметра (greeting и punctuation) и возвращает строку, которая объединяет greeting, свойство user текущего контекста (this) и punctuation.

Затем мы создаем новый объект (freddy), у которого свойство user установлено на 'fred'.

Наконец, мы создаем новую функцию (freddyBound) с использованием bind, передав в нее функцию greet и объект freddy в качестве желаемого контекста. Затем мы можем вызвать freddyBound с двумя дополнительными параметрами ('hi' и '!'), которые передаются в исходную функцию greet вместе с связанным контекстом freddy. Результат вывода: 'hi fred!'.

Резюме

Поздравляем! Вы завершили практическое занятие по связыванию контекста функции. Вы можете выполнить больше практических занятий в LabEx, чтобы улучшить свои навыки.