Як користуватися методами apply (?), Call (?) Та bind (➰) у JavaScript

У цій статті ми поговоримо про методи застосування, виклику та прив’язки ланцюжка прототипів функції. Вони є одними з найважливіших і часто використовуваних понять у JavaScript і дуже тісно пов’язані з цим ключовим словом.

Отже, щоб зрозуміти інформацію в цій статті, спочатку потрібно ознайомитись із поняттям та використанням цього ключового слова. Якщо ви вже знайомі з цим, можете продовжувати - інакше, ви можете переглянути цю статтю тут, а потім повернутися сюди.

Щоб дізнатись про apply | call | bind, нам також потрібно знати про функції в JavaScript, якщо ви знаєте це .

Функції

Конструктор Function створює новий об'єкт Function. Викликаючи конструктор безпосередньо, можна динамічно створювати функції, які можна виконувати в глобальній області.

Оскільки функції є об’єктами в JavaScript, їх виклик контролюється методами apply, call і bind .

Щоб перевірити, чи є функція об’єктом Функції, ми можемо використовувати код у наступному фрагменті, який повертає true.

Об'єкт глобальної функції не має власних методів або властивостей. Однак, оскільки це сама функція, вона наслідує деякі методи та властивості через ланцюжок прототипів від Function.prototype. - MDN

Нижче наведені методи в ланцюжку прототипів функцій:

  • Function.prototype.apply ()
  • Function.prototype.bind ()
  • Function.prototype.call ()
  • Function.prototype.isGenerator ()
  • Function.prototype.toSource ()
  • Object.prototype.toSource
  • Function.prototype.toString ()
  • Object.prototype.toString

Ми стурбовані першими трьома, тож давайте почнемо.

Подати заявку?

Метод apply () є важливим методом прототипу функції і використовується для виклику інших функцій із зазначеним значенням цього ключового слова та аргументами, що надаються у вигляді масиву або подібного до масиву об'єкта.

Масивоподібні об'єкти можуть посилатися на NodeList або об'єкт аргументів усередині функції.

Це означає, що ми можемо викликати будь-яку функцію і чітко вказати, на що це повинно посилатися у викличній функції.

Синтаксис

Повернення

Він повертає результат функції, яка викликається цим.

Опис

Метод apply використовується, щоб дозволити викликати функцію / об'єкт, що належить об'єкту x, і призначити його об'єкту y.

Приклади

1.

Як видно з даного фрагмента, ми бачимо, що коли ми просуваємо масив всередину іншого, весь масив обробляється як один елемент і просувається всередину змінної масиву.

Але що, якщо ми хочемо, щоб елементи, а не масив, були висунуті окремо? Звичайно, існує буквально n декількох способів це зробити, але, коли ми навчаємось застосовувати, давайте використаємо його:

У наведеному прикладі ми бачимо використання apply у поєднанні двох заданих масивів. Масив аргументів - це масив елементів, і цей аргумент вказує на змінну масиву. Елементи масиву елементів надсилаються до об'єкта ( масиву ), для якого це євказуючи . Результат ми отримуємо як окремі елементи другого масиву, що пересуваються до масиву, на який вказується this .

2.

Функція max у JS використовується для пошуку елемента з максимальним значенням із заданого пулу елементів. Але, як ми бачимо з фрагмента, якщо значення мають форму масиву, ми отримуємо результат як NaN. Звичайно, ми говоримо про JavaScript, тому знову ж таки існує багато способів зробити це, але давайте використаємо apply.

Тепер, коли ми використовуємо apply і використовуємо функцію Math.max (), ми отримуємо результат. Як ми знаємо, apply застосовуватиме всі значення всередині масиву як окремі аргументи, а потім до них буде застосовано функцію max. Це дасть нам максимальне значення в масиві.

Цікаво сказати тут те, що замість цього ми використали null. Оскільки аргументом є масив чисел, навіть якщо це буде введено, він буде вказувати на той самий масив, і ми отримаємо той самий результат. Тому в таких випадках ми можемо використовувати null замість цього. Це показує нам, що цей аргумент у функції apply є необов’язковим аргументом.

Телефонуйте

Метод call () використовується для виклику функції із заданим this та аргументами, що надаються їй окремо.

Це означає, що ми можемо викликати будь-яку функцію, чітко вказавши посилання, на яке це повинно посилатися у викличній функції.

Це дуже схоже на застосування, єдина різниця полягає в тому, що застосовується аргументи у вигляді масиву або схожих на масив об’єктів, і тут аргументи подаються окремо.

Синтаксис

Повернення

Результат виклику функції із зазначеним thisзначенням та аргументами.

Опис

Метод виклику використовується, щоб дозволити викликати функцію / об'єкт, що належить об'єкту x, і призначити його об'єкту y.

Приклади

1.

Це приклад ланцюжка конструкторів. Як бачимо, у кожній функції викликається конструктор Product, а за допомогою call властивості об'єкта Product прив'язуються до об'єктів Pizza та Toy, відповідно.

Коли створюються нові екземпляри об’єктів Піца та Іграшки, параметри надаються як назва, ціна та категорія. Категорія застосовується лише у визначенні, але назва та ціна застосовуються за допомогою ланцюгового конструктора об'єкта Product, оскільки вони визначаються та застосовуються в об'єкті Product. За допомогою трохи більше налаштувань ми можемо досягти спадщини.

2.

У наведеному вище фрагменті ми визначили функцію, яка називається sleep. Він складається з відповіді масиву, який складається з елементів, які звертаються до властивостей за допомогою цього ключового слова. Вони визначаються в окремому об’єкті поза функцією.

Функція sleep викликається з об'єктом obj як аргументом. Як ми бачимо, властивості obj встановлюються відповідно у this.animal та this.sleepDuration , і ми отримуємо повне речення як вихід.

Зв’язати➰

Метод bind () створює нову функцію, для якої при виклику thisключове слово має встановлене значення з заданою послідовністю аргументів, що передує будь-якому, що надається при виклику нової функції. - MDN

Синтаксис

Повернення

Bind повертає копію функції з наданими цим аргументом та аргументом.

Опис

Функція прив'язки схожа на функцію виклику , з основною відмінністю в тому, що прив'язка повертає нову функцію, тоді як виклик - ні.

Відповідно до специфікацій ECMAScript 5, функція, що повертається bind, є особливим типом екзотичного об'єкта функції (як вони його називають), який називається Bound function (BF) . BF обертає початковий об'єкт функції. Виклик BF запускає в ній обгорнуту функцію.

Приклади

1.

У наведеному вище фрагменті ми визначили змінну x та об’єкт, який називається модулем. Він також містить властивість під назвою x та іншу властивість, відповідне значення якої є функцією, яка повертає значення x .

Коли функція getX викликається, вона повертає значення x, яке визначено всередині об'єкта, а не x у глобальній області.

Інша змінна оголошена в глобальній області, яка викликає функцію getX з об'єкта модуля . Але оскільки змінна знаходиться в глобальному масштабі, це в getX вказує на глобальний x і, отже, повертається 9.

Визначено іншу змінну, яка викликає попередню функцію, але на цей раз зв’язує згадану функцію з об’єктом модуля . Це прив'язка повертає значення x всередині об'єкта. Через прив'язку функція this у функції вказує на значення x в об'єкті, а не на глобальний x . Звідси ми отримуємо 81 як результат

Висновок

Тепер, коли ми вивчили основи методів, ви все ще можете трохи розгубитися, чому 3 різні функції виконують майже одне і те ж. Щоб пояснити цю концепцію, вам доведеться потренуватися в різних ситуаціях та сценаріях, щоб ви могли детальніше дізнатися, де і як їх можна використовувати. Вони напевно зроблять ваш код чистішим та потужнішим.

Якщо вам сподобалась ця стаття, поплескайте? і слідувати? для більш.