Понимание методов call (), apply () и bind () в JavaScript.

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

Взято из очень популярной библиотеки Лодаш.

Посмотрите на инструкцию в строке 21: return func.apply (this, args.reverse ())

В этой статье мы рассмотрим методы JavaScript call (), apply () и bind (). В основном эти 3 метода используются для управления вызовом функции. call () и apply () были введены в ECMAScript 3, тогда как bind () был добавлен как часть ECMAScript 5.

Давайте начнем с примера, чтобы понять это.

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

calcArea.area(4); // prints 50.24

Вы проверяете это и проверяете результат, он работает нормально, и вы загружаете библиотеку на портал до истечения крайнего срока. Затем вы просите своих одноклассников протестировать и проверить, вы узнаете, что ваш результат и их результаты не соответствуют точности десятичных знаков. Вы проверяете правила задания, о нет! Профессор попросил вас использовать константу пи с точностью до 5 десятичных знаков. Но вы использовали 3,14, а не 3,14159 в качестве значения числа "пи". Теперь вы не можете повторно загрузить библиотеку, так как срок сдачи уже истек. В этой ситуации вас спасет функция call ().

Использование call () или Function.prototype.call ()

calcArea.area.call({pi: 3.14159}, 4)

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

50.26544

Разберем то, что здесь происходит. Если вы заметили call (), он принимает два аргумента

  • Контекст (объект)
  • Аргументы

Контекст - это объект, который заменяет ключевое слово this в функции области. Затем аргументы передаются как аргументы функции.

Вызов вызова

cylinder.volume.call({pi: 3.14159}, 2, 4);
// 50.26544

Использование apply () или Function.prototype.apply ()

Применить точно так же, за исключением того, что аргументы функции передаются как массив или вы можете использовать объект массива (новый массив (2, 4) ).

cylinder.volume.apply({pi: 3.14159}, [2, 4]);
// 50.26544

Использование bind () или Function.prototype.bind ()

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

Резюме

  • Все три функции имеют одно сходство, их первым аргументом всегда является значение или контекст ‘this’, который вы хотите передать функции, для которой вызываете метод.
  • call () и apply () вызываются немедленно, bind () возвращает связанную функцию, с контекстом, который будет вызван позже.
  • call () и apply () похожи, с той лишь разницей, что аргументы в apply () передается как массив.

Подробнее о MDN call (), apply () и bind ()

Сообщите в комментариях, использовали ли вы эти методы в своих проектах.

- Аникет Кудале