Автор оригинала: FreeCodeCamp Community Member.
Кевин Кононенко
Если вы когда-либо отвечали за управление грилем на семейном мероприятии или Party, вы можете понять применить, звонить и привязать в JavaScript.
Если вы хотите написать четкий код, который вы (или товарищ по команде) можете повторно прочитать позже, вот одно общее правило: не повторяйте себя!
Если вы создаете повторяющиеся методы или функции, ваш код будет сложнее для передачи вперед. Вы создадите ошибки, просто не забывали обновлять несколько версий одного и того же кода.
Если у вас есть твердое понимание Концепция Это в JavaScript , вы знаете, что это может быть особенно сложно, когда вы пытаетесь отслеживать Контекст выполнения . Это отношения между Функция и объект что это называется.
Для того, чтобы написать Cleaner Code, вы можете использовать Применить, позвонить и связывать методы Целенаправленно манипулировать контекстом выполнения. Различные объекты могут делиться методами, не переписывая их для каждого отдельного объекта.
Подать заявку, вызов и связывание иногда называют Функциональные методы , так как они называются наряду с функцией.
Если вы ищете более техническое объяснение, я рекомендую руководство от JavaScriptissexy Отказ
Как Это как готовить, именно?
Эти три метода видны как навыки приготовления приготовления для приготовления пищи для приготовления. Подумайте о различных контекстах, которые вам могут понадобиться приготовить:
- Общая еда, которую вы можете готовить в значительной степени в любое время и сделать всех счастливыми (пасты и соус)
- Cookout, который также может быть вечеринкой (гамбургерами, горячие собаки и т. Д.)
- Необычный ужин только для вас и вашего партнера (рыба и вино)
- Десерт для мероприятия Potluck (торт)
Каждый из них требует другой набор методов приготовления пищи. Некоторые уникальны для индивидуального контекста, в то время как другие более обобщены. Я объясню больше через минуту.
В этом случае каждый контекст приготовления доставляется как объект. Если вы говорите, что вы будете готовить на гриле, например, что подразумевает, что у вас есть несколько навыков … Как эксплуатация гриль!
Таким образом, если у нас есть индивидуальный метод для каждой из методов приготовления приготовления, которые вы можете использовать, будут некоторые уникальные методы для каждого объекта, а некоторые случаи, когда метод может быть применен к нескольким объектам.
В указанном выше коде кипячение воды является обобщенным навыком, которые, вероятно, могут применяться в любом контексте.
Давайте будем использовать пример. Гриль () Метод в пределах контекста cookout объект . Это означает, что если вы держите Cookout, вы ожидаете, что вам нужно будет вызвать эти навыки гриля.
Но ждать. Вы не забываете, как использовать гриль, когда Cookout заканчивается! Допустим, вы ваш партнер хочешь приготовить стейк для модного ужина, как объект FancyDinner. Вы все еще хотите иметь возможность одолжить этот метод Grill () от объекта Cookout. Вот где применить, звонить, и связываться.
Эта связь между навыками приготовления (методами) и контекстами приготовления (объектами) будет основным способом, которым я показываю, как использовать Apply, Call и Bind ().
Чтобы понять этот учебник, вам нужно понять Это в JavaScript. Проверьте мой Учебник на JavaScript’s это Если вам нужно просмотреть это.
Введение в метод связывания
Давайте представим, что вы держите кулинарную вашу вечеринку на день рождения вашего сына или дочери. Вы хотите приготовить три типа мяса на гриле, чтобы удовлетворить всех: курицу, гамбургеры и стейк. Они, видимо, все пожиратели мяса на этой вечеринке.
Тем не менее, вы понятия не имеете, что хочет каждый отдельный человек! Таким образом, вам нужно будет задать каждому участнику, когда они прибудут на вечеринку. Каждый тип мяса обычно требует одинаковых шагов:
- Добавить приправа
- Поставить его на гриль
- Удалить с гриля после определенного количества времени
Таким образом, нет смысла написать отдельный метод для каждого типа мяса. Единственное, что варьируется, – это время приготовления. Бургеры занимают 15 минут, курица занимает 20 минут, а стейк занимает 10 минут.
Мы хотим использовать тот же общий процесс для всех этих типов мяса. Детали будут варьироваться.
Вы можете подумать: «О, это прекрасное время для функции!» Но это немного сложнее, чем это. Как мы сказали выше, мы пытаемся использовать концепцию Контекст выполнения показать наши навыки приготовления. Вы впервые готовили бургеры, курицу и стейк для всей вечеринки. Итак, мы должны представлять навыки, которые вы получили годы кулинарии, и как вы будете применять их к этому одному конкретному сценарию.
В этом случае наш метод Grill просто регистрирует предложение о том, когда еда человека будет готова. Мы собираемся использовать Bind (), чтобы сохранить Контекст выполнения Отказ Чтобы быть понятным, контекст выполнения будет иметь две важные детали.
- Ссылка на Cookout объект, чтобы убедиться, что мы используем правильный объект
- Количество минут приготовления пищи
Это представляет наши существующие знания о том, как приготовить различные виды мяса. В каждом случае мы храним объект и количество минут, поэтому мы можем быстро обрабатывать запросы от всех участников партии.
Каждая переменная – Cookburger, Cookchicken и Cooksteak – это новая функция, которая может быть выполнена в любое время с еще одним аргументом: имя человека. Так вот три человека и их пищевые запросы:
- Джек хочет бургер
- Джилл хочет стейк
- Дэвид хочет курица
Используя наши новые функции, мы можем быстро принять эти запросы без переписывания метода Grill. Каждый из приведенных ниже примеров требуется окончательный аргумент, необходимый для выполнения функции в контексте объекта Cookout.
Представьте, что если вы не смогли использовать метод Bind здесь! Это было бы вроде, как вы впервые готовили гамбургеры, курицу и стейк, когда вечеринка началась. Вы будете кормить тремя аргументами до метода General Grill () без предыдущего планирования.
Вместо этого мы используем Применение частичной функции Чтобы показать, что мы знаем, как приготовить каждый тип мяса. Нам просто нужно услышать, что каждый отдельный гость хочет поесть. Этот раздел представляет ваш фактический опыт приготовления пищи.
Введение в метод вызова
Вот еще один сценарий. Допустим, когда вы и ваш партнер приготовьте модный ужин, вы обычно хотели бы сделать какую-то рыбу и вино. Как вы можете видеть из первого фрагмента кода, вы обычно любите готовить рыбу в духовке.
Но вы решили, что однажды ночью вы хотели бы сделать стейк вместо этого. Вам нужно будет использовать гриль, чтобы сделать этот стейк, очевидно.
Вот проблема: ваш гриль () Метод в пределах контекста cookout объект Действительно Но теперь вы хотите использовать эти навыки приготовления в объекте FancyDinner. Помните, Вы не хотите переписать метод Grill – Это сделает ваш код сложнее для обслуживания.
Вместо этого вы можете использовать метод JavaScript Call () для вызова метода Grill в контексте модный ужин объект. Используя этот новый контекст, вам не нужно будет переписать его. Вот полный код, прежде чем мы попадем в детали.
Итак, наш напиток по умолчанию для Cookouts – сода, а напиток по умолчанию для модных ужинов – это вино. Теперь нам просто нужно добавить необычную часть как аргумент В методе вызова () – «Стейк». Вот разница между использованием метода нормально и с использованием вызова ().
Первый пример должен быть довольно простым: это все в контексте объекта cookout. Но во втором примере первый аргумент изменил контекст Это к FancyDinner объект!
Когда вы попадаете в оператор Console.log в методе Grill (), вы можете увидеть, что он ссылается на один аргумент, еда, а также Это.
При использовании FanceDinner в качестве первого аргумента метода вызова, которые устанавливают контекст на объект FancyDinner. Теперь вы можете использовать эти навыки на гриле в другом контексте.
Введение в метод применения
Метод Apply () очень похож на Call (), за исключением одной важной разницы. Он может принять массив аргументов вместо того, чтобы объявлять отдельных параметров. Это означает, что вы можете создать Вариадическая функция – То есть функция с любым количеством аргументов. По этой причине он может принимать два параметра только: контекст и массив аргументов.
Вернемся в наш оригинальный пример дня рождения. Вы держите кулинарную вашу вечеринку на день рождения своего сына или дочери. 12 детей ответили и сказали, что идут, но вы не знаете, сколько на самом деле появится. Итак, вы должны быть готовы к решению на гриле для неизвестного количества людей.
Однако в отличие от Bind (), функции, которые называются применить (), будут немедленно вызваться немедленно.
Итак, нам нужно создать функцию, которая может обрабатывать массив неизвестного количества заказы на питание и вернуть полный список продуктов питания, которые вам нужно будет поставить на гриль. Мы можем сохранить организационную структуру массива, которая помогает нам постановить, что запросы вошли.
Здесь есть пара важных вещей. Прежде всего, обратите внимание, что метод Grill не имеет никаких параметров. Это отличается от, чем в прошлом! Чтобы разрешить это, мы используем объект аргументов в строке 4. Аргументы объекта в JavaScript Дает нам массивный предмет, полный аргументов функции.
Чтобы преобразовать его в реальный массив, мы должны использовать метод Slice () из прототипа массива. Это еще одно удобное применение метода вызова (), поскольку метод Slice () не является родным для объектов.
Наконец, мы должны вызывать функцию, используя Apply (), чтобы получить доступ к массиву в свойстве «Автотермир». Вот как это сделать.
Мы все еще должны использовать Cookout Как первый аргумент, потому что просто позгут (), мы должны объявить контекст выполнения. Затем мы можем кормить в массиве из недвижимости для ашертерцев.
Это позволяет нам использовать неопределенное количество элементов в методе Grill (), поскольку мы можем пройти в массиве в качестве второго аргумента.
Получить последние учебники
Вам понравилось это руководство? Дайте ему хлопок, чтобы другие тоже могли его найти. Или зарегистрируйтесь, чтобы получить мои последние визуализированные учебники из Блог CodeAnalogies здесь:
Оригинал: “https://www.freecodecamp.org/news/javascripts-apply-call-and-bind-explained-by-hosting-a-cookout-84b85977ee11/”