function.prototype.bind и function.prototype.length в JavaScript Обяснено

Функция Bind

bindе метод върху прототипа на всички функции в JavaScript. Тя ви позволява да създадете нова функция от съществуваща функция, да промените thisконтекста на новата функция и да предоставите всички аргументи, с които искате да бъде извикана новата функция. Аргументите, предоставени на, bindще предшестват всички аргументи, които се предават на новата функция, когато тя бъде извикана.

Използване bindза промяна thisна функция

Първият аргумент, предоставен на, bindе thisконтекстът, към който ще бъде обвързана функцията. Ако не искате да променяте стойността на thispass nullкато първи аргумент.

Имате задачата да напишете код, за да актуализирате броя на присъстващите, когато те пристигнат на конференция. Създавате проста уеб страница, която има бутон, който при щракване увеличава numOfAttendeesсвойството на обекта за конфиденциалност. Използвате jQuery, за да добавите манипулатор на щракване към вашия бутон, но след щракване върху бутона обектът на confrence не се е променил. Вашият код може да изглежда нещо подобно.

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

Това е често срещан проблем при работа с jQuery и JavaScript. Когато щракнете върху бутона, thisключовата дума в метода, който сте предали на метода на jQuery, се onпозовава на бутона, а не на обекта на конференцията. Можете да свържете thisконтекста на вашия метод, за да разрешите проблема.

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

Сега при щракване върху бутона се прави thisпрепратка към nodevemberобекта.

Предоставяне на аргументи на функция с bind

Всеки аргумент, предаден на bindслед първия, ще предшества всички аргументи, предадени при извикване на функцията. Това ви позволява предварително да приложите аргументи към функция. В примера по-долу combineStringsвзема два низа и ги обединява заедно. bindслед това се използва за създаване на функция, която винаги осигурява “Cool” като първи низ.

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

Ръководството за тази справка съдържа повече информация за това как thisможе да се промени това, което може да се промени.

Повече подробности за bindметода могат да бъдат намерени в MDN документите на Mozilla.

Дължина на функцията

В lengthимота на обекта функция притежава броя на аргументите, очаквани от функцията, когато се обади.

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

Синтаксис на ES2015

ES2015 или ES6, както обикновено се нарича, въведе оператора за почивка и параметрите на функцията по подразбиране. И двете допълнения променят начина на lengthработа на свойството.

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

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

Повече информация за Function.lengthможете да намерите в MDN Docs на Mozilla.