Метод bind() в JavaScript создает новую функцию с привязанным значением this и, необязательно, со связанными аргументами. Значение — это объект, к которому привязана функция, и оно определяет, на что ссылается ключевое слово внутри функции. Обычный вариант использования — установить значение функции для определенного объекта.
Большинство функций программирования немного расплывчаты, если они не сопровождаются реальными вариантами использования. Давайте рассмотрим метод JavaScript bind() вместе с несколькими быстрыми примерами, чтобы понять, насколько он практичен.
Как вы, возможно, знаете, метод bind() в JavaScript создает новую функцию с привязкой значения this и, необязательно, привязкой аргументов. Значение this — это объект, к которому привязана функция, и оно определяет, на что ссылается ключевое слово this внутри функции. Если это звучит слишком расплывчато и обобщенно, помогут несколько примеров.
Обычный вариант использования метода bind() — установить значение this функции для определенного объекта. Это может быть полезно, когда у вас есть функция, которая должна работать с определенным объектом, но вы не хотите изменять саму функцию.
Вот пример кода, чтобы было понятно:
const myPerson = {
name: 'Jiminy',
age: 29,
msg() {
console.log(`Привет, я ${this.name} и мне ${this.age} лет.`);
}
};
const otherPerson = {
name: ‘Demoine’,
age: 35
};
constboundMsg = myPerson.msg.bind(otherPerson);
// Журнал: «Привет, я Демоин, мне 35 лет».
boundMsg();
В приведенном выше примере у меня есть объект myPerson с методом msg(), который регистрируется в консоли, используя ключевое слово this для ссылки на объект. У меня также есть другой объект otherPerson со своим именем и возрастом.
Затем я создаю функциюboundMsg, вызывая метод bind() в методе msg() объекта myPerson, и передаю otherPerson в качестве значения this. Это означает, что при вызовеboundMsg() ключевое слово this внутри функции будет ссылаться на otherPerson, а не на myPerson.
Как видите, довольно здорово иметь возможность использовать bind() для создания новой функции, которая работает с другим объектом, не изменяя и не создавая копию исходной функции.
Еще один пример использования bind() — создание функции с заранее заданными аргументами. Проиллюстрировать:
function add(a, b) {
return a + b;
}
const addTen = add.bind(null, 10);
console.log (добавить десять (16)); // 26
console.log(addTen(8)); // 18
В этом примере у меня есть простая функция add(), которая принимает два аргумента и возвращает сумму. Затем я создаю новую функцию с именем addTen(), вызывая bind() в add(). Я использую null в качестве этого значения и 10 в качестве первого аргумента.
Это означает, что при вызове addTen() он всегда будет добавлять 10 к аргументу, переданному новой функции. Опять же, нет необходимости изменять исходную функцию или создавать ее копию, использование bind() делает это проще.
Вы можете попробовать оба приведенных выше примера кода в этом CodePen.
Теперь об инструментах этой недели!
Реагировать Инструменты
Bright
Серверный компонент React для добавления подсветки синтаксиса на страницы, который ничего не добавляет к размеру вашего пакета и использует все темы из VS Code.
@react-hookz/web
Библиотека универсальных хуков React, созданная с осторожностью и с учетом совместимости с SSR.
День разработчика: знакомство с новостями Retool в первом ряду
Присоединяйтесь к нашим руководителям продуктов и инженеров, чтобы впервые узнать о новинках Retool. Мы подробно рассмотрим новые функции GPT, поддержку Python и совершенно новый способ быстрого развертывания баз данных. СПОНСОР
Боковая панель React Pro
Набор компонентов React для создания высокоуровневой и настраиваемой боковой навигации.
react-ansi-animation
Компоненты React для отображения изображений ANSI. Он может отображать текстовые элементы HTML или на холсте, а также может выводить текст для приложений CLI на основе рукописного ввода.
Evolu
Библиотека React Hooks для локальных приложений(opens in a new tab) со сквозным шифрованием резервного копирования и синхронизации с использованием SQLite(opens in a new tab) и CRDT.
react-curved-input
Небольшой компонент React для превращения любого пути SVG в ползунок, который пользователь может использовать для интерактивной анимации объекта по форме пути SVG.
Flexboard
Библиотека компонентов React для изменяемых размеров боковых панелей с параметрами перетаскивания, минимальной/максимальной ширины, стиля и т. д.
relay-nextjs
Интеграция Relay Hooks для приложений Next.js, разработанных для серверного рендеринга и использующих React Suspense под капотом.
React Visual Grid
Компонент React для создания сеток изображений и макетов каменной кладки с хорошей производительностью, поддержкой различных макетов, настраиваемыми размерами эскизов и многим другим.
Conform
Библиотека проверки первой формы с прогрессивным улучшением для Remix и React Router.
На радаре выпуска:
- Jotai — управление состоянием Global React, теперь версия 2+
- visx — примитивы визуализации для React, теперь версия 3+
- Тамагуи — кроссплатформенные приложения React, теперь версия 1+.
- SWR — React-хуки для получения данных, теперь версия 2+
- React Tabs — Доступный компонент вкладок React, теперь версия 6+.
- React Cool Dimensions — хук для адаптивных компонентов версии 3+.
Инструменты тестирования и отладки
trace.cafe
Если вы загрузили профиль производительности (то есть трассировку, обычно файл JSON) из инструментов разработчика вашего браузера, вы можете подать в суд на этот инструмент, чтобы загрузить и изучите трассировку с видимой панелью производительности, как в DevTools.
Отчет WebPerformance
Это уникальная идея. Каждую неделю получайте по электронной почте персонализированный отчет о состоянии веб-сайта, производительность и веб-оптимизация которого вы хотите отслеживать, включая Core Web Vitals на базе WebPageTest.
XSSHunter
Используйте Docker и Dockery Compose для тестирования и поиска уязвимостей слепого межсайтового скриптинга.
Не просто читайте новости — делайте новости
Ищете преимущество в бизнесе? Не смотрите дальше информации. Их команда отмеченных наградами журналистов предоставляет эксклюзивную информацию о технологиях и финансах с оригинальными репортажами, крупными интервью и многим другим, чего вы больше нигде не найдете. Подпишитесь сейчас и сэкономьте 25%. СПОНСОР
precloud
Интерфейс командной строки с открытым исходным кодом, который выполняет проверки инфраструктуры как кода, чтобы выявить потенциальные проблемы развертывания перед развертыванием.
Rayst
Расширение Chrome, которое отображает боковую панель со статистикой и технологиями, связанными с любой посещаемой вами веб-страницей.
tslog
Красивый интерфейс для ведения журналов для TypeScript и JavaScript для мощных, быстрых и выразительных журналов.
swr-devtools
Инструмент разработчика для SWR, библиотеки перехватчиков React для выборки данных, с поддержкой SWR v1 или более поздней версии.
tinybench
Простая и легкая библиотека для тестирования производительности размером 7 КБ (2 КБ в минимизированном/сжатом формате), которая использует веб-API (т. е. process.hrtime или performance.now) для выполнения тестов кода в нескольких Среды выполнения JavaScript.
Углеродно-нейтральный веб-сайт
Калькулятор выбросов углерода, который учитывает энергопотребление устройства и сервера во время просмотра веб-страницы.
spall
Библиотека профилировщика и веб-интерфейс для изучения вашего кода и поиска потенциальных проблем с производительностью.
Некатегоризируемые
Node.js Toolbox
Найдите активно поддерживаемые и популярные библиотеки в экосистеме Node.js, фильтруемые по категориям.
Беспарольный
API, упрощающий ввод паролей и веб-аутентификацию. В настоящее время бесплатно, пока находится в бета-версии.
Ластик
Доска для инженерных групп, предлагающая неограниченное количество соавторов и до 5 рабочих мест в бесплатном плане.
файловый браузер
Интерфейс управления файлами на основе Go в указанном каталоге, который можно использовать для загрузки, удаления, предварительного просмотра, переименования и редактирования ваших файлов.
CronTool
Бесплатный инструмент для отладки, редактирования, изучения и просмотра выражений crontab/cron, регистрация не требуется.
Ai Tool Hunt
Доступный для поиска и разбитый по категориям каталог из более чем 1400 инструментов на основе ИИ, который поможет вам открыть для себя новейшие приложения и службы ИИ.
Lotus
Инструмент с открытым исходным кодом для оптимизации, тестирования и развертывания моделей ценообразования и упаковки на основе использования, по количеству рабочих мест или для предприятий за считанные минуты, чтобы раскрыть истинную ценность вашего SaaS-продукт.
Не спрашивайте кода
Сообщество, похожее на Stack Overflow, где вы можете задавать и отвечать на вопросы, связанные с инструментами и процессами без кода.
Не просто читайте новости — делайте новости
Ищете преимущество в бизнесе? Не смотрите дальше информации. Их команда отмеченных наградами журналистов предоставляет эксклюзивную информацию о технологиях и финансах с оригинальными репортажами, крупными интервью и многим другим, чего вы больше нигде не найдете. Подпишитесь сейчас и сэкономьте 25%. СПОНСОР
AXplorer
Частный, быстрый и безопасный веб-браузер, предназначенный для заработка, с бесплатным встроенным VPN, который включает в себя встроенный крипто-кошелек.
Игровая площадка OG Image
Площадка для экспериментов и тестирования создания изображений для социальных сетей с помощью протокола Open Graph и библиотеки Vercel og.
Fragment Mono
Моноширинная кодовая версия классического шрифта Helvetica, созданная путем изменения и расширения другого шрифта под названием Nimbus Sans.
