function.prototype.bind та function.prototype.length у JavaScript Пояснено

Програмування

Функція Bind

bindє методом на прототипі всіх функцій у JavaScript. Це дозволяє вам створити нову функцію з існуючої функції, змінити контекст нової функції thisта надати будь-які аргументи, за якими ви бажаєте викликати нову функцію. Наведені аргументи bindпередують будь-яким аргументам, які передаються новій функції при її виклику.

Використання bindдля зміни thisфункції

Першим аргументом, що надається, bindє thisконтекст, до якого буде прив'язана функція. Якщо ви не хочете змінювати значення thispass nullяк перший аргумент.

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

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

Це поширена проблема при роботі з jQuery та JavaScript. Коли ви натискаєте кнопку, thisключове слово в методі, який ви передали onметоду jQuery, посилається на кнопку, а не на об'єкт конференції. Ви можете прив’язати 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метод можна знайти в документах Mozilla MDN.

Довжина функції

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 Mozilla.