All geek questions in one place

The difference between the two methods of calling a function

PopupFirstNameButton.addEventListener('click', FirstNameFunction); // This gets called function FirstNameFunction(){ alert("Hello"); } // This does not var FirstNameFunction = function (){ alert("Hello"); }
+6
source share
5 answers

In the first example, you create a named function. The name of the function is FirstNameFunction.

In the second example, you create an anonymous function (a function that does not have a name). However, you also define a variable called FirstNameFunction that contains a reference to an anonymous function. In this case, FirstNameFunction is not the function itself, but simply a variable that refers to it.

The reason these differences are important when assigning an event handler, as you did on the first line, is because global functions with a name can be referenced from anywhere in the code, if their declaration has been analyzed and interpreted before you try to use them. Variables, on the other hand, can only be used when they are in scope. This means that after they are identified, and before they go out of scope. Therefore, you should be able to use the second declaration method with the appointment of an event handler if you declare a variable that points to an anonymous function before calling the event handler, and you do this in the same area.

It works:

 var FirstNameFunction = function (){ alert("Hello"); } PopupFirstNameButton.addEventListener('click', FirstNameFunction, false);

It does not mean:

 PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // FirstNameFunction is undefined!! var FirstNameFunction = function (){ alert("Hello"); }

Also this:

 function declareFunction() { var FirstNameFunction = function (){ alert("Hello"); } } // FirstNameFunction falls out of scope here and is no longer declared declareFunction(); // The anonymous function exists while this is running but the reference is lost when the function returns PopupFirstNameButton.addEventListener('click', FirstNameFunction, false); // This doesn't work.
+6
source 
 var FirstNameFunction = function (){ alert("Hello"); }

it is an assignment operator, so only after that FirstNameFunction gets a value. Therefore, when PopupFirstNameButton.addEventListener('click', FirstNameFunction); is executed, FirstNameFunction is undefined

+7
source

You no longer need the third argument to addEventListener !

This is because the FirstNameFunction used in line 1 is undefined, but with an anonymous syntax function in line 9. The function symbol syntax of FirstNameFunction already in scope.

+2
source

The first function is bound at compile time. The syntax function foo() allows you to declare functions with a request for the future.

The second is a simple variable declaration. And you cannot use variables before they are declared ...

+1
source

Perhaps because they both have the same name? I tried:

 <HEAD> <SCRIPT TYPE="text/JavaScript"> // This does not get called? var FirstNameFunction = function (){ alert("Hello"); } </SCRIPT> </HEAD> <BODY> <button id="abutton" value="!"/> <SCRIPT TYPE="text/JavaScript"> getById('abutton').addEventListener('click', FirstNameFunction); </SCRIPT> </BODY>

And it worked (at least in Chrome)

+1
source

Source: https://habr.com/ru/post/886245/

More articles:


All Articles