Js中的函数相关：创建函数的三种方式、函数的形参和实参、返回值、return、break、continue的区别、重载和arguments、匿名函数、回调函数

Js中的函数相关：创建函数的三种方式、函数的形参和实参、返回值、return、break、continue的区别、重载和arguments、匿名函数、回调函数

0.前言

0.1. 声明提前(hoist)：在程序开始执行前，Js引擎会将var声明的变量和function声明的函数，提前到当前作用域的顶端集中创建，但是赋值留在原地。

0.2. 函数其实也是一个对象，只不过内部存的不是数据，而是代码段。

0.3. 函数名仅仅是一个普通变量，函数名通过保存函数对象的地址，来引用着函数对象。调用函数名时，实际上是让引擎找到函数名变量引用的函数对象，按照函数对象中保存的代码段，执行程序。

0.4. function 其实是new Function的简写，所以程序每执行一次function，都等效于一个new Function,都会创建一个新函数对象。

1. 函数

1.1. 定义：

函数是保存一段可重用代码段的程序结构，并且给这段程序结构再起一个名字。

1.2. 作用：

实现代码的重用，避免重复编码。

1.3. 应用场景：

只要一段代码，可能被多次使用，必须封装成一个函数，再反复调用。

1.4. 定义函数（3种方式）

(1). 用声明方式创建

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

(2). 用赋值方式创建

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

(3). 用new方式创建

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

1.5. 函数的形参和实参

1.5.1. 函数的形参

(1). 形参是专门接收函数执行时必须的参数的变量。

(2). 一个函数，自身缺少一些数据，需要外部提供数据才能正常执行，就需要定义成形参。

在数学中我们有 y=2x+1,这里的x就相当于是一个形参，把x的实际值代入函数时，

函数会根据自己定义好的算法进行计算出函数值y

(3). 形参虽然没有var，但也属于局部变量。

1.5.2. 函数的实参

调用函数时用于执行本次函数算法的实际值

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

1.6. 函数的返回值

(1). 函数的返回值是一个函数的执行结果

(2). 如果调用一个函数希望获得函数的执行结果，进行后续操作，函数中必须定义返回值：return 返回值；

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. 匿名函数

1.7.1. 定义：

创建函数时不指定函数名的函数就是匿名函数

1.7.2. 优点：

节约内存，用完就自动释放

1.7.3. 使用场景：

一个函数只使用一次，必须用匿名函数

1.7.4. 使用：

(1)回调函数

i.回调函数几乎都是匿名函数

ii.回调函数都是为主函数量身定制的，回调函数用完应该和主函数一起释放

(2)匿名函数自调

创建一个匿名函数后，立刻调用自己，所有Js代码都应该包裹在一个匿名函数中，避免了使用全局变量，避免全局污染

标准写法：

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

注意：两个匿名函数自调前后的分号不要省略

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

1.8. 回调函数

回调函数，是一种我们只负责定义，不负责调用，而交给其他函数内部去自动调用的函数。
回调函数举例：

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

2.重载(overload)

2.1. 什么是重载

多个同名的函数，但是形参列表不同，在调用时，可自动根据传入实参的不同，选择执行对应的函数就是重载，能够减少函数的个数，减轻调用者的负担

划重点啦~

2.2. Js中不支持其他语言的重载语法

i. 因为Js不允许多个同名函数同时存在

ii.如果同时定义多个同名函数，最后一个同名函数，会覆盖之前所有同名函数

2.3. 借助arguments对象实现重载

(1). 只定义一个函数，且不要定义形参

(2). 每个函数内都有一个arguments对象

a.arguments对象是一个专门接收传入函数的所有实参值的类数组对象

b.类数组对象：

i. 有下标，有length属性；

ii. 是对象类型，不是数组类型，无法调用数组类型的函数

c.当有一个函数的实参值个数不确定，就必须使用arguments代替形参列表

d.使用：

i.无需创建，直接使用

ii.获得实参值：arguments[i]

iii.获得实参个数：arguments.length

e.在要实现的函数内，判断arguments中的实参个数或实参内容不同，来动态执行对应的逻辑

2.4. 原生函数重载举例：

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