五十二、JavaScript——函数简介

一、函数

•  函数（Function)

                - 函数也是一个对象

                - 它具有其他对象所有的功能

                - 函数中可以储存代码，且可以在需要时调用这些代码

           

            语法：

                function 函数名（）{

                    语句。。。

                }

           

•             调用函数

                - 调用函数就是执行函数中存储的代码

                - 语法：

                    函数对象（）

•             检查函数对象

                - 使用（typeof 函数名）

                - 注意： 函数名不要加括号 ：（typeof fn）即可

• 函数创建 

        语法：

                function 函数名（）{

                    语句。。。

                }

 

•       调用函数

                - 调用函数就是执行函数中存储的代码

                - 语法：

                    函数对象（）

 

•             检查函数对象

                - 使用（typeof 函数名）

                - 注意： 函数名不要加括号 ：（typeof fn）即可

<script>
        /*
            函数（Function)
                - 函数也是一个对象
                - 它具有其他对象所有的功能
                - 函数中可以储存代码，且可以在需要时调用这些代码
            
            语法：
                function 函数名（）{
                    语句。。。
                }
            
            调用函数
                - 调用函数就是执行函数中存储的代码
                - 语法：
                    函数对象（）

            检查函数对象
                - 使用（typeof 函数名）
                - 注意： 函数名不要加括号 ：（typeof fn）即可
        */

        //创建一个函数对象
        function fn(){

            //语句
            console.log("你好！")
        }

        // console.log(fn)

        fn()
        fn()

        console.log(typeof fn)




    </script>

 五十三、JavaScript——函数的创建方式

一、函数的创建方式

• 函数的定义方式

                1.函数声明

                    function 函数名([参数]){

                        语句。。。

                    }

                2. 函数表达式

                    const 变量 = function(){

                            语句。。。

                    }

                3. 箭头函数

                    () => {

                            语句。。。

                    }

                    - 只有一个语句的时候，大括号可以省略不写

 

 <script>
        /*
            函数的定义方式
                1.函数声明
                    function 函数名([参数]){
                        语句。。。
                    }

                2. 函数表达式
                    const 变量 = function(){
                            语句。。。
                    }

                3. 箭头函数
                    () => {
                            语句。。。
                    }
                    - 只有一个语句的时候，大括号可以省略不写
        */

        //函数声明
        function fn(){
            //语句
            console.log("函数声明定义的函数")

        }

        fn()
        console.log("函数声明中函数的类型"+typeof fn)

          //函数声明
        const fn2 = function fn(){
            //语句
            console.log("函数表达式")
        }
        fn2()
        console.log("函数表达式中函数的类型"+typeof fn2)

        const fn3 = () => {

            console.log("箭头函数")
        }
        fn3()
        console.log("箭头中函数的类型"+typeof fn3)

        //只有一个语句的时候，大括号可以省略不写
        const fn4 = () => console.log("只有一条语句时大括号可以省略")

        fn4()
        console.log("箭头中函数的类型"+typeof fn4)


    </script>

五十四、JavaScript——参数简介

一、参数简介

•             参数

                - 在定义函数时，可以在函数中执行数量不等的形式参数（形参）

                - 在函数中定义参数，就相当于在函数内部声明了对应变量但没有赋值

           

•             实际参数

                - 在调用函数时，可以在函数的()中传递数量不等的实参

                - 实参就会赋值给对应的形参

                - 参数

                    1. 如果实参和形参数量相同，则对应的实参赋值给对应的形参

                    2. 如果实参多于形参，则多余的实参不会使用

                    3. 如果形参多于实参，则多余的形参为undefinded

•              参数类型

                    - JS中不会检查参数的类型，可以传递任何类型的值作为参数

 

            1.函数声明

                    function 函数名([参数]){

                        语句。。。

                    }

                2. 函数表达式

                    const 变量 = function([参数]){

                            语句。。。

                    }

                3. 箭头函数

                    ([参数]) => {

                            语句。。。

                    }

                    - 只有一个语句的时候，大括号可以省略不写

 

<script>
        /*
            定义一个可以求任意两个数和的函数
        */

        // function sum(){
        //     console.log(1+1)
        // }

        // sum()

        // const sum2  = function(){
        //     console.log(1+1)
        // }

        // sum2()

        // const su3 = () => console.log(1+1)

        // sun3()


        /*
            参数
                - 在定义函数时，可以在函数中执行数量不等的形式参数（形参）
                - 在函数中定义参数，就相当于在函数内部声明了对应变量但没有赋值
            

            实际参数
                - 在调用函数时，可以在函数的()中传递数量不等的实参
                - 实参就会赋值给对应的形参
                - 参数
                    1. 如果实参和形参数量相同，则对应的实参赋值给对应的形参
                    2. 如果实参多于形参，则多余的实参不会使用
                    3. 如果形参多于实参，则多余的形参为undefinded

                - 参数类型
                    - JS中不会检查参数的类型，可以传递任何类型的值作为参数



            1.函数声明
                    function 函数名([参数]){
                        语句。。。
                    }

                2. 函数表达式
                    const 变量 = function([参数]){
                            语句。。。
                    }

                3. 箭头函数
                    ([参数]) => {
                            语句。。。
                    }
                    - 只有一个语句的时候，大括号可以省略不写
        */


        //定义函数传入形参
        function fn(a,b){

            console.log(a + b)
        }

        //调用函数传入实参
        fn(1,10)


        //可以传递任何类型的参数
        fn(true,"张三")
    </script>

五十五、JavaScript——箭头函数的参数和默认参数

一、箭头函数的参数和默认参数

• 当箭头函数中只有一个参数时，可以省略（）

• 定义参数参数时，可以为参数指定默认值，有实参传实参， 没实参传默认值

 

 <script>


    //
    const fn = (a, b) =>{

        console.log("a="+a);

        console.log("b="+b);

    }

    // 当箭头函数中只有一个参数时，可以省略（）
    const fn2 = a => {
        console.log("a="+a)
    }

    fn2(123)



    // 定义参数参数时，可以为参数指定默认值
    // 有实参传实参， 没实参传默认值


    const fn3 = (a=10,b=29,c=22) => {

        console.log("a="+a)
        console.log("b="+b)
        console.log("c="+c)
        
    }

    //只传2个实参，第三个会使用默认值

    fn3(1,2)

    </script>

五十六、JavaScript——使用对象作为参数

一、对象作为参数传递

• 对象可以作为参数传递

 

 <script>


        function fn(a){

            console.log("a=",a)  

            console.log(a.name)  //打印 "张三"
        }

        // 对象可以作为参数传递
        let obj = {name:"张三"}

        fn(obj)   // 打印 a= {name: '张三'}

</script>

• 修改对象时，如果有其他变量指向该对象，则所有指向该对象的而变量都会收到影响
• a.name = "李四“

 

 <script>

 function fn(a){ 

            a.name = "李四"  // 修改对象时，如果有其他变量指向该对象，则所有指向该对象的而变量都会收到影响

            console.log(a.name)  //打印 "李四"
        }

        // 对象可以作为参数传递
        let obj = {name:"张三"}

        fn(obj)   

        console.log(obj)

</script>

• 修改变量时，只会影响当前变量，开辟了一个新的空间，
• a = { }

 

 <script>

        function fn(a){ 

             a = {}  //修改变量时，只会影响当前变量，开辟了一个新的空间，

            a.name = "李四"  // 修改对象时，如果有其他变量指向该对象，则所有指向该对象的而变量都会收到影响

            console.log(a.name)  //打印 "李四"
        }

        // 对象可以作为参数传递
        let obj = {name:"张三"}

        fn(obj)   

        console.log(obj)  //打印张三

</script>

• 有默认值时先每次调用时会重新创建默认值，创建新的对象，
• 两次调用并不是同一个对象，第二次调用相当于又内存中又新开辟了一个空间来存储对象

• function fn(a = {name:"张三"})  默认值 张三

 

     <script>


        function fn(a = {name:"张三"}){ 

           console.log("a= ",a)

            a.name = "李四"  // 修改对象时，如果有其他变量指向该对象，则所有指向该对象的而变量都会收到影响

            console.log("a= ",a)  //打印 "李四"
        }

        


        //两次调用
        fn()

        fn()



        // 传递实参时，传递的并不是变量本身，而是变量中存储的值
        
    </script>

• function fn(a = fun) 
• a 和 fun 指向同一个 对象，如果对象的值被修改了，那么影响就会一直持续下去，导致后面指向该对象的变量的值全部被修改

 

        
    <script>
        let fun = {name:"张三"}
        

        // 每次调用共用一个对象
        function fn(a = fun){ 

           console.log("a= ",a)

            a.name = "李四"  

            console.log("a= ",a)  
        }

        


        //两次调用
        fn()

        fn()



        // 传递实参时，传递的并不是变量本身，而是变量中存储的值
        
    </script>

 五十七、JavaScript——函数作为参数

一、函数作为参数

• 在JS中，函数也是一个对象（一等函数）

                  - 别的对象能做的事，函数也可以

  <script>
        function fn(a){
            console.log("a=",a)
        }

        /*
            在JS中，函数也是一个对象（一等函数）
                - 别的对象能做的事，函数也可以
        */

        function fn2(){

            console.log("我是fn2")
        }


        //把fn2函数作为参数，传入函数中
        fn(fn2)


        fn(() =>console.log("我是箭头函数"))

    </script>

 五十八、JavaScript——函数的返回值

一、函数的返回值

• 在函数中，可以通过return关键字来指定函数的返回结果

                      返回值就是函数的执行结果，函数调用完完毕返回值便会作为结果返回

•   任何值都可以作为返回值使用（包括对象和函数之类）

• 如果return后不跟任何值，则相当于返回undefined

 

   <script>

        // function sum(a,b){
        //     console.log(a + b)
        //     //计算完成之后，将计算的结果返回而不是直接打印
        // }

        // sum(123,111)

        let sum = ""
        function fu(a,b){
            /*  
                在函数中，可以通过return关键字来指定函数的返回结果
                    返回值就是函数的执行结果，函数调用完完毕返回值便会作为结果返回\
                    
                任何值都可以作为返回值使用（包括对象和函数之类）
                如果return后不跟任何值，则相当于返回undefined
                
            */
            sum = a +b
            return sum
        }

        fu(111,222)

        console.log("sum="+sum)


    </script>

 五十九、JavaScript——箭头函数的返回值

一、箭头函数的返回值

• 箭头函数的返回值可以直接写在箭头后

                  如果直接在箭头后面设置返回值时，对象字面量必须使用()括起来

                  const fn = () => ({"name":"张三"})

• 在箭头后面设置返回值，如果是形参的形式，可以不带大括号

•  const sum = (a, b) => a + b

                 

 

    <script>
         
         /*
            箭头函数的返回值可以直接写在箭头后
                如果直接在箭头后面设置返回值时，对象字面量必须使用()括起来


                在箭头后面设置返回值，如果是形参的形式，可以不带大括号
         */

         const sum = (a, b) => a + b

         const fn = () => ({"name":"张三"})

         let resul = sum(1,2)

         console.log(resul)


         //设置一个变量result来接收执行函数的返回结果
         result = fn()

         console.log(result)

    </script>

六十、JavaScript——全局和局部作用域

一、作用域

作用域(scope)

                - 作用域指的是一个变量的可见区域

                - 作用域有两种

                    1. 全局作用域

                        - 全局作用域在网页运行时创建，在网页关闭时销毁

                        - 所有直接编写script标签中的代码都位于全局作用域中

                    2. 局部作用域

                        - 块作用域是一种局部作用域

                        - 块作用域在代码块执行时创建，代码块执行完它就销毁

                        - 在块作用域中声明的变量是局部变量，只有在块内部访问，外部无法访问

二、全局作用域

•  全局作用域在网页运行时创建，在网页关闭时销毁

• 所有直接编写script标签中的代码都位于全局作用域中

  <script>
          let a = "全局变量a"

        {
            {
                //任意位置都能访问全局变量
                console.log(a)
            }
        }

    </script>

 二、局部作用域

• - 块作用域是一种局部作用域
• - 块作用域在代码块执行时创建，代码块执行完它就销毁
• - 块作用域在代码块执行时创建，代码块执行完它就销毁

 <script>
   
        // 局部作用域
        {
            let b = "局部变量b"
        }

        //块外无法访问局部变量b
        console.log(b)

    </script>

 完整代码：

  <script>

        /*
            作用域(scope)
                - 作用域指的是一个变量的可见区域
                - 作用域有两种
                    1. 全局作用域
                        - 全局作用域在网页运行时创建，在网页关闭时销毁
                        - 所有直接编写script标签中的代码都位于全局作用域中

                    2. 局部作用域
                        - 块作用域是一种局部作用域
                        - 块作用域在代码块执行时创建，代码块执行完它就销毁
                        - 在块作用域中声明的变量是局部变量，只有在块内部访问，外部无法访问
        */
    
        let a = "全局变量a"

        {
            {
                //任意位置都能访问全局变量
                console.log(a)
            }
        }



        // 局部作用域
        {
            let b = "局部变量b"
        }

        //块外无法访问局部变量b
        console.log(b)


    </script>

 六十一、JavaScript——函数作用域

一、函数作用域

    <script>
        /*
            函数作用域
                - 函数作用域也是一种局部作用域
                - 函数作用域在函数调用时产生，调用结束后销毁
                - 函数每次调用都会产生一个全新的函数作用域
        */


        function fn(){

            let a = "fn中的变量a"
        }

        // 三次调用函数，三次产生新的函数作用域
        fn()
        fn()
        fn()
    </script>

六十二、JavaScript——作用域链

一、作用域链

• 作用域链

                  - 找变量的一个流程

                  - 当我们使用一个变量时

                      JS解释器会优先在当前作用域中寻找变量

                      如果找到了则直接使用，

                      如果没找到，则去上一层作用域中寻找，找到了则使用

                      如果没找到，则继续去上一层中寻找，

                      如果全局作用域都没找到，则报 xxx is not definded

• 使用变量遵循就近原则，在访问变量是选择离它最近的同名变量

  <script>

        /*
            作用域链
                - 找变量的一个流程
                - 当我们使用一个变量时
                    JS解释器会优先在当前作用域中寻找变量
                    如果找到了则直接使用，
                    如果没找到，则去上一层作用域中寻找，找到了则使用
                    如果没找到，则继续去上一层中寻找，
                    如果全局作用域都没找到，则报 xxx is not definded

            使用变量遵循就近原则，在访问变量是选择离它最近的同名变量
        */

        let a = 10

        {
            let a = "第一代码块中的a"
            {
                let a = "第二代码块中的a"

            
                //根据就近原则访问，离它最近的变量a
                console.log(a)
            }
        }
    </script>