Применение, вызов и привязывание JavaScript объясняется размещением Cookout

1656648492 primenenie vyzov i privyazyvanie javascript obyasnyaetsya razmeshheniem cookout

Кевин Кононенко

1*FHLfdvXWAWi0HEBC83P8nw

Если вы когда-либо управляли грилем на семейном мероприятии или вечеринке, тогда вы можете понимать приложение, вызов и связывание в JavaScript.

Если вы хотите написать четкий код, который вы (или ваш товарищ по команде) сможете перечесть позже, вот одно общее правило: не повторяйтесь!

Если вы создаете повторяющиеся методы или функции, код будет труднее поддерживать в дальнейшем. Вы создадите ошибки, просто не помня обновить несколько версий одного кода.

Если вы четко понимаете концепцию это в JavaScript, вы знаете, что это может быть особенно сложно, когда вы пытаетесь отслеживать контекст выполнения. Это связь между функция и объект что это вызывается.

Чтобы написать более чистый код, вы можете использовать методы apply, call и bind целенаправленно манипулировать контекстом исполнения. Различные объекты могут использовать методы совместно, не переписывая их для каждого отдельного объекта.

Иногда вызываются Apply, Call и Bind методы функциипоскольку они вызываются вместе с функцией.

Если вы ищете более техническое объяснение, я рекомендую руководство JavaScriptIsSexy.

Как это похоже на приготовление еды?

Эти три метода сродни применению кулинарных навыков для приготовления пищи для кулинарии. Подумайте о разных контекстах, которые вам могут понадобиться приготовить:

  1. Общее блюдо, которое можно приготовить практически в любое время и порадовать всех (паста и соус)
  2. Кулинария, которая также может быть вечеринкой (бургеры, хот-доги и т.п.)
  3. Изысканный ужин только для вас и вашего партнера (рыба и вино)
  4. Приготовление десерта на пирог (торт)

Для каждого из них требуется разный набор техник приготовления. Некоторые уникальны для отдельного контекста, в то время как другие более обобщены. Я объясню больше минуты.

В этом случае каждый кулинарный контекст похож на объект. К примеру, если вы говорите, что собираетесь готовить еду на гриле, это значит, что у вас есть некоторые навыки… например, работать с грилем!

Итак, если у нас есть отдельный метод для каждой техники приготовления пищи, которую вы можете использовать, для каждого объекта будут некоторые уникальные методы и некоторые случаи, когда метод применим к нескольким объектам.

0*7trEAvHGVHWAL1UH

В вышеприведенном коде кипячение воды является обобщенным навыком, который, вероятно, можно применить в любом контексте.

Воспользуемся примером. Гриль() метод находится в контексте кулинарии объект. Это означает, что если вы готовите блюда на гриле, вы ожидаете, что вам понадобятся навыки гриля.

Но подожди. Вы не забудете, как пользоваться грилем, когда приготовление закончится! Предположим, что вы, ваш партнер, хотите приготовить стейк на изысканный ужин, например объект fancyDinner. Вы все еще хотите иметь возможность перенять этот метод grill() из объекта cookout. Вот где используются, вызывают и привязывают.

Эта связь между кулинарными навыками (методами) и кулинарными контекстами (объектами) будет основным способом, которым я покажу, как использовать apply, call и bind().

Чтобы понять этот учебник, вам нужно понять это в JavaScript. Просмотрите мое руководство по JavaScript это если вам нужно это просмотреть.

Введение в метод привязки

Представим, что вы устраиваете кулинарию на 10-й день рождения своего сына или дочери. Вы хотите приготовить на мангале три вида мяса, чтобы все удовлетворили: курицу, бургеры и стейк. По всей видимости, на этой вечеринке они все мясоеды.

Однако вы не представляете, чего хочет каждый отдельный человек! Вам нужно будет спросить каждого участника, когда он придет на вечеринку. Каждый тип мяса обычно требует одних и тех же шагов:

  1. Добавить приправы
  2. Поставьте на решетку
  3. Снимите с гриля через некоторое время

Потому нет смысла писать отдельный метод для каждого вида мяса. Единственное, что варьируется, так это время приготовления. На гамбургеры нужно 15 минут, на курицу – 20 минут, на стейк – 10 минут.

Мы хотим использовать тот же общий процесс для всех этих видов мяса. Детали будут разными.

Вы можете подумать: «О, это прекрасное время для заката!» Но это немного сложнее. Как мы уже сказали выше, мы стараемся использовать концепцию контекст выполнения показать наши кулинарные способности. Вам бы не хотелось готовить бургеры, курицу и бифштекс впервые для вечеринки. Итак, мы должны представить навыки, которые вы получили в течение многих лет кулинарии, и то, как вы будете применять их в этом конкретном сценарии.

0*MKGALKHF_hr9Equr

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

  1. Ссылка на кулинария объект, чтобы убедиться, что мы используем правильный объект
  2. Количество минут приготовления

Это отражает наши имеющиеся знания о том, как готовить разные виды мяса. В любом случае, мы сохраняем объект и количество минут, чтобы мы могли быстро обрабатывать заявки от всех участников вечеринки.

Каждая переменная – cookBurger, cookChicken и cookSteak – это новая функция, которую можно выполнить в любое время с помощью еще одного аргумента: имени человека. Итак, вот три человека и их запросы на еду:

  1. Джек хочет бургер
  2. Джилл хочет стейк
  3. Дэвид хочет курицу

Используя наши новые функции мы можем быстро принимать эти запросы, не переписывая метод grill. Каждый из приведенных ниже примеров принимает последний аргумент, необходимый для выполнения функции в контексте объекта Cookout.

0*v7q9FTcaIthuVPqT

Представьте, если вы не смогли использовать здесь метод связывания! Это было бы похоже на то, что вы впервые готовите бургеры, курицу и стейк, когда начинается вечеринка. Вы бы передали три аргумента общему методу grill() без предварительного планирования.

Вместо этого мы используем применение частичной функции показать, что мы знаем, как приготовить каждый вид мяса. Нам просто нужно услышать, что хочет есть отдельный гость. Это распределение отображает ваш фактический опыт приготовления пищи.

Введение в метод вызова

Вот другой сценарий. Скажем, когда вы с партнером готовите изысканный ужин, вы обычно любите готовить какую-нибудь рыбу и вино. Как видно из первого фрагмента кода, вы обычно любите готовить рыбу в духовке.

Но однажды вечером вы решили приготовить стейк. Вам, по-видимому, придется использовать гриль, чтобы приготовить этот стейк.

0*iXscRKRPeC-xTKBj

Вот проблема: ваш гриль() метод находится в контексте кулинарии объект! Но теперь вы хотите использовать эти кулинарные навыки в объекте fancyDinner. Помните, вы не хотите переписывать метод гриля это усложнит поддержку вашего кода.

Вместо этого вы можете использовать метод call() JavaScript для вызова метода grill в контексте fancyDinner объект. Используя этот новый контекст вам не нужно будет его переписывать. Вот полный код, прежде чем мы перейдем к деталям.

0*RF3pUlTfHzWhEA_X

Таким образом, наш напиток по умолчанию для приготовления пищи – это газировка, а напиток по умолчанию для изысканных обедов – вино. Теперь нам просто нужно добавить необычную часть как аргумент в методе call() – «стейк». Вот разница между обычным использованием метода и использованием call().

0*oebh09RPKpZeIJB-

Первый пример должен быть достаточно прост: все это в контексте объекта приготовления. Но во втором примере первый аргумент изменил контекст это к fancyDinner объект!

Когда вы дойдете до оператора console.log в методе grill(), вы увидите, что он ссылается на один аргумент, еда, так хорошо как this.drink.

Когда вы используете fancyDinner в качестве первого аргумента метода вызова, это устанавливает контекст для объекта fancyDinner. Теперь вы можете использовать эти навыки гриля в другом контексте.

Введение в метод Apply

Метод apply() очень похож на call(), за исключением одного важного отличия. Он может принимать массив аргументов вместо объявления отдельных параметров. Это означает, что вы можете создать a переменная функция — есть функция с любым количеством аргументов. По этой причине он может принимать всего два параметра: контекст и массив аргументов.

Вернемся к нашему оригинальному примеру празднования дня рождения. Вы устраиваете кулинарию на 10-летие своего сына или дочери. 12 детей ответили и сказали, что идут, но вы не знаете, сколько на самом деле появится. Итак, вы должны быть готовы жарить на гриле для неизвестного количества людей.

Однако в отличие от bind(), функции, вызываемые с помощью apply(), будут вызваны немедленно.

Итак, нам нужно создать функцию, которая может обрабатывать массив неизвестного количества заказов блюд и возвращать полный список пищи, которую вам нужно будет поставить на гриль. Мы можем сохранить организационную структуру массива, помогающую указать нам порядок поступления запросов.

Здесь есть несколько важных вещей. Прежде всего, учтите, что метод гриля не имеет никаких параметров. Это иначе, чем в прошлом! Чтобы решить эту проблему, мы используем объект arguments в строке 4. Объект arguments JavaScript дает нам объект, похожий на массив, полный аргументов функции.

Чтобы превратить его в реальный массив, мы должны использовать метод slice() из прототипа массива. Это еще одно удобное применение метода call(), поскольку метод slice() не является родным для объектов.

Наконец мы должны вызвать функцию с помощью apply(), чтобы получить доступ к массиву в свойстве mealOrders. Вот как это сделать.

0*5IRJN6HVTnIPtWYU

Мы все еще должны использовать кулинария как первый аргумент, поскольку так же, как call(), мы должны объявить контекст исполнения. Затем мы можем ввести массив из свойства mealOrders.

Это позволяет использовать неопределенное количество элементов в методе grill(), поскольку мы можем передать массив как второй аргумент.

Получите новейшие пособия

Вам понравился этот урок? Похлопайте по нему, чтобы другие тоже могли его найти. Или зарегистрируйтесь, чтобы получить мои последние визуализированные пособия из блога CodeAnalogies здесь:

Добавить комментарий

Ваш адрес email не будет опубликован.