Detailed JavaScript function traps

Reprint: http://www.cnblogs.com/isaboy/p/javascript_function.html

There are two types of Javascript function:

1) function declaration (functions Declaration);

  // function Declaration    function fundeclaration (type) {        return type=== "Declaration";    }

2) Functional Expressions (function expression)

// function Expression    var function (type) {        return type=== "Expression";    }

The code above looks very similar and doesn't feel much different. But in fact, a "trap" on JavaScript functions is embodied in JavaScript two types of function definitions. Here's a look at two pieces of code (labeled Code 1 and Code 2, respectively):

// = True function fundeclaration (type) {return type = = = = "Declaration";} Funexpression (//  =>errorvarfunction(type) {return type=== "Expression";}

A function that is created with a function declaration can be called before the fundeclaration is defined, whereas a funexpression function created with a function expression cannot be called before the funexpression is assigned a value. fundeclaration

Why is this so?! This is to understand the difference between JavaScript function two types: functions created with function declarations can be called after function parsing (such as parsing), and functions created with function expressions are assigned at run time and are not invoked until the expression is assigned.

This distinction may seem small, but in some cases it is a trap that is difficult to find. The nature of this trap is due to the difference between the two types in JavaScript function hoisting (functions promotion) and runtime timing (parsing/runtime). For variable elevation, see another blog post, http://www.cnblogs.com/isaboy/p/javascript_hoisting.html. The function elevation of the above two pieces of code can be signalled as:

The code 1 Segment JS function is equivalent to:

function fundeclaration (type) {        return type=== "Declaration";    } fundeclaration (" Declaration "); // = True

The code 2 Segment JS function is equivalent to:

var funexpression;    Funexpression ("Expression"); // ==>error    function (type) {        return type=== "Expression";    }

At run time, the code above defines only the funexpression variable, but the value is undefined. Therefore, you cannot make a function call on undefined. At this point the Funexpression assignment statement has not been executed. To further deepen the difference between the two types of JS functions, here is a more confusing example, see the following code (code snippet 4):

varSayHello; Console.log (typeof(Sayhey));//=>functionConsole.log (typeof(Sayho));//=>undefined    if(true) {        functionSayhey () {Console.log ("Sayhey"); } SayHello=functionSayho () {Console.log ("SayHello"); }    } Else {        functionSayhey () {Console.log ("SayHey2"); } SayHello=functionSayho () {Console.log ("SayHello2"); }} sayhey ();//= SayHey2SayHello ();//= SayHello

Analysis : Sayhey is created with a function declaration, the JS compiler in the JS parsing function definition of function promotion, that is, in parsing the JS code, JS compiler (conditional judgment does not form a new scope, Two Sayhey function definitions are promoted beyond the conditional judgment) detects that there are two sayhey definitions with the same name in the scope, the first one is promoted first, the second definition is then promoted (the second definition is under the first definition), and the second definition overrides the first sayhey definition, So Sayhey () output SayHey2, and SayHello is created with a function expression, the content of its expression is in the JS runtime (not parsing) to determine (here the condition is played), so the SayHello expression executes the first function definition and assign a value, The SayHello () output SayHello.

Code Snippet 4 is actually equivalent to the following code (code snippet 5):

varSayHello; functionSayhey () {Console.log ("Sayhey"); }    functionSayhey () {Console.log ("SayHey2"); } console.log (typeof(Sayhey));//=>functionConsole.log (typeof(Sayho));//=>undefined    if(true) {        //Hoisting ...SayHello =functionSayho () {Console.log ("SayHello"); }    } Else {        //Hoisting ...SayHello =functionSayho () {Console.log ("SayHello2"); }} sayhey ();//= SayHey2SayHello ();//= SayHello

Some people may suspect that the definition of function Sayhey is the second one covering the first one? We can output the source code of Sayhey, there is a picture of the truth, as shown in:

Summarize

There is a difference between function declarations and function expressions in Javascript, function declarations are promoted in JS parsing, so in the same scope, the function can be called regardless of where the function declaration is defined. The value of the function expression is determined at the JS runtime and is called after the expression assignment is complete. This tiny difference may lead to unexpected bugs in the JS code, which can cause you to fall into an inexplicable trap.

Finally, we enclose the core steps of the two functions of SayHello and Sayhey in code Snippet 4:

The main steps to perform for the SayHello function.

Perform the main steps for the Sayhey function. If you are interested in closures, you can read another blog post http://www.cnblogs.com/isaboy/p/javascript_closure.html.

Detailed JavaScript function traps