【12-03】函数（下）

一、预解析（重点）

预解析：提前解释代码

1、浏览器内核：渲染引擎（解释html和css）和js引擎（解释性语言，从上向下一行一行解释说明）

2、js引擎在执行js代码的时候，把var 和function提升到当前作用域的最顶端变量提升的只是声明部分

3、函数提升(提升的声明式 ===》 function fn(){})，提升函数整体

【注】函数提升优先于变量提升。

 

---

 二、作用域

作用域：一段代码生效的范围

 1. 全局作用域：

     1.1 位置：变量定义在script标签内，函数外部的区域，具有全局作用域，拥有全局作用域的变量可以在任何地方访问到

     1.2 生命周期： 打开一个页面就产生了一个全局作用域，页面关闭，全局作用域就销毁（抽象的概念）

     1.3 注意：全局作用域中有一个叫window的对象，可以直接访问的

2. 局部作用域(函数作用域)

     2.1 位置：定义在函数内部，拥有局部作用域，变量只能函数内部访问，函数外部访问不到

     2.2 生命周期：局部作用域在函数调用时产生，函数调用结束销毁

     2.3 注意：只有定义在函数内部的变量拥有局部作用域，在if(){}或者for(){}没有局部作用域

---

三、变量的访问规则

变量的访问规则：先访问当前作用域下有没有定义变量，没有的话向上查找。

 变量的赋值规则：先访问当前作用域下有没有定义变量，有的话，就给当前作用域的变量赋值，没有的话，向上查找。

 

---

四、函数嵌套的调用

---

五、递归

1、在函数内部直接或者间接的调用函数本身。

2、递归需要有出口，没有出口就形式死递归(Maximum call stack size exceeded : 栈溢出)。

终止函数：return;

终止循环：break;

3、利用递归实现阶乘 

5的阶乘

    // 5! = 5*4!

    // 4!=  4*3!

    // 3! = 3*2!

    // 2! = 2*1!

    // 1! = 1

    // 求n!

---

六、函数和事件的结合使用

事件：    // onclick ：点击事件

               // onmouseover：鼠标移入事件

               // onmouseout：鼠标移出事件

1、行内写法的方式：（不建议）

        1.1再body里输入下面的内容（<button οnclick="fn()">点我点我</button>）

        1.2然后再script里输入

        function fn() {

            alert(1)

        }

2、DOM的方式

2.1先获取到这个按钮（获取body里的 <button id="btn">点我点我</button> ）

        var oBtn = document.getElementById('btn');

 2.2给这个按钮绑定一个事件。    

        oBtn.onclick = function () {

            alert(1)

         }

    2.3 如果要用 oBtn.onclick = fn; 那么上面必须写 function fn() { alert(1) }

    2.4 如果用 oBtn.onclick = function () { alert(1) } ，那么上面不用写 function fn() { alert(1) }

    2.5 oBtn.onclick = function () { alert(1) } 等价于 oBtn.onclick = fn;