Function related in Js: three ways to create a function, function formal and actual parameters, return value, difference between return, break, continue, overload and arguments, anonymous function, callback function

Function related in Js: three ways to create a function, function formal and actual parameters, return value, difference between return, break, continue, overload and arguments, anonymous function, callback function

0. Preface

0.1. Declare in advance (hoist): Before the program starts to execute, the Js engine will advance the variable declared by var and the function declared by function to the top of the current scope and create it centrally, but the assignment stays in place.

0.2. A function is actually an object, but the internal storage is not data, but code segments.

0.3. The function name is just an ordinary variable. The function name refers to the function object by saving the address of the function object. When the function name is called, it is actually to let the engine find the function object referenced by the function name variable, and execute the program according to the code segment saved in the function object.

0.4. function is actually a shorthand for new Function, so every time the program executes a function, it is equivalent to a new Function, and a new function object is created.

1. Function

1.1. Definition:

Function is to save a program structure of a reusable code segment, and give this program structure another name.

1.2. Role:

Realize code reuse and avoid repeated coding.

1.3. Application scenarios:

As long as a piece of code may be used multiple times, it must be encapsulated into a function and then called repeatedly.

1.4. Define functions (3 ways)

(1). Create with declaration

function 函数名（形参列表）{
    
    
    函数体;
    return 返回值
}
用声明方式创建函数会被声明提前，打乱了程序的执行顺序

(2). Created by assignment

var 函数名=function （形参列表）{
    
    
    函数体;
    return 返回值
}
用赋值方式创建函数的优点：仅=前的声明部分被提前，而函数定义留在原地

(3). Create with new

var 函数名=new Function("形参1","形参2"，"函数体；return返回值")

1.5. Function parameters and actual parameters

1.5.1. Function parameters

(1). Formal parameters are variables that specifically receive the necessary parameters when the function is executed.

(2). If a function lacks some data and needs external data to execute normally, it needs to define shaping parameters.

In mathematics, we have y=2x+1, where x is equivalent to a formal parameter. When the actual value of x is substituted into the function,

The function will calculate the function value y according to its own defined algorithm

(3). Although formal parameters do not have var, they are also local variables.

1.5.2. Function arguments

The actual value used to execute the algorithm of this function when the function is called

function add(a,b){
    
    
    return a+b;
}
console.log(add(1,2));//3  //数字1和数字2就是本次调用函数传给形参的实参

1.6. The return value of the function

(1). The return value of a function is the execution result of a function

(2). If you call a function to obtain the execution result of the function and perform subsequent operations, the return value must be defined in the function: return return value;

i.return可以单独使用，表示退出函数
function add(a,b){
    
    
    if(a<0){
    
    
    return;
	}
    return a+b;
}
console.log(add(-1,3));//undefined
console.log(add(1,3));//4

ii.break表示退出循环
for(var i=0;i<5;i++){
    
    
    if(i==3)break;
    console.log(i)//0 1 2
}
 console.log(i);//3

iii.continue表示退出本次循环
for(var i=0;i<5;i++){
    
    
    if(i==3)continue;
    console.log(i)//0 1 2 4
}
 console.log(i);//5

1.7. Anonymous functions

1.7.1. Definition:

A function that does not specify a function name when creating a function is an anonymous function

1.7.2. Advantages:

Save memory, automatically release when used up

1.7.3. Usage scenarios:

A function is used only once, an anonymous function must be used

1.7.4. Use:

(1) Callback function

i. Callback functions are almost all anonymous functions

ii. The callback functions are tailored to the main function, and the callback function should be released together with the main function when the callback function is used up

(2) Anonymous function self-tuning

After creating an anonymous function, call yourself immediately. All Js code should be wrapped in an anonymous function to avoid the use of global variables and global pollution

Standard writing:

(function(形参列表){
    
    
    函数体;
    return 返回值;//有没有返回值看自己的需要
    
})(实参列表)

Note: Do not omit the semicolon before and after the self-adjustment of two anonymous functions

(function(){
    
     ... })();//第一个匿名函数
(function(){
    
     ... })();//第二个匿名函数

1.8. Callback function

Callback function is a function that we are only responsible for defining, not calling, and handing over to other functions to automatically call.
Examples of callback functions:

(1).一次性定时器
setTimeout(function(){
    
    },3000)里的function(){
    
    }是我们自己定义的，但是调用时，setTimeout等3秒后调用
(2). 数组的every方法：用于检测数组中的元素是否全部符合条件
arr.every(function(el,i,arr){
    
    要检测的条件})
检测条件函数由自己定义，但是调用情况我们不知道

2. Overload

2.1. What is overloading

Multiple functions with the same name, but with different parameter lists, can be automatically selected according to the actual parameters passed in when calling, and the corresponding function is overloaded, which can reduce the number of functions and reduce the burden on the caller

Focus on it~

2.2. Js does not support overloaded syntax of other languages

i. Because Js does not allow multiple functions with the same name to exist at the same time

ii. If multiple functions with the same name are defined at the same time, the last function with the same name will overwrite all previous functions with the same name

2.3. Realize overloading with the aid of arguments object

(1). Only define a function, and do not define formal parameters

(2). Each function has an arguments object

a.arguments object is an array-like object that specifically receives all the argument values ​​of the passed function

b. Array-like objects:

i. There is a subscript and a length attribute;

ii. It is an object type, not an array type, and cannot call an array type function

c. When there is an uncertain number of actual parameter values ​​of a function, you must use arguments instead of the formal parameter list

d. Use:

i. No need to create, use directly

ii. Obtain the actual parameter value: arguments[i]

iii. Get the number of actual parameters: arguments.length

e. In the function to be implemented, judge whether the number of actual parameters or the content of the actual parameters in arguments is different, to dynamically execute the corresponding logic

2.4. Examples of native function overloading:

arr.splice()
(1)删除元素
arr.splice(i,删除的元素个数)
(2)插入新元素
arr.splice(i,0,新值1,新值2...)
(3)替换元素
arr.splice(i,替换的元素个数,新值1，新值2...)