Of Stack

Talking about the calling order of three definition modes and four calling modes of js function

  • 2021-07-22 08:38:45
  • OfStack

There are three ways to define a function 1 in Javascript:

Function keyword (function) statement:

function fnMethodName(x){alert(x);}

Function literal (Function Literals):

var fnMethodName = function(x){alert(x);}

Function () Constructor:

var fnMethodName = new Function ('x', 'alert (x);')//The number of arguments constructed by Function is variable. The last argument is written to the function body, and the previous argument is written to the argument.

The above three methods define the same method function fnMethodName, the first method is the most commonly used method, and the latter two methods copy a function to the variable fnMethodName, and this function has no name, that is, anonymous function.

Execution order of functions:

Example 1. 


test1();

function test1() {  // Function declaration 

  alert("1111");

}

test2();

var test2 = function(){   // Function literal 

  alert("2222");

}

test3();
var test3 = new Function("alert(3333);");  // At run time, initialize the function body

Execution result: 1111 popped up, but 222, 3333 not popped up

Principle: 1111 pops up because the JS function declaration is advanced

2222, 3333 are not popped up because the function literal is not a function declaration, the function literal representation is parsed at run time, and the function body of the function literal has not been declared before calling test2 ().

Example 2. 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage

Implementation results: 4 2 3 3 5 6

Principle: Find out the function declaration first. "Function declaration with return value of 4" overrides "function declaration with return value of 1". So the result of the first f () is 4.

Function scope: 


var k = 4;
 window.onload=function() {

   var k=1;
   function t1() {
     var k = 2;

     function test(){return k;}
     console.info(test()); //  Eject  2

     var test = function(){return k;};
     console.info(test());  //  Eject  2

     var test = new Function("return k;");  //  At each execution, the dynamic new Unable to get local variable, top-level scope 
     console.info(test());  //  Eject  4

   }
   t1();
};

2. Differences between function literals and Function () constructors

Although the function literally is an anonymous function, the syntax allows it to be given any one function name, and it can call itself when writing a recursive function, not with the Function () constructor. 


var f = function fact(x) {
    if (x < = 1) return 1;
    else return x*fact(x-1);
};

The Function () constructor allows dynamic creation and compilation of Javascript code at runtime. In this way, it is similar to the global function eval ().

The Function () constructor parses the function body and creates a new function object each time it is executed. So it is very inefficient to call the Function () constructor in a loop or frequently executed function. On the contrary, function literals are not recompiled every time they are encountered.

Creating a function with the Function () constructor does not follow the typical scope and executes it as if it were a top-level function. 


var y =  " global " ;

function constructFunction() {

var y =  " local " ;

return new Function( " return y " ); //  Unable to get local variable   }

alert(constructFunction()()); //  Output   " global "

Function direct quantity:

As long as it is expression syntax, the script host thinks function is a direct quantity function. If nothing is added, if it starts with function, it is considered as a function declaration. If function is written into an expression, such as 4 operations, the host will also regard it as a direct quantity, as follows: 


var a = 10 + function(){
return 5;
}();

Exaggerate by 1 point, as follows: 


(function(){
alert(1);
} ) ( );
( function(){
alert(2);
} ( ) );
void function(){
alert(3);
}()
0, function(){
alert(4);
}();
-function(){
alert(5);
}();
+function(){
alert(6);
}();
!function(){
alert(7);
}();
~function(){
alert(8);
}();
typeof function(){
alert(9);
}();

There are many ways to define functions in js, and function direct quantity is one of them. For example, var fun = function () {}, where function is an anonymous function if it is not assigned to fun.

OK, let's see how anonymous functions are called.

1. The function call that gets the return value after execution 


// Mode 1 Call the function and get the return value. Force the operator to cause the function call to execute 
(function(x,y){
alert(x+y);
return x+y;
}(3,4));

// Mode 2 Call the function and get the return value. Force the function to execute directly and then return 1 References, which are executed in the go-call 
(function(x,y){
alert(x+y);
return x+y;
})(3,4);

2. Ignore the return value after execution 


// Mode 3 Call the function, ignoring the return value 
void function(x) {
x = x-1;
alert(x);
}(9);

Well, finally look at the wrong way to call 


// Wrong calling method 
function(x,y){
alert(x+y);
return x+y;
}(3,4);

3. Some explanations of application examples

Object Direct creates 1 object:

var obj = {x:[1,2],y:23};

The code is the same as the following. 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage
0

Test:

for(var i in obj) alert(obj[i]);

Function Direct Quantity: It is an expression instead of a statement.
(function(){})()

The following example: 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage
1

How do you explain this

Everyone should remember this writing

var a=function (){}

So how to run a, then a ()

By the same token, we don't save it through the variable a, so how to write it, that is,

function(){}()

But you will find that this is wrong

Because when the parsing engine parses, when it parses, it finds that} it judges that the function is over

That function is not run as a block

Then adding () is to force the function block as a block


Four methods of JS function call: method call mode, function call mode, constructor call mode, apply, call call mode

1. Method invocation pattern:

First define an object, then define a method in the property of the object, and execute the method through myobject. property, this refers to the current myobject object. 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage
2

2. Function call pattern

Define a function, set a variable name to hold the function, and then this points to an window object. 


var myfunc = function(a,b){
 　　 return a+b;
}

alert(myfunc(3,4));

3. Constructor invocation pattern

Define a function object, define attributes in the object, and define methods in its prototype object. When using prototype's methods, you must instantiate the object to call its methods. 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage
4

4. apply, call call mode 


function f(){return 1;}  
console.log(f());   //  No. 1 4 The first function puts the first 1 Function coverage 
var f = new Function("return 2;");
console.log(f());   //  No. 1 2 The first function puts the first 4 Function coverage 
var f = function() {return 3;}
console.log(f());   //  No. 1 3 The first function puts the first 2 Function coverage 
function f(){return 4;}
console.log(f());   //  No. 1 4 Functions have been overridden 
var f = new Function("return 5;");
console.log(f());   //  No. 1 5 The first function puts the first 3 Function coverage 
var f = function(){return 6;}
console.log(f());   //  No. 1 6 The first function puts the first 5 Function coverage
5
Related articles: