JavaScript function Introduction to function types

This article mainly introduces the common function 、 Anonymous functions 、 Closure function

1. Introduction to common functions

1.1 Example

?
1
2
3
function  ShowName(name) {
     alert(name);
}

1.2 Js The coverage of functions with the same name in

stay Js There is no overload in the function , Define the same function name 、 Functions with different parameter signatures , Later functions override the previous ones . Invocation time , Only the following functions will be called .

?
1
2
3
4
5
6
7
8
9
10
11
var  n1 = 1;
 
function  add(value1) {
     return  n1 + 1;
}
alert(add(n1)); // The following function is called , Output :3
 
function  add(value1, value2) {
     return  value1 + 2;
}
alert(add(n1)); // Output :3

1.3 arguments object

arguments  Be similar to C# Of params, Operate variable parameters : The number of parameters passed into the function is greater than the number of parameters defined .

?
1
2
3
4
5
6
7
function  showNames(name) {
     alert(name); // Zhang San
     for  ( var  i = 0; i < arguments.length; i++) {
         alert(arguments[i]); // Zhang San 、 Li Si 、 Wang Wu
     }
}
showNames( ' Zhang San ' , ' Li Si ' , ' Wang Wu ' );

1.4 The default range value of the function

If the function does not specify the return value , The default return is 'undefined'

?
1
2
3
function  showMsg() {
}
alert(showMsg()); // Output :undefined

2. Anonymous functions

2.1 Variable anonymous function

2.1.1 explain

You can assign functions to variables 、 event .

2.1.2 Example

?
1
2
3
4
5
// Variable anonymous function , The left side can be a variable 、 Events, etc.
var  anonymousNormal = function  (p1, p2) {
     alert(p1+p2);
}
anonymousNormal(3,6); // Output 9

2.1.3 Applicable scenario

① Avoid function name pollution . If you first declare a function with a name , Assign values to variables or events , This leads to the abuse of function names .

2.2 Anonymous function without name

2.2.1 explain

That is, when a function is declared , Followed by parameters .Js When parsing this function , The code is executed immediately .

2.2.2 Example

?
1
2
3
( function  (p1) {
     alert(p1);
})(1);

2.2.3 Applicable scenario

① It only needs to be executed once . If the browser has finished loading , Functions that only need to be performed once and not later .

3. Closure function

3.1 explain

hypothesis , function A Internally declared a function B, function B Reference to function B Other variables , And the function A The return value of is the function B References to . So the function B It's the closure function .

3.2 Example

3.2.1 Example 1: Global reference and local reference

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function  funA() {
     var  i = 0;
     function  funB() { // Closure function funB
         i++;
         alert(i)
     }
     return  funB;
}
var  allShowA = funA(); // Global variable references : Cumulative output 1,2,3,4 etc.
 
function  partShowA() {
     var  showa = funA(); // Local variable references : Only the output 1
     showa();
}

allShowA It's a global variable , Reference to function funA. Run repeatedly allShowA(), Will be output 1,2,3,4 And so on .

Execute function partShowA(), Because only local variables are declared inside showa To quote funA, After execution, due to the scope , Release showa Occupied resources .

The key to closure is scope : The resources occupied by global variables will be released only when the page changes or the browser is closed .var allShowA = funA() when , amount to allShowA Refer to the funB(), So that funB() The resources in are not GC Recycling , therefore funA() The resources in the library will not .

3.2.2 Example 2: Parametric closure functions

?
1
2
3
4
5
6
7
8
9
10
11
function  funA(arg1,arg2) {
     var  i = 0;
     function  funB(step) {
         i = i + step;
         alert(i)
     }
     return  funB;
}
var  allShowA = funA(2, 3); // It's called funA arg1=2,arg2=3
allShowA(1); // It's called funB step=1, Output 1
allShowA(3); // It's called funB setp=3, Output 4

3.2.3 Example 3: Parent function funA Variable sharing within

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function  funA() {
     var  i = 0;
    function  funB() {
         i++;
         alert(i)
     }
     allShowC = function  () { // allShowC Reference anonymous functions , And funB Shared variables i
         i++;
         alert(i)
     }
     return  funB;
}
var  allShowA = funA();
var  allShowB = funA(); //allShowB Refer to the funA,allShowC Rebinding internally , And allShowB Shared variables i

3.3 Applicable scenario

① Guarantee function funA The variables inside are safe , Because it's not directly accessible from outside funA The variable of .

================================== Series articles ==========================================

This article :3.2  JavaScript function Introduction to function types

Web Road to development series

1.HTML

1.1 HTML Page source code layout introduction

1.2 HTML Introduction to basic controls

1.3 iframe and  frameset The difference between

1.4 name、id、class The difference between

1.5 table、form Introduction to form tags and get and post submission

2.CSS Cascading style sheets

2.1 CSS Selectors and the style of reference

2.2 CSS HTML Element layout and Display Property introduction

2.3 CSS Float Floating property introduction

2.4 CSS Position Positioning property introduction

3.JavaScript Introduce

3.1 JavaScript var keyword 、 The state of the variable 、 exception handling 、 Naming conventions, etc

3.2 JavaScript function Introduction to function types

3.3 Json object 、 class 、 Array 、 Dictionary operation

4.Dom

4.1 Window object : Operate on the browser's current window .

4.2 Navigator object : Operate the browser . Including getting the name of the browser 、 platform 、 Version information, etc .

4.3 Screen object : Operate the display screen . Including getting the height of the screen 、 Width .

4.4 Location object : On the current page URL To operate .

4.5 Document object : Yes HTML The elements in the .

4.6 Event object :HTML The event operation of the element .

5.Jquery

5.1 Jquery Selectors

5.2 Common methods

5.3 An array 、 Dictionary operation

5.4 Specify an object , Get adjacent elements

5.5 Dynamic operation HTML Elements

5.6 Event operations

5.7 Animation operation

5.8 Css operation

5.9 Extension plug-in

6.EasyUI frame

7. Other technologies

7.1 Ajax

7.2 Regular expressions

It's just a record of learning 、 Use Web Experience and problems encountered in front-end content . Many parts of the content refer to  http://www.w3school.com.cn/

 
 
 
label :  Web

JavaScript function More related articles on function types

  1. JavaScript function Function types ( turn )

    from :http://www.cnblogs.com/polk6/p/3284839.html JavaScript function Function types This article mainly introduces the common function . Anonymous functions . Closure function Catalog 1.  Ordinary ...

  2. JavaScript function Function types

    This article mainly introduces the common function . Anonymous functions . Closure function Catalog 1. Ordinary function : Introduce the characteristics of ordinary functions : Cover with the same name .arguments object . Default return value, etc . 2. Anonymous functions : Introduce the characteristics of anonymous functions : Variable anonymous function . Anonymous function without name . ...

  3. javascript:function Function declaration and function expression Detailed explanation

    Function declaration ( Abbreviation for FD) It's a function like this : There is a specific name Location in source code : Or at the program level (Program level), Or in the body of other functions (FunctionBody) in Create... In the context phase influence ...

  4. JavaScript Function Function in-depth summary

    Tidy up JavaScript Middle function Function Various , The sense function is a big object , All kinds of knowledge can be involved , Not just  Function  Various uses of this native reference type , It also includes the execution environment , Scope , Closure , Up and down ...

  5. JavaScript Function( Function expression )

    Create a function There are two ways to create functions :1. Function declaration ,2. Function expression The syntax of the function declaration is functionName(); // No mistake. , Function declaration promotion function functionName(arg0,arg1 ...

  6. Brief introduction Javascript Anonymous functions and object-oriented programming

    Steal a little leisure from the rush of business , A brief introduction Javascript Anonymous function and closure function and object-oriented programming . First, a brief introduction Javascript The secret function in . stay Javascript There are the following functions in 3 How to define : 1. The most common definition is ...

  7. 【 turn 】JavaScript in Function Function to implement variable parameters

    Reprint :  http://www.oschina.net/question/54100_15938 Use javascript Class library function , You often encounter a function , Different number of parameters can be used such as :exp(v ...

  8. JavaScript in Function Function and Object Relationship of objects

    The relationship between function objects and other internal objects Except for function objects , There are also many internal objects , such as :Object.Array.Date.RegExp.Math.Error. These names actually mean a type , Can pass new Operator returns a pair of ...

  9. JavaScript And Function Function in-depth summary

    Tidy up JavaScript Middle function Function Various , The sense function is a big object , All kinds of knowledge can be involved , Not just  Function  Various uses of this native reference type , It also includes the execution environment , Scope , Closure , Up and down ...

Random recommendation

  1. stay Eclipse Set the color of automatic packaging in

    stay Eclipse in , Special coloring method for automatic encapsulation :windows-->Preference-->java-->Editor-->Syntax Coloring-->j ...

  2. POJ 3259 Wormholes ( Negative link )

    Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 46123 Accepted: 17033 Descripti ...

  3. Customize DatePicker, Specific date , Don't show some of them

    After source code research : The structure mainly consists of three parts NumberPicker: private final NumberPicker mDayPicker; private final NumberPicker mMon ...

  4. VMware Of CentOS The solution to not being able to access the Internet

    1) Click on VM->Settings Hardware Under the tab 2) Click on Network Adapter Set the network configuration to... In the virtual machine NAT 3) Turn on Windows In service VMware ...

  5. jQuery Ajax: $.post Request example

    jQuery Ajax: $.post Request example leyangjun.html page <html> <head> <meta http-equiv="Content ...

  6. Oracle Update data from one table to another in

    Oracle Update data from one table to another in classification : SQL/PLSQL2012-05-04 15:49 4153 Human reading   Comment on (1)  Collection   report oraclemergesubqueryinsert ...

  7. 40. leetcode 202. Happy Number

    Write an algorithm to determine if a number is "happy". A happy number is a number defined ...

  8. Pop out the layer cover html( Upload photos pop up, please wait, the following code can't be modified )

    One , effect Two , material 3、 ... and , Code <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> ...

  9. [Codeforces 863A]Quasi-palindrome

    Description Let quasi-palindromic number be such number that adding some leading zeros (possible non ...

  10. Tsinghua source and China University of science and technology both stopped talking about Anaconda After the support of , Change the method of Tencent cloud image

    Download the following file directly, unzip it and put it in the user's folder ,windows by "C:\ user \ Your username \",Linux by "/home/ Your username /" That is, under the user's home directory . Click me to download ...