function.prototype.bind og function.prototype.length i JavaScript forklaret

Funktion Bind

binder en metode til prototypen for alle funktioner i JavaScript. Det giver dig mulighed for at oprette en ny funktion fra en eksisterende funktion, ændre den nye funktions thiskontekst og give de argumenter, du vil have den nye funktion til. De argumenter, der leveres til, bindkommer foran alle argumenter, der overføres til den nye funktion, når den kaldes.

Brug bindtil at ændre thisi en funktion

Det første argument, der gives til, binder den thiskontekst, som funktionen vil være bundet til. Hvis du ikke vil ændre værdien af thispasset nullsom det første argument.

Du har til opgave at skrive kode for at opdatere antallet af deltagere, når de ankommer til en konference. Du opretter en simpel webside, der har en knap, der, når du klikker numOfAttendeespå den, forøger ejendommen på confrence-objektet. Du bruger jQuery til at tilføje et klikbehandler til din knap, men efter at du har klikket på knappen, ændres ikke confrence-objektet. Din kode kan se sådan ud.

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

Dette er et almindeligt problem, når du arbejder med jQuery og JavaScript. Når du klikker på knappen, henviser thisnøgleordet i den metode, du sendte til jQuerys onmetode, til knappen og ikke til konferenceobjektet. Du kan binde thissammenhængen med din metode til at løse problemet.

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

Nu når der klikkes på knappen thishenviser nodevemberobjektet.

Tilvejebringelse af argumenter til en funktion med bind

Hvert argument, der sendes til bindefter det første, går foran alle argumenter, der er sendt, når funktionen kaldes. Dette giver dig mulighed for på forhånd at anvende argumenter på en funktion. I eksemplet herunder combineStringstager to strenge og sammenkædes dem sammen. bindbruges derefter til at oprette en funktion, der altid giver "Cool" som den første streng.

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

Vejledningen til denne reference har mere information om, hvordan thisnøgleordsreferencer kan ændre.

Flere detaljer om bindmetoden kan findes i Mozillas MDN-dokumenter.

Funktionslængde

Den lengthejendom på funktionen objekt holder række argumenter forventes af den funktion, når der kaldes.

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

ES2015-syntaks

ES2015, eller ES6, som det almindeligvis kaldes, introducerede restoperatoren og standardfunktionsparametrene. Begge disse tilføjelser ændrer den måde, lengthejendommen fungerer på.

Hvis enten hvileoperatøren eller standardparametrene bruges i en funktionserklæring, lengthinkluderer ejendommen kun antallet af argumenter før en hvileoperator eller en standardparameter.

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

Flere oplysninger om Function.lengthfindes på Mozillas MDN Docs.