Как да използвам методите apply (?), Call (?) И bind (➰) в JavaScript

В тази статия ще говорим за методите за прилагане, извикване и свързване на веригата прототип на функцията. Те са едни от най-важните и често използвани понятия в JavaScript и са много тясно свързани с тази ключова дума.

Така че, за да разберете информацията в тази статия, първо трябва да сте запознати с концепцията и използването на тази ключова дума. Ако вече сте запознати с него, можете да продължите - в противен случай можете да препратите тази статия тук и след това да се върнете тук.

За да научим за apply | call | bind , трябва да знаем и за функциите в JavaScript, ако приемем, че сте запознати с това .

Функции

Конструкторът на функция създава нов обект на функция. Директното извикване на конструктора може да създава динамично функции, които могат да бъдат изпълнени в глобалния обхват.

Тъй като функциите са обекти в 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 есочещ . Ние получите резултат като отделни елементи на втория масива изтласкани към масива, на които This е остър.

2.

Функцията max в JS се използва за намиране на елемента с максималната стойност от даден пул от елементи. Но както можем да видим от фрагмента, ако стойностите са под формата на масив, получаваме резултата като NaN. Със сигурност говорим за JavaScript, така че отново има много начини да направите това, но нека използваме apply.

Сега, когато използваме apply и използваме функцията Math.max (), получаваме резултата. Както знаем, apply ще вземе всички стойности в масива като отделни аргументи и след това към тях ще бъде приложена функцията max. Това ще ни даде максималната стойност в масива.

Интересно нещо, което трябва да отбележим тук, е, че вместо това използвахме null. Тъй като предоставеният аргумент е числовият масив, дори ако това е въведено, той ще сочи към същия масив и ще получим същия резултат. Следователно, в такива случаи можем да използваме null вместо това. Това ни показва, че аргументът this във функцията apply е незадължителен аргумент.

Обади се

Методът call () се използва за извикване на функция с дадено това и аргументи, предоставени й индивидуално.

Това означава, че можем да извикаме всяка функция, като изрично посочваме препратката, която тя трябва да препраща в извикващата функция.

Това е много подобно на прилагането, като единствената разлика е, че се прилагат аргументи под формата на масив или подобни на масив обекти и тук аргументите се предоставят индивидуално.

Синтаксис

Връщане

Резултатът от извикването на функцията с посочената thisстойност и аргументи.

Описание

Методът на повикване се използва за позволяване на функция / обект, принадлежащ на обект x, да бъде извикана и присвоена на обект y.

Примери

1.

Това е пример за конструкторска верига. Както можем да видим, във всяка функция се извиква конструкторът на продукта и чрез call свойствата на обекта Product се оковават съответно с обектите Pizza и Toy.

Когато се създават нови копия на обектите Pizza and Toy, параметрите се предоставят като име, цена и категория. Категорията се прилага само в дефиницията, но името и цената се прилагат с помощта на верижния конструктор на обекта Product, тъй като те са дефинирани и приложени в обекта Product. С малко повече ощипване можем да постигнем наследство.

2.

В горния фрагмент дефинирахме функция, наречена сън. Състои се от отговор на масив, който се състои от елементи, които адресират свойства, използващи тази ключова дума. Те се дефинират в отделен обект извън функцията.

Функцията 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 вътре в обекта. Поради обвързването, това във функцията сочи към стойността на x в обекта, а не към глобалния x . Следователно получаваме 81 като изход

Заключение

Сега, след като научихме основите на методите, може би все още сте малко объркани защо има 3 различни функции, които правят почти едно и също нещо. За да изясните тази концепция, трябва да практикувате различни ситуации и сценарии, за да можете да научите по-задълбочено къде и как могат да се използват. Те със сигурност ще направят вашия код по-чист и по-мощен.

Ако харесате тази статия, моля, пляскайте? и следват? за още.