JS函数详解（转载）黎小小咩~

函数的基本概念、声明及调用；函数作用域、作用域链、闭包；this指向及修改和绑定this指向等。

1.函数概念，声明及调用

JS中的函数：把一段需要重复使用的代码，用function语法包起来，方便重复调用，分块和简化代码。复杂一点的，也会加入封装、抽象、分类等思想。

声明方式：严格意义上两种方式，但还有匿名函数

方式一：

`function 方法名(){

//要执行的代码

}`

方式二：ES6中声明方式箭头函数，()=>{}

方式三：匿名函数，将函数存到变量里 var func = function(){};

函数调用：两种方式调用

调用方式一：名字(); 函数可以多次调用

`//函数声明

function fn(){
console.log(1);
}

//函数的调用

fn();`

调用方式二：在事件中调用，直接写函数名，不使用括号

`//函数声明

function fn(){
console.log(1);
}

//函数在事件中的调用

document.onclick = fn;`

2.函数表达式（匿名函数）

函数表达式：就是把函数存到变量里。

匿名函数：没有名字的函数；

匿名函数在使用时只有两种情况：

匿名函数自执行：声明后不需要调用就直接执行

(function(){

console.log("匿名函数自执行");

})();

函数表达式：把函数存到变量，或将函数存到数组的对应位置里等，调用时通过变量或数组对应位置进行调用。调用时需要写括号。

//2，函数表达式：把函数存到变量或数组等里，调用时通过变量进行调用

var fn = function(){
console.log("函数表达式：将函数存到变量里");
};

fn();

//调用时需要写括号

//2，函数表达式：把函数存到数组第0位，调用时通过数组第0位进行调用

var arr = [];

arr[0] = function(){
 console.log("函数表达式：将函数存到数组的对应位置");
 
};

arr0;

//调用时需要写括号要写括号

结果：

事件函数扩展：给元素添加事件的说法是不正确的。事件时元素本身就具有的特征，只是触发事件后，默认没有相关的一些处理。这种操作其实就是给元素的某个事件添加一个事件处理函数。当事件被触发后，判断到属于该事件类型，就触发该事件函数的处理函数。

可以通过console.dir()把对象的所有属性和方法打印出来，查看对象或元素本身具有的事件。

   //事件时元素本身就具有的特征，只不过，触发事件后，默认没有相关的一些处理。事件函数其实就是给元素的某个时间添加一个事件处理函数。
   
   //可以通过console.dir()把对象的所有属性和方法打印出来
   
   document.onclick = function(){
   
       console.log("事件的处理函数");
       
   };
   
   //当被触发后，判断到属于该事件类型，就触发该事件函数的处理函数
   
   if(typeof document.onclick == "function"){
   
     document.onclick();
     
   }

结果：

3.函数传参

获取元素，最好从父级元素获取，全部从document中获取，可能会出现混乱。

形参：形式上的参数——给函数声明一个参数；

实参：实际的参数——在函数调用时给形参赋的值

function func(形参1,形参2){
//函数执行代码
}

func(实参1,实参2);//调用时传参

什么时候使用到传参？当有两段代码本身的功能极其相似，只有个别地方不一样时，就可以把两段代码合并成一个函数，然后把两段代码中不一致的内容通过传参传进去。

4.函数的不定参（可变参）—关键字arguments

案例：购物车商品累计。事先不知道用户买多少商品

不定参（可变参）使用关键字：arguments，代表所有实参的集合。通过下标获取参数的每一位；通过length获取实参的个数；

集合是类数组，可以使用下标，但是没有数组中的各种方法

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>可变参（不定参）：arguments</title>

<script>

    //arguments 代表所有实参的集合（类数组），可以通过下标获取各个实参，通过length获取集合长度
    function args(){
        console.log(arguments);
        console.log("arguments的各个参数为：");
        for (var i = 0; i < arguments.length; i++) {
            console.log(arguments[i]);
        }
    } 
    
    args(23,45,999,10.90,"can","不定参");
</script>

结果：

5.函数返回值

函数返回值即函数执行之后的返回结果。

所有函数都会有函数返回值即函数执行后一定会返回一个结果，如果没有定义默认返回undefined；
在函数中，return后定义返回值；
在函数中，return之后的代码就不会再执行了
return只能用于函数中，用在其他地方会报错

结果：发现return后的代码没有继续执行