Правилният начин за предаване на методи като манипулатори на събития в JavaScript

Тези скоби правят ГОЛЯМА разлика и променят резултата

Онзи ден един от колегите ми не получи очакваните параметри в JS метод. Той се опитваше да накара плъгин Vue.js на трета страна да работи в проект (както всички правим с променлива увереност).

Нека да разгледаме прост пример с ванилен Javascript, но правилото важи навсякъде (включително любимата ви JS рамка).

document.getElementById("just-do-it").addEventListener("click", spreadHappiness());

function spreadHappiness() {
    console.log('You are awesome');
}

Какво мислите, че ще се случи, когато потребител щракне върху този бутон?

Познахте ли?

Нищо!

Методът се извиква при зареждане на страницата и нищо не се случва, когато се щракне върху бутона. Хм...

Забелязахте ли, че поставихме скобите () след името на метода spreadHappiness() в първия ред?

Това е класическото извикване по препратка срещу извикване по стойност.

Този ред трябваше да бъде написан така (с премахнати скоби):

document.getElementById("just-do-it").addEventListener("click", spreadHappiness);

И с това, щракването върху този бутон ще регистрира изявлението в конзолата на браузъра, както се очаква.

Знаете ли, че манипулаторът на събития получава обект, базиран на интерфейса Event като параметър? Това означава, че можете да използвате метаданните за събитие във вашия метод. Така:

function spreadHappiness(event) {
    console.log(event.type); // click
}

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

Затваряне

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

method():Изпълнява се незабавно и върнатата стойност се използва като манипулатор на събитие.

метод:Използва се като манипулатор на събития и получава параметрите при извикване.

Отново, Извършването на извикване на метод и предаване на препратката към метод са две различни неща и разработчиците, особено начинаещите, трябва да са наясно с тази разлика.

Трябва ли някой от вашите приятели да знае това? Споделете тази статия с тях, за да улесните живота им при отстраняване на грешки.

Първоначално публикувано на https://blog.freshbits.in.

Повече съдържание в PlainEnglish.io. Регистрирайте се за нашия безплатен седмичен бюлетин. Следвайте ни в Twitter иLinkedIn. Присъединете се към нашата общност Discord.