Js declaration functions (function creation)

In javascript, function creation and declaration functions have common user-defined functions and anonymous functions. Next I will introduce the usage of these functions separately.

Generally, when writing JavaScript, we all like to name an empty function (such as code 1) first. I feel this will consume some performance and write more code. In fact, you can directly declare the function you want to write without first declaring an empty function (such as code 2 ).

There are three methods for defining javascript Functions (declaring functions): normal methods, constructor functions, and direct amount of functions.

The simplest method for declaring javascript Functions is no different from other programming languages. function (param ){}

The Code is as follows:	Copy code
Code 1: Function myFunction (){ This. myMethod = function (){} } Var myObject = new myFunction (); Code 2 Var myObject = { MyMethod: function (){} };

If the function does not contain the return statement, only the statements in the function body are executed and the undefined

Constructor method: new Function ();

The Code is as follows:	Copy code
// Define javascript Functions using Constructors Var add = new Function ('A', 'B', 'Return a + B ;');

The above code may be very simple and you will not understand it. Let's continue to look at it.

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

1. Use the Function to construct the Function defined by the Function. The Code is as follows:

The Code is as follows:	Copy code
Var multiply = new Function ('x', 'y', 'Return x * y ;');

2. function declaration. This method is also the most common one:

The Code is as follows:	Copy code
Function multiply (x, y) {return x * y ;}

3. The function expression is declared as an anonymous function and then assigned to a variable. A common method is as follows:

The Code is as follows:	Copy code
Var multiply = function (x, y) {return x * y ;}

4. function expression, but the function declaration is named function and then assigned to a variable, which looks like the preceding method:

The Code is as follows:	Copy code
Var multiply = function multi (x, y) {return x * y ;}

First, compare the function name and the direct relationship between the function variables assigned by the function, such as the true circle ...... Intuitively, from example 4, the relationship between the multiply function variable and the multi function name is as follows:

The Code is as follows:	Copy code
The handler function name cannot be modified. On the contrary, function variables can be assigned a value again. It should be easy to understand that function variables can be re-assigned. In our 4th example, the defined multiply variable is not pleasing to the eye, and the re-assigned value is:   Multiply = function (x, y) {return x + y ;}

Immediately changed from multiplication to addition. However, changing the multi function variable is impossible. The function definition is already there. As long as the reference is retained, it will not change. It may not be easy to understand here, let's think about it first. Let's look at it and we should be able to understand it.

The handler function name cannot be used outside the function at the same time. It is only visible inside the function body. A simple example is as follows:

The Code is as follows:	Copy code
Var foo = function bar () {alert ('hello');} foo (); // The prompt "hello" string bar (); // The execution reports an error. The bar is undefined.

And obviously, the bar here is indeed a function name, but it cannot be called externally. At this time, there will certainly be children's shoes to ask why this example is still so cool, just like Example 4. Why not use case 2? I have a good question, and I think it's time to break it down.

Let's continue with example 4. We can see that the function name (multi) and function variable (multiply) are not the same. In fact, there is no relationship between the two, so there is no need to maintain consistency. Speaking of this, I think the above four examples can be reduced to three, and the essence of Example 2 and Example 4 should be consistent. What, believe it? Hey, I have to continue selling the customs ~ Continue reading ~~
We found that compared with example 4, Example 2 only lacks the var function variable. Compared with example 4, Example 3 only lacks the function name. From the symptom, the essence of Example 2 and Example 4 is the same. The evidence is as follows:

The Code is as follows:	Copy code
Function foo () {} alert (foo ); // The system prompts the function name containing "foo ". Var bar = foo; alert (bar );

// The prompt still contains only the function name "foo", which has no relationship with bar half dime
It is indeed an iron certificate, right? Is the above Code similar to Example 2 combined to write in Example 4? Correct. This is what I just mentioned. The two should be essentially the same, but when we define a function in Case 2, The JS engine helped us do something, for example, declaring a function named multiply, at the same time, we also quietly defined a variable also called multiply, and then assigned this variable with two identical names. We thought we were using the function name multiply, actually, I'm using the multiply function variable. I'm dizzy ~ To be honest, I am also dizzy ~~ In short, when we call the function, we actually call the function with function variables, and the function name cannot call the function externally. Therefore, I have inferred the above.

But here is a small difference. The function defined in the function declaration method is different from the declaration of the constructor or function expression, function declaration functions can be called before function definition ...... If you don't talk about it, check the Code:

The Code is as follows:	Copy code
Foo (); // prompt Foo Function foo () {alert ('foo');} bar (); // Dude, it's really different from the above. Don't try again. Isn't this an error? Prompt bar undefined Var bar = function () {alert ('bar ');}

Let's talk about the Function declared by the constructor. In this way, the declared function does not inherit the scope of the current declared position. By default, it only has the global scope, however, this is the same for several other function declaration methods, as shown below:

The Code is as follows:	Copy code
Function foo (){ Var hi = 'hello '; // Return function (){ // Alert (hi ); //}; Return Function ('Return hi ;'); } Foo ()();

// You can view the execution result by yourself.

Let's take a look at the execution results.
It is conceivable that an error is inevitable for the execution of the function returned by using the constructor declaration, because its scope (that is, the global scope) does not contain the hi variable.

Another point is that it is often said that the efficiency of the function declared in the constructor method is low. Why? Today, I learned from the document that the functions declared in the other three methods will only be parsed once. They actually exist in the closure, but they are only related to the scope chain, the function body is parsed only once. However, in the constructor mode, the function body is parsed every time a function is executed. We can think that the declared function is an object, which stores parameters and function bodies, the parameter and function body must be parsed before execution. This will inevitably lead to inefficiency. I don't know how to do this experiment?

Finally, we don't know much about it. When does it look like the function declaration method is not the Function life method ~ To put it simply, the method of Example 2 will become a different method when it is inadvertently ):

When a struct is a part of an expression, it is like Example 3 and Example 4.
Struct is no longer the source element of the script or function ). What is a source element? That is, A non-nested statement or function body (a "source element" is a non-nested statement in the script or A function body) in the script. For example:

The Code is as follows:

Copy code

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 the while statement } }

The concept of the source element is probably understood. For more information about the function declaration just mentioned, see:

The Code is as follows:	Copy code
// Function declaration Function foo (){} // Function expression (Function bar (){}) // Function expression X = function hello (){} If (x ){ // Function expression Function world (){} } // Function statement Function (){ // Function statement Function B (){} If (0 ){ // Function expression Function c (){} } }

At last, let's talk about my own understanding. The reason why we need to distinguish between function declaration and non-function declaration is that I have read the function definition in the function declaration method, when the JS parsing engine is executed, it will be declared in advance, that is, as we mentioned above, it can be used before function definition, in fact, the parsing engine has resolved it before we use it, but the non-function declaration is like expression function declaration. The JS parsing engine only defines the variables declared by var in advance, at this time, the variable value is undefined, and the true value assigned 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 no value has been assigned, the JS parsing engine does not know it as a function.