js第五天---函数的作用域、预解析、定义、嵌套调用、递归、与事件的关系

     作用域：一段代码生效的范围
     1. 全局作用域：
     1.1 位置：变量定义在script标签内，函数外部的区域，具有全局作用域，拥有全局作用域的变量可以在任何地方访问到
    // 1.2 生命周期： 打开一个页面就产生了一个全局作用域，页面关闭，全局作用域就销毁（抽象的概念）
    // 1.3 注意：全局作用域中有一个叫window的对象，可以直接访问的
    // 2. 局部作用域(函数作用域)
    // 2.1 位置：定义在函数内部，拥有局部作用域，变量只能函数内部访问，函数外部访问不到
    // 2.2 生命周期：局部作用域在函数调用时产生，函数调用结束销毁 
    // 2.3 注意：只有定义在函数内部的变量拥有局部作用域，在if(){}或者for(){}没有局部作用域

    // js:10天 

    // var x = 10;
    // function fn() {
    //     var y = 10;
    //     console.log(x);
    // }
    // fn();
    

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

    // var x = 10;
    // function fn(){
    //     var x = 20;
    //     console.log(x); //20
    // }
    // fn();
    // console.log(x);//10

    // 变量的赋值规则:
    //    先访问当前作用域下有没有定义变量，有的话，就给当前作用域的变量赋值，没有的话，向上查找
    // var a = 10;
    // function test() {
    //     var a;
    //     a = a - 3;
    //     a = 20;
    // }
    // test();
    // console.log(a);
 

    预解析：提前解释代码

     浏览器内核：渲染引擎（解释html和css）和js引擎（解释性语言，从上向下一行一行解释说明）
                js引擎在执行js代码的时候，把var 和function提升到当前作用域的最顶端
                变量提升的只是声明部分
                函数提升(提升的声明式 ===》 function fn(){})，提升函数整体

                函数提升优先于变量提升

     console.log(a);
     var a = 10;
     =======等价于下面==================

     var a;
     console.log(a)
     a = 10;;

    

   

定义函数的二种方式
     getN();
     function getN(){
         console.log(1);
     }

     getN();
     var getN = function () {
         console.log(1);
     }

   

函数的嵌套调用
   function print(){
       getN()
       getS();
       getK();
   }

   print();

    function getN() {
        console.log("n");
    }

    function getS() {
        console.log('s');
    }

    function getK(){
        console.log('k');
    }
 

    递归：在函数内部直接或者间接的调用函数本身
            递归需要有出口，没有出口就形式死递归(Maximum call stack size exceeded : 栈溢出)

     终止函数：return;
     终止循环：break;
    var n = 0;
    function getN() {
        n++;
        if (n == 10) {
            return;
        }
        console.log(n);
        getN();
    }
    // getN();

    // 利用递归实现 5!
    // 5! = 5*4!
    // 4!=  4*3!
    // 3! = 3*2!
    // 2! = 2*1!
    // 1! = 1
    // 求n!

    function diGui(n) {
        var res;
        if (n == 1) {
            res = 1;
        } else {
            res = n * diGui(n - 1);
        }
        return res;
    }

    
    console.log(diGui(5));   //计算的是5的阶乘

    
   函数与事件的关系
 

<!-- 行内式 -->

        <!-- <button οnclick="fn()">点我一下的按钮</button> -->

        <!-- dom方式操作 -->

        <button id="btn">点我一下的按钮</button>

<script>

    事件：

    onclick ：点击事件

     onmouseover：鼠标移入事件

     onmouseout：鼠标移出事件

     fn();//刷新页面即执行

     function fn() {

        alert(1)

     }

     DOM的方式

     1、先获取到这个按钮

    var oBtn = document.getElementById('btn');//通过id的方式找到元素

     2. 给这个按钮绑定一个事件   oBtn.onclick = fn;

    oBtn.onclick = function () {

        alert(1)

    }

</script>