JS中的函数浅析

函数的定义

有函数声明和函数表达式两种

函数声明

使用function关键字，基本格式如：

function  函数名称(可选参数1,可选参数2,可选参数3,){

}
复制代码

函数定义完之后，并不会自动执行，需要调用才可以执行函数中的代码

函数的调用很简单：函数名(参数)，核心就是小括号，如图：

一些细节：

• 定义函数，需要关键字function，关键字之后和函数名需要空格;
• 函数名称，和定义变量时规则是一样的，如下： 大小写区分的，在定义普通函数（目前所学的阶段），首字母使用小写，如果有多个单词，仍然遵循小驼峰命名法则;
• 函数名不要以数字开头，可以使用一些特殊符号，如下划线;
• 函数名称后面是小括号，必不可少，用来装载形式参数的;
• {}就是函数体，不能少;

函数表达式

细节：

• 将function整体，放在赋值运算符的右边，作为表达式来使用。
• 通过一个变量来引用当前的function，便于后续的调用。
• 函数名称可以加上，但是只对函数内部起作用，如图：

函数的调用及返回值

关于函数调用，只需要使用小括号就可以了。

关于函数返回值

实际上，在js开发中，我们调用一个函数，往往是需要通过它的处理，得到一个具体的结果。

如果是我们自己定义的函数呢？

此时，我们需要显式的返回一个值。使用return 关键字即可。

对于没有使用return的时候，我们可以这么理解，在一个函数当中，最后一定会有一个return 语句，默认的是 return undefined。

函数要返回多个值，可以把多个值放到一个容器中,例如：数组   对象。

return 只能出现在函数中，不要写到函数外面去了 。

函数参数

在定义函数和调用函数时，涉及到两种参数：

• 形式参数，简称为形参，在定义的时候指定的参数，表示要传入什么样的值;

• 实际参数，简称为实参，在调用的时候出入的实际参数，具体的某个值;

  
  参数的传递：

• 基本数据类型的数据（值传递）

  就是把栈区的数据copy一份给了形参，形参和实参是一个独立一个内存空间。改变形参，实参是没有影响。

• 引用数据类型的数据（引用传递）

  就是把栈栈区的地址copy一份给了形参，形参和实参同时指向堆区同一个内存空间。 通过形参改变堆区内存空间的数据，实参这个地址应对的数据也会发生改变。

  基本数据类型

引用数据类型

例：

    let a = [1];
    function f(a){
        a[100] = 3;
        a = [1,2,3];
    }
    f(a);
    console.log(a); 
复制代码

解析：

,注意：调用处的a和 function f(a)中的a 是不同的，一个是实参，一个是形参；而在函数内部的 a[100] = 3,是把实参a的第101个位置给3， a = [1,2,3] 是把数据[1,2,3]赋值给形参a。 输出：

函数是另一个函数的参数

第一种写法

<!--定义一个函数，计算两个数的和-->
function add(x,y){
    return x + y;
}
<!--定义一个函数，计算两个数的差-->
function sub(x,y){
    return x- y;
}
function compute(f,a1,a2){
    return f(a1,a2);
}
var rs = compute(add,1,2);
console.log(rs);
var rs = compute(sub,1,2);
console.log(rs);
复制代码

分析：首先定义了两个函数，分别计算两个数的和与差;

compute(add,1,2)是函数的调用处，add是实参，只不过这个实参是一个函数，1,2也是实参;
然后分别把实参传给形参compute(f,a1,a2)中的f,a1,a2;因为f此时是一个函数,所以会返回return f(a1,a2),
然后再把a1,a2的值传递给x,y;然后执行函数，return x + y(这时可以当做3),把3返回给f(a1,a2)(3);
最后f(a1,a2)返回到函数调用处compute(add,1,2),打印出数值。

第二种写法

这是函数表达式写法

let add = function(x,y){
            return x + y;
        }
        let sub = function(x,y){
            return x - y;
        }
         function compute(f,a1,a2){
            return f(a1,a2);
        }
        console.log(compute(add,1,2));
        console.log(compute(sub,1,2));
复制代码

第三种写法,也是最常用的写法

 function compute(f,a1,a2){
        return f(a1,a2);
    } 
     let rs = compute(function(x,y){
        return x + y;
    },1,2);
    console.log(rs); 
复制代码

Arguments对象

arguments 是一个类似数组的对象, 对应于传递给函数的参数。

函数调用的过程就是实参向形参赋值的过程。实参会复制一份给形参。
除了复制一份给形参外，它会给arguments一份。
arguments中收集了实参。 
arguments只是函数内部的属性（类数组）， 在函数外面是不能访问的。
arguments和形参这间有一一对应的关系：
    当形参改变了，那么arguments里面的数据也会改变
    当改变了arguments里面的数据，形参也会发生改变
什么时候使用形参，什么时候使用arguments？
    1，当实参非常多时，写一堆的形参来接收，不方便，此时你就可以使用arguments
    2，当实参有特殊含义时，需要有一个特殊的标识，就可以使用形参来标识。
复制代码

箭头函数

作用：简化函数的定义，让我们写函数时更加的方便，快捷。

function f(a,b){
    return a + b;
}
复制代码

可以简写为：

let f = (a,b)=>{
    return a + b;
}
复制代码

特点：
1.去掉function关键字，用=>来代替，

2. 如果形参只有一个，()可不写 只有一个形参时,()才能省,其它情况都不省;

let f = (a)=>{
         console.log(a)
     }

可以改写为：

 let f = a=>{
         console.log(a)
     }
     f(2)
复制代码

3. 如果函数体只有一条语句，{}也可以省，return也需要省。

let f = (a)=>{
         return a;
     }

可以改写为：

let f = (a)=>a;
     console.log(f(2))
复制代码

转载于:https://juejin.im/post/5d306daae51d45775c73dd97