函数

函数介绍

函数概述

    函数就是把具有相同功能、重复的代码抽取出来,让他成为程序中的一个独立实体

函数的优点

     减少冗余代码
     提高了代码的可维护性及可阅读性

函数的分类

  • 系统函数 window里面的所有函数都属于系统函数 (console.log() alert() prompt()...)
  • 内置函数 所有的内置对象里面的函数 都叫内置函数 (Math.pow())
  • 自定义函数( 自己定义的函数)

自定义函数的定义以及调用

     匿名函数(没有名字的函数 声明比较少 没有复用价值)

                    语法:
                    function(形参){ //可以省略的 可以有多个
                        函数体(代码)
                    }
                    示例:
                    //直接调用 让别人(事件)去调用(自动调用)
                    (function(){
                        console.log('匿名函数')
                    })() //匿名自执行函数不能传参

     具名函数 (有名字的函数 常用)

                    语法:
                    function 函数名(形参,形参...){
                        函数体(代码)
                    }
                    示例:
                    // 声明 具体函数 (第一种)
                    function sayHello() {
                        console.log('hello');
                    }
                    sayHello()
                    function sayHello1(name,age) {//形参是形容的参数
                        console.log('hello'+name+age);      
                    }
                    sayHello1('李四')//传进的是实参 根据你要的参数个数来传递对应的参数个数
 
                    // 具名函数的变种声明  (第二种)
                    var sayHi = function(){
                        console.log('hi');
                    }
                    sayHi()
                    //具名函数的俩种声明 调用速度来说对应的第一种更快
                    // function 和 var 在预编译阶段就会声明
                    // var 关键词修饰的变量在预编译是不会赋值的    (后面的操作)

     new Function方式    (new 后面的内容首字母绝对是大写的)

                    语法:
                    var 函数名 = new Function('形参,形参1','函数体')
                    示例:
                    // 定义
                    var sayBye = new Function('username','console.log("bye bye!!"+username)')
                    //调用
                    sayBye('李四')

return关键词

     return 返回对应的数据的 他是在函数内容进行数据返回的(当你调用了return操作后 后面的内容将不再执行)
 
                示例:
                function sum(a,b){
                    return a+b
                    console.log('不会执行的代码')
                }
                console.log(sum(1,2))//返回的对应的1+2的结果
                如果没有return关键词 返回的一个undefined的值
                function sayHi(){
                    console.log('hi')
                }
                console.log(sayHi()) //undefined  

函数执行过程

     1.把对应的开辟的function内存里面的代码块丢给方法栈(执行栈)去执行
     2.执行栈就会自动取执行对应的方法 执行完返回对应的结果
     3.当前结果返回完毕以后 对应的执行栈里面的内存空间要进行回收(GC)将这个内存空间销毁  

函数中的arguments数组

  • arguments是一个伪数组(有部分的数组特性)
  • arguments.length 获取参数的个数 通过length属性对应的长度
  • arguments[i]  [] 加下标(从0开始)访问里面的元素
                示例:
                function sum(){ //不清楚参数个数(无参)
                    // arguments 可以接收里面所有的参数
                    //获取里面传递的所有的参数 arguments 长度length
                    //下标索引是从0开始的
                    var result = 0
                    //遍历对应的arguments里面的所有的参数
                    for(var i=0;i<arguments.length;i++){
                        result += arguments[i] //取出里面的参数进行求和
                    }
                    return result
                }

函数作用域

     作用域      当前一个变量的作用范围

  • 局部作用域(在一个函数内声明的 或者是在一段代码块内声明的 他的作用范围就是当前的代码块)
  • 全局作用域(在对应的全局声明的 他的作用范围就是全局的)不写关键字var也是合法的,  且是全局变量

     作用域链    当前的作用域内没有找到对应的变量就会向上去寻找 而这个过程构成的链式结构称为作用域链

                示例:
                var a = 20
                function fn(){
                    console.log(a);//undefined 没有var关键词就20
                    var a = 10
                    if(10>9){
                        console.log(a);//undefined 没有var关键词就10
                        var a = 30
                        if(5>4){
                            console.log(a);//undefined 没有var关键词就30
                            var a = 40
                            if(a>10){
                                console.log(a);//40
                            }
                        }
                    }
                }
                fn()

函数的嵌套

  • 函数内部可以再包含其他函数;
  • 函数之间允许相互调用,也允许向外调用, 但是不可以调用同级函数的嵌套函数;
                示例:
                function fn1(){
                    console.log('函数1');
                    function fn2(){
                        console.log('函数2');
                        // fn1() 没有结束就是死循环
                    }
                    function fn3(){
                        console.log('函数3');
                        //调用函数2
                        fn2()
                    }
                    fn2()
                    fn3()
                }
                fn1() //函数1 函数2 函数3 函数2

DOM的简单操作

                1. 获取元素节点对象: document.getElementById(‘id’);
                2. 获取输入框的内容: value属性 document.getElementById('input框的id').value
                3. 点击事件:  onclick   document.getElementById('按钮的id').onclick =   function(){//相关操作}
 
                示例:(以事件做为驱动)
                //通过输入框输入数值判断对应的奇偶并打印
                <input id="number" type="text">
                <button id="btn">判断奇偶</button>
                <script>
                    function handlerClick(){
                        //拿到input框里面的内容 获取到input框
                        var inputValue = document.getElementById('number').value //string类型
                        // console.log(typeof inputValue); 如果是+法操作必须要先转类型
                        //判断奇偶的操作
                        if(inputValue%2==0){
                            console.log('当前为偶数');
                        }else{
                            console.log('当前为奇数');
                        }
                    }
                    //首先需要点击按钮 获取按键 加点击事件
                    //事件触发自动调用对应的函数 (事件驱动)
                    document.getElementById('btn').onclick = handlerClick
                </script>

事件驱动

     因为函数不会主动执行, 只有当调用的时候才会执行函数中的代码,  在前面的dom操作示例中,我们点击了按钮才触发函数调用

递归算法

  • 函数可以自己调用自己,必须要有结束条件,称为函数的递归调用
  • 递归可以完成所有循环做的事情 (但是递归的效率较低)

递归三要素

  • 找规律
  • 找临界值(没有规律的值)return
  • 自己调自己(在函数内部调用自己的函数)
            “语法”
            function 函数名(参量){
                if(){//没规律的(一般在前面或者后面)
                    return //返回具体的值
                }else{//有规律的
                    return //返回对应的规律的公式
                }
            }
            示例:
            //2 4 6 8 10 第100的值是什么
            function fn(n){ //一般情况都会有参数 n表示为位数
                if(n==1){//没规律的(一般在前面或者后面)
                    return 2 //返回具体的值
                }else{ //有规律的 返回对应的规律的公式
                    return fn(n-1)+2
                }
            }
            console.log(fn(100))
posted @ 2022-07-28 20:17  一对7  阅读(27)  评论(0编辑  收藏  举报