什么是函数？

函数是封装一段代码段的对象
函数名其实仅是引用函数对象的一个普通变量

为什么使用函数？

代码重用

何时使用函数？

只要一项任务被反复使用，就要定义为函数，反复使用函数

那么，如何进行创建函数呢？创建函数有3种方法：

1.声明：

function 函数名(参数列表){
    函数体;
    return 返回值;
}
//需不需要返回值，就要看函数调用者要不要这个返回结果

• 问题：

hoist:声明提前,打乱了正常的程序顺序！
如何解决声明提前？用第二种解决声明提前！

Paste_Image.png

ex:声明提前（hoist）
    console.log(a);//undefined
    var a=10;
    console.log(a);//10
    function fun(){
        console.log(1);
    }
    fun();//2
    function fun(){
        console.log(2)
    }
    fun();//2
    
/*为什么会出现两个输出结果都是2呢？
因为出现了声明提前，把1调到程序顶部后又把2调到了顶部，
输出只输出最后边的值。*/

2.直接量：var 函数名=function (参数列表){……}

优点：不会被声明提前！

函数的本质：函数其实就是一个引用类型的对象，和数组一样。不同的是，数组中存的值，函数中寸的是代码。就像冰箱和菜谱一样的，冰箱存的菜。而菜谱存的是做菜的方法。

• function:创建一个新函数的意思
• 函数名其实就是一个引用

ex:声明提前解决！！！
console.log(a);//undefined
    var a=10;
    console.log(a);//10
     var fun=function fun(){
        console.log(1);
    }
    fun();//1
    var fun=function fun(){
        console.log(2)
    }
    fun();//2

3.用new：（了解）

var 函数名=new Function("参数变量",…,"函数体")

var cmp=new Function(a,b,"return a-b")                  错误的！
var cmp=new Function("a","b","return a-b")               正确！ 

重载（arguments只在重载的时候使用！）

什么是重载：相同函数名，不同参数列表的多个函数。在调用时，根据传入参数的不同，自动选择对应的函数执行。
为什么：减少函数的个数，减轻调用者的负担
何时：今后，只要一项任务，根据不同的参数，有不同实现逻辑时。

问题：JS中默认不支持重载！！！！！

原因：JS中不允许多个同名函数同时存在！如果存在多个同名函数，只识别最后一个函数。
解决：用arguments(参数们)对象
什么是arguments？arguments就是函数中自动创建的。
自动接收所有传入函数的参数值的类数组对象(object like array)。

类数组对象(object like array):长的像数组一样的对象。
类数组对象 vs 数组对象（鄙视题）

• 相同：都可以下标访问每个元素。都有类似属性。但是类数组对象不能使用数组的任何API。Arguments在调用函数时会在函数函数内部自动创建，
• 类型不同：类数组对象的父类型是Object 数组对象的父类型是Array
  导致类数组对象无法使用数组类型的方法
  类数组对象 to Array：固定套路：
  var arr=Array.prototype.slice.apply/call(arguments);

• 相同点：
  1、下标
  2、.length
  3、for 遍历
• 不同：类型不同！API不通用！

何时？只要函数的参数个数不确定时，都可用arguments接住所有参数值。

问题：今后还需不需要参数？
参数的作用：
1.提醒调用者，如何正确使用函数！
2.一般自定义的参数名，都是见名知意，且都非常简单。
所以函数首先先用参数变量来接受参数值，而不是arguments，只在重载的时候使用arguments。

ex:使用arguments代替重载
function pay(){
    //arguments：[        ].length
    //            0  1  2
    if(arguments.length==0){
    console.log("手机支付：扫码");
    }else if(arguments.length==1){
    console.log("现金支付");
    }else{
    console.log("刷卡结账");
    }
}
pay(100,100);//现金支付

---

匿名函数

什么是匿名函数：匿名函数是指在创建函数时不使用函数名的函数。
为什么：节约内存，划分临时作用域。
何时：
1.如果一个函数只使用一次时
2.如果避免使用全局变量，划分临时作用域时

• 如何使用2种：
  -1.回调（绝大多数的回调都是使用匿名函数）：将一个函数，交给另一个函数去调用。

回调函数（3种）
1、sort比较器
2、str.replace高级替换
3、事件处理函数

ex:sort比较器
    var arr=[1,2,122,2,23,233];
    function cmp(a,b){return a-b;}
    arr.sort(cmp);
//[1, 2, 2, 23, 122, 233]

• 自调：创建函数后，立刻调用自己
  为什么：避免使用全局变量
  何时：今后几乎所有的JS程序，都应该放在匿名函数自调中
  如何自调：(function(参数列表){函数体})();

---

作用域(scope)

什么是：一个变量的可用范围——（用途）
作用域其实就是一个存储变量的对象——（本质）
为什么：避免不同范围的变量间互相干扰。
包括（2种）：
1.全局作用域：不属于任何函数的外部的范围
全局变量：可反复使用且随处可用
2.函数作用域：函数内的范围
其实：活动对象active object（AO）
局部变量：仅函数内可用，不可反复使用！

作用域链（scope chain）

由多级作用域，连续引用形成的链式结构
存储了所有变量
控制变量的使用顺序：先局部，后全局。

函数的生命周期：(4步)
1、开始执行程序前
创建执行环境栈（ECS）：保存正在调用的函数记录
首先先自动调用浏览器主程序main()
主程序创建全局作用域对象window

1_程序开始执行前.png

2、定义函数时
在window中用函数名创建全局变量
window外创建函数对象，保存函数定义
函数名变量引用函数对象
函数对象的scope属性指回函数来自的作用域对象

2_定义函数时.png

3、调用函数时
在ECS中压入当前函数的调用记录
为本次函数调用创建活动对象AO
AO中保存局部变量
让AO指向函数的scope属性指向相同对象window
变量的使用顺序：优先用AO中的局部变量，AO中没有才去window找

3_调用函数时1.png 4_调用函数时2.png

4、函数调用后

5_调用函数后.png

---

闭包

什么是闭包：即重用变量，又保护变量不受污染的一种机制

为什么用闭包？
全局变量：优点：可以重用！缺点：污染，随处可用！
局部变量：优点：仅函数内可用，且不会污染全局！缺点：不可重用！

何时：只要即重用一个变量，又保护变量不受污染时

闭包形成的原因：外层函数的作用域对象无法释放，被内层函数对象引用着

如何使用闭包：3步：

1.用外层函数包裹要保护的变量和操作变量的函数
2.外层函数将内层函数的对象返回外部
3.使用者调用外层函数，获得内层函数对象

    //第一步，用外层函数包裹受保护的变量和内层函数
    function outer(){
        var i=1;
    //第二步，外层函数将内层函数返回外部
        return function(){
            console.log(i++);
        }
    }
    //第三步，使用者调用外层函数获得内层函数的对象
        var getNum=outer();
        getNum();
        getNum();
        i=1;//无法对函数内的i进行修改，故无效
        getNum();
        getNum();
    //控制台输出：1,2,3,4

简图: 2步:

1. 找受保护的变量，并确定其最终值
2. 找使用变量的内层函数对象，只有内层函数才能使用受保护的变量

闭包缺点: 比普通函数占用更多内存空间！

解决: 闭包不再使用，要及时释放
如何释放: 将引用内层函数对象的变量赋值为null

ex:闭包例题：自报按钮序号
<button>click me!</button>
<button>click me!</button>
<button>click me!</button>
<button>click me!</button>
<button>click me!</button>
<script>
    var btns=document.getElementsByTagName("button");
    for(var i=0;i<btns.length;i++){
        btns[i].onclick=(function(){
        var index=i+1;
        return function(){
            alert("我是第"+index+"个");
        }
    })();
}