Various common function definition methods in JavaScript

This article describes in detail various common function definition methods in JavaScript, and is shared with you for your reference. The specific analysis is as follows:

First, let’s take a look at the four most common function definitions in JavaScript:

The function defined with the Function constructor, the code is as follows:

 var multiply = new Function('x', 'y', 'return x * y;');

Function declaration, this method is also the most common:

 function multiply(x, y) { return x * y;}

Function expressions, declared as anonymous function and then assigned to a variable, are very common ways:

 var multiply = function(x, y) { return x * y;}

Function expression, but the function declaration is a named function and then assigned a value to a variable, which looks exactly like the same way:

 var multiply = function multi(x, y) { return x * y;}

First, let’s compare the function name and the direct relationship between the function variable assigned to the function. It’s really a bit... To be more intuitive, from the example 4 just now, it is the relationship between the function variable multiply and the function name multi:

Function names cannot be modified, on the contrary, function variables can be reassigned. It should be easy to understand that function variables can be reassigned. In our fourth example, the multiply variable just defined, it is not pleasant to see, and reassign it to:

 multiply = function(x, y) { return x + y;}

I immediately transformed myself from multiplication to addition. However, it is impossible to change the multi function variable. The function definition is already there. As long as it still retains its reference, it will not change. It may not be easy to understand here. Think about it like this first, and then you should be able to understand it slowly.

The function name cannot be used outside the function at the same time, it is only visible inside the function body. A very simple example:

 var foo = function bar() { alert('hello');}foo(); // Prompt "hello" string bar(); // Execute an error, bar is not defined

And obviously, the bar here is indeed a function name, but it really cannot be called externally. At this time, there will definitely be children's shoes asking why this example still looks so well-behaved, just like Example 4, why not use the method of Example 2? Good question, let me break it down slowly.

Continuing with Example 4, we can see that the function name (multi) and function variable (multiply), are not the same, but in fact, the two have no relationship at all, so there is no need to maintain consistency. Speaking of this, I think the above four examples should be reduced to 3, and Example 2 and Example 4 should be essentially consistent. What, don't believe it? Hehe, I have to keep keeping it in a silence~ Keep reading~~

We found that compared with Example 2 and Example 4, there are only fewer var function variables, while compared with Example 3, there are only fewer that function name. From the perspective of phenomenon, the essence of Example 2 and Example 4 are the same, and the evidence is as follows:

 function foo() {}alert(foo); // prompts the function name containing "foo" var bar = foo;alert(bar); // prompts the function name still only contains "foo", and has no relationship with bar

It's indeed ironclad? Is it the way to write the above code similar to Example 2 in combination with the codes in Example 4? Correct, this is what I just said that the two should be essentially the same. However, when defining the function in case 2, the JS engine helped us do something, such as declaring a function with the function name multiply, and quietly defining a variable also called multiply, and then assigning it to this variable, two exactly the same names. We thought that when using the function name multiply, we were actually using the function variable multiply, so we were dizzy~ To be honest, I was also dizzy~ In short, when we called, we actually called the function variable, and the function name could not call the function externally, so I had the above inference.

However, a small difference to be mentioned here is that the function defined by the function declaration method is different from the constructor declaration or the function expression declaration, the function declaration method can be called before the function definition... Not to mention it, just look at the code:

 foo(); // Tip Foofunction foo() { alert('Foo');}bar(); // Buddy, it's really different from the above, so don't show off. Isn't this a mistake? prompt bar is not defined var bar = function() { alert('Bar');}

Let’s talk about the functions declared by the constructor. The declared functions will not inherit the scope of the current declared location. They will only have a global scope by default. However, this is the same in other functions declaration methods, as follows:

 function foo() { var hi = 'hello'; //return function() { // alert(hi); //}; return Function('return hi;');}foo()(); // For the execution effect, please run and see by yourself

It can be imagined that the execution of the function returned by using the constructor declared will inevitably report an error because the variable hi is not in its scope (i.e., global scope).

Another point is that people often say that the functions declared in constructor mode are inefficient. Why is this? Today, I learned from the document that the functions declared in the other three ways will only be parsed once. In fact, they exist in the closure, but that is only related to the scope chain, and the function body will only be parsed once. But the constructor method is that every time a function is executed, its function body will be parsed once. We can think that the function declared in this way is an object, which stores parameters and function body. Each time it is executed, it must be parsed once, and the parameters and function body will be executed, which will inevitably be inefficient. Don't know how to do the specific experiment?

Finally, let’s talk about something that no one pays attention to. When does it seem like the way of function declarations not the way of function life (it’s still so inclined to put it simply, when the way of Example 2 becomes another way inadvertently):

When it becomes part of the expression, it is like Example 3 and Example 4.

It is no longer the "source element" of the script itself or function. What is the source element? That is, a non-nested statement in the script or a function body, such as:

 var x = 0; // source element if (x == 0) { // source element x = 10; // not a source element, because it is nested in the if statement function boo() {} // not a source element, because it is nested in the if statement} function foo() { // source element var y = 20; // source element function bar() {} // source element while (y == 10) { // source element function blah() {} // not a source element, because it is nested in the while statement y++; // not a source element, because it is nested in a while statement} }

I have roughly understood the concept of source elements. I will continue with the function declaration I just mentioned. Please see:

 // Function declaration function foo() {} // Function expression(function bar() {}) // Function expression x = function hello() {} if (x) { // Function expression function world() {} } // function statement function a() { // function statement function b() {} if (0) { // Function expression function c() {} } }

Finally, let me talk about my own understanding. The reason for distinguishing between function declaration and non-function declaration is that in my view, the function definition of function declaration method will be declared in advance when the JS parsing engine executes it. That is, as we just said above, it can be used before the function definition. In fact, the parsing engine has parsed it before we use it. However, non-function declarative, like expression function declaration, the JS parsing engine will only define the variable declared by var in advance. At this time, the variable value is undefined, and the real assignment to this variable is in the actual location of the code. Therefore, the above mentioned errors are all undefined. The actual variable has been defined, but it has not been assigned yet. The JS parsing engine does not know that it is a function.

I believe that the description in this article has certain reference value for everyone's javascript WEB programming design.