function.prototype.bind és function.prototype.length a JavaScript-ben magyarázva

Funkciókötés

bindegy módszer a JavaScript összes funkciójának prototípusán. Lehetővé teszi egy új függvény létrehozását egy meglévő függvényből, az új függvény thiskontextusának megváltoztatását , és minden olyan argumentum megadását, amellyel az új függvényt meg akarja hívni. A megadott argumentumok bindmegelőzik azokat az argumentumokat, amelyeket az új függvény továbbít, amikor meghívják.

A funkció bindmegváltoztatásathis

Az első argumentum bindaz a thiskontextus, amelyhez a függvény kapcsolódni fog. Ha nem akarja megváltoztatni a thispass értékét nullelső argumentumként.

Feladata a kód megírása, hogy frissítse a résztvevők számát, amikor megérkeznek egy konferenciára. Létrehoz egy egyszerű weboldalt, amelynek van egy gombja, amelyre kattintva növeli a numOfAttendeestulajdonságot a konfrenciaobjektumon. A jQuery segítségével kattintáskezelőt adhat a gombjához, de a gombra kattintás után a confrence objektum nem változott. A kódja ilyesminek tűnhet.

var nodevember = { numOfAttendees: 0, incrementNumOfAttendees: function() { this.numOfAttendees++; } // other properties }; $('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);

Ez a jQuery és a JavaScript használatakor gyakori probléma. Ha rákattint a gombra, a thisjQuery onmetódusához továbbított módszer kulcsszava a gombra hivatkozik, és nem a konferencia objektumra. A thisprobléma megoldásához lekötheti módszerének kontextusát.

var nodevember = { numOfAttendees: 0, incrementNumOfAttendees: function() { this.numOfAttendees++; } // other properties }; $('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));

Most, amikor a gombra kattint, thisaz nodevemberobjektumra hivatkozik .

Argumentumok megadása egy függvény számára a bind

Minden argumentum, bindamelyet az első után adunk át, megelőzi a függvény meghívásakor átadott argumentumokat. Ez lehetővé teszi argumentumok előre alkalmazását egy függvényre. Az alábbi példában combineStringskét húrt vesz fel, és összefűzi őket. bindezután olyan funkció létrehozására használják, amely mindig a „Cool” -t adja meg első karakterláncként.

function combineStrings(str1, str2) { return str1 + " " + str2 } var makeCool = combineStrings.bind(null, "Cool"); makeCool("trick"); // "Cool trick"

Az erre a hivatkozásra vonatkozó útmutató további információkat tartalmaz arról, hogy mik thisváltozhatnak a kulcsszó hivatkozások.

A bindmódszerről további részletek a Mozilla MDN dokumentumaiban találhatók.

Funkció hossza

A lengthfüggvényobjektumban található tulajdonság megtartja a függvény által várt argumentumok számát, amikor meghívják.

function noArgs() { } function oneArg(a) { } console.log(noArgs.length); // 0 console.log(oneArg.length); // 1

ES2015 szintaxis

Az ES2015 vagy az ES6, ahogy általában nevezik, bevezette a többi operátort és az alapértelmezett funkció paramétereket. Mindkét kiegészítés megváltoztatja a lengthtulajdonság működését.

Ha a többi operátort vagy az alapértelmezett paramétereket használjuk egy függvény deklarációban, akkor a lengthtulajdonság csak a többi operátor előtti argumentumok számát vagy egy alapértelmezett paramétert tartalmaz.

function withRest(...args) { } function withArgsAndRest(a, b, ...args) { } function withDefaults(a, b = 'I am the default') { } console.log(withRest.length); // 0 console.log(withArgsAndRest.length); // 2 console.log(withDefaults.length); // 1

További információ a Function.lengthMozilla MDN Docs oldalán található.