Common Function Definition methods of JavaScript, javascript function definition

Common Function Definition methods of JavaScript, javascript function definition

This article describes various common function definition methods in JavaScript for your reference. The specific analysis is as follows:

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

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

var multiply = new Function ('x', 'y', 'return x * y;');
Function declaration, this way is also the most common one:

function multiply (x, y) {
  return x * y;
}
Function expressions, declared as anonymous functions and then assigned to a variable, a very common way:

var multiply = function (x, y) {
  return x * y;
}
Function expression, but the function is declared as a named function and then assigned to a variable, it looks like a real way:

var multiply = function multi (x, y) {
  return x * y;
}
Let ’s first compare the function name and the direct relationship between the function variable to which the function is assigned. It ’s really straightforward ... Let ’s be intuitive. From the example 4 just now, the relationship between the multiply function variable and the multi function name:

Function names cannot be modified. On the contrary, function variables can be reassigned. The function variable can be reassigned. It should be well understood. The multiply variable just defined in our fourth example, if it is not pleasing to the eye, reassign:

multiply = function (x, y) {
  return x + y;
}
Immediately changed from multiplication to addition. But it is impossible to change the function variable of multi. The function definition is already there. As long as it retains its reference, it will not change. It may not be well understood here. Think about it first. Look down. It should be understood 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 (); // execution error, bar is not defined

And obviously, 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 good, just like Example 4, why not use the method of Example 2? Good question, and listen to me slowly decompose.

Continuing with Example 4, we can see that the function name (multi) and the function variable (multiply) are not the same. In fact, the two have no relationship at all, so there is no need to maintain consistency. Speaking of which, I think the above 4 examples should be reduced to 3, and the essence of Example 2 and Example 4 should be the same. What, don't believe it? Hee hee, I have to keep selling Guanzi ~ Continue reading ~~

We found that compared to Example 2 and Example 4, only the function variable of var is missing, and Example 3 is only compared to Example 4, but the function name is missing. From the perspective of the phenomenon, the essence of Example 2 and Example 4 is The same, the iron evidence is as follows:

function foo () {}
alert (foo); // Prompt the function name containing "foo"
var bar = foo;
alert (bar); // The prompt still only contains the function name of "foo", and has nothing to do with bar

Is it true? Would the above code similar to Example 2 be written in the same way as Example 4? Correct, this is what I just said, the two should be the same in essence, but when using the function 2 to define the function, the JS engine did something for us, such as declaring the function named multiply, and also quietly defining one A variable called multiply, and then assign it to this variable. The two have the same name. We think that when using the function name multiply, we are actually using the multiply function variable. I am dizzy ~ To be honest, I am dizzy ~ ~ In short, when we call, it is actually called with a function variable, and the function name cannot be called externally, so I have the above inference.

But there is a small difference to be mentioned here. The function defined in the function declaration way is different from the constructor declaration or the function expression declaration in that the function declaration method function can be called before the function definition ... Having said that, still look at the code:

foo (); // Prompt Foo
function foo () {
  alert ('Foo');
}
bar (); // Man, it's really different from the above, don't succeed, this is not a mistake? Prompt bar is not defined
var bar = function () {
  alert ('Bar');
}
Let's talk about the function declared by the constructor. In this way, the declared function will not inherit the scope of the current declaration position. It will only have the global scope by default. However, this is also the same for several other function declaration methods, as follows:

function foo () {
  var hi = 'hello';
  // return function () {
  // alert (hi);
  //};
  return Function ('return hi;');
}
foo () (); // execute the effect, let's take a look
It is conceivable that the function returned by the constructor declaration will inevitably report an error, because there is no hi variable in its scope (that is, the global scope).

Another point is that people often say that the function declared by the constructor method is inefficient, why? Today, I learned from the documentation 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 for the constructor method, each time the function is executed, the function body will be parsed once. We can think of the function declared in this way as an object, which stores the parameters and function body, and must be parsed each time it is executed. Once, the parameters and function body are executed, which is bound to be inefficient. Don't know how to do specific experiments?

Finally, let ’s talk about a place that everyone does n’t pay much attention to. When it seems that the way of function declaration is not the way of function life (it ’s still so around ~ simply put, that is, when the method of example 2 is inadvertently other ways ):

When it becomes part of an expression, it is like Example 3 and Example 4.
No longer the "source element" of the script itself or the function. What is the source element? A "source element" is a non-nested statement in the script or a function body, for example:

var x = 0; // source element
if (x == 0) {// source element
  x = 10; // not a source element, because it is nested in an if statement
  function boo () {} // not a source element, because it is nested in an 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 a while statement
   y ++; // not a source element, because it is nested in a while statement
  }
}
The concept of the source element is probably understood. To continue the function declaration 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 why I want to distinguish between function declarations and non-function declarations, because in my opinion, function definitions in function declarations are declared in advance when the JS parsing engine is executed, which is like ours As mentioned above, it can be used before the function definition. In fact, the parsing engine has already parsed it before we use it, but it is non-function declarative, just like expression function declaration, the JS parsing engine will only declare var. The variable is defined in advance. At this time, the variable value is undefined, and the actual assignment of this variable is at the actual location of the code. Therefore, the above mentioned errors are all undefined. The actual variable is already defined, but it has not been assigned yet. The JS analysis engine does not know It is a function.

I believe that this article has a certain reference value for everyone's javascript WEB programming.


What are the common methods of functions in javascript?
setInterval setTimeout, alert (), etc. Basically define your own function function yourfunction () {function body}
 
How does JavaScript define a function, how is it different from the method in Java?

<script type = "text / javascript">
function function name (parameter)
{
Specific algorithm
}
</ script>
Although js and java look very similar, they are not really related. . Even the production company is different. If there are similarities between the JS function and the java method, they are defined and then called, and parameters can be passed