函数是什么??

77 阅读6分钟

首先排除,不是数学中的函数;函数可以理解为一个点

一、为什么要有函数,函数的功能是什么??

帮我们把项目多个地方用到的功能(代码段),抽离出来(就把他拿到那个小盒子,就不需要在多个地方写重复的功能); 然后在需要的地方 调用函数即可

二、写一个完整的函数

写一个函数(或者说一个完整的函数) 分为两部分

1、定义阶段

2、调用阶段

三、函数的定义

1、语法

function(){}

2、两种定义函数的方式:

1.赋值式定义

 var fn=function(){} ----匿名函数
 function: 关键字,表明后续紧跟一段代码,是函数

 ()  内部书写,参数 ,后续讲,暂时记住,暂时理解为 固定写发
 {}  内部书写,函数调用执行时 的代码,要执行的代码
 

2.声明式定义

function 函数名(){}---->具名函数

function: 关键字,表明后续紧跟一段代码,是函数

fn(函数名):将来可以通过 这名字(变量) 去调用(会找到)本函数

{}  内部书写,函数调用执行时 的代码,要执行的代码

3、函数的调用方式

  语法:函数名()

赋值函数: 由于赋值函数没有函数名,数据存储在变量中,所以可以把变量理解为函数名,即调用方法 函数名()

4、函数声明式和赋值式的区别

5、函数声明式和赋值式的区别

1、书写不同

var fn=function(){}
function fn1(){}

2、打印时,声明式会带上函数名;赋值式没有

3、调用时有差异

fn1() //111
function fn1(){
    console.log('111')
}
fn1() //111

4、声明式可以在函数定义前 调用

fn() //报错
var fn=function()(){
    console.log('111')
}
fn() //111

--------------------------
//预解析
//浏览器做变量提升
var f; //备注:这一行会在当前最开始的那一行,第一行

fn() //fn is not a function 
//原因在于,此时fn 经过变量提升,有fn,但值为 undefined

赋值式不可以在函数定义前 调用

6、函数是做什么的??

  1. 我们的函数在不参与的时候,可以正常执行
  2. 但!功能相对单一
  3. 如果函数想要真正的灵活起来,在多个地方调用时,有不同的执行,那么我们可以通过函数的参数来完成

四、函数的参数

1、形参:

函数名后(function)后面的小括号,没书写的一个,相当于在函数内部声明一个变量,可以在函数内部去调用

2、实参

调用函数时的小括号内部书写的值,就是实参

function fn(a,b){//形参
        console.log(a,b)
}
//实参
fn(1,2) //打印1 2 

fn(2,3) //打印2 3

--------------------
function add(a,b){
    console.log(a+b)
}

add(1,2) //3
add(2,3) //5 

3、形参与实参会一一对应

  1. 如果实参数量少于形参,那么前边的形参对应受值,没有对应的实参的形参值,为undefined

  2. 如果形参的属性 少于 实参 。那么会一一对应后,多余的实参,无法通过 函数获取

    //1
    function fn(a,b,c){
        console.log(a,b,c)
    }
    fn(1) //1 undefined undefined
    fn(2,3)//2 3 undefined
    //2
    function fn(a){
        console.log(a)
    }
    fn(1) //1
    fn(2,3)//2
    

五、函数的返回值

1、语法

return 需要返回的内容

2、小案例

function add(a,b){
    return a+b;
}

var sum=add(1,2)
console.log(sum) //3

函数默认返回值

我们可以不写return 函数会默认在代码段最后一行,写上return undefined

function fn(){
        console.log(1)
}
var sum=fn() //调用fn函数(打印1就是在此时执者),
//将fn函数内部返回值,存储给sum,因为我们没有写return,所以默认值
console.log(sum)//undefined

3、return 中断函数

 function fn(){
        console.log(1)
        return
    console.log(1)
    console.log(1)
    console.log(1)
}   

4、我们要写返回值吗?我们什么时候需要??

返回值的书写,取决于是否需要得到函数内部某一个变量的值,如果需要 可以使用返回值将其返回,如果不需要我们可以不写

5、总结

  1. 具有中断函数的共功能
  2. 如果不想中断函数,那么一定将return放到函数的最后
  3. 除非就是想要通过return中断函数的运行

六、案例

1、案例一 水仙花

    function fn(num){
        //1、书写代码
        //1.1 拿到 个位,十位,百位
        var bai=parseInt(num/100)
        var bai=parseInt(num%100/10)
        var  ge=num%10
         //1.2 拿到各个位置的三次的值
        var sum=bai **3 + bai ** 3 +ge ** 3 
        //2、如果是水仙花数,返回true 如果不是水仙花数 返回false
        if(sum==nume){
            //水仙花数
            return true
        }
        else{
            //非水仙花数
            return false 
        }

    }
    var bo=fn(153)
    console.log(bo)
    var bo1=fn(666)
    console.log(bo1)
    

2、案例二

  1. 需要参数吗? 两个

  2. 需要返回值吗?? 不需要

       function fn(a,b){
                var num=0
                for(i=a;i<=b;i++){
                    if(i % 4 == 0 && i % 100 !=0){
                        document.write(i +' ');
                        num++
                        if(num == 4){
                            document.write('<br>')
                            num=0
                        }
                    }
                }
            }
            fn(1000,2000)
            
    

3、案例三

/*
        需要参数吗?
        需要两个 一个控制行 一个控制列

        需要返回值?? 不需要
*/
function fn(num1,num2){
        for(var i=0;i<num1;i++){
        for(var j=0;j<num2;j++){         
            document.write("*")
        }        document.write("<br>")
    }   
}
fn(5,6)

4、案例四

计算两个数的和,并且在此之前。如果哟有一个参数不是 number 那么停止函数

需要参数吗? 需要 两个

需要返回值吗 ?? 需要

function add(a,b){
    if(typeof a !=="number" || typeof b!== "number"){
        console.log("参数a或者b参数,其中有一个不是number类型的,终止函数运行")
        //停止函数
        return flase;
    }
    console.log('a+b的和:',a+b)
    return a+b
}
add(100,200)

5、 案例五

/*
        需不需要参数?? 需要
    需不需返回值 ?? 需要,并最好是布尔值
    是--》true  否--》false
*/
function fn(a){
   //1、判断传入的参数是否为质数
        var count=0;
    for(var i=2;i<a;i++){
      if(a%i==0){
            count=count+40
      }
    }   
    //2、根据出入的参数决定返回值是什么
      if(count ===0){
        //应该返回true
        return true
    }
    else{
        //应该返回false
        return flase 
    }
    //不能使用三元表达式,判断
}
var a=fn(9)
console.log(a) //false
var b=fn(7)
console.log(b) //true

六、函数的预解析

1、代码书写

 fn()
function fn(){
    console.log(1)
}
fn()
//预解析之后(会把函数提升到当前作用块最顶层)(暂时理解为 当前代码的第一行)
/*
1. fn() 不需要
2. function fn(){}  需要预解析
3. fn() 不需要

----------------------------
1.function fn(){}  //提升到了当前代码最开始的第一行
...
2. fn() //正常调用
3. fn() //正常调用

*/

2、重名问题

  • 函数的预解析,可能会遇上同名变量提升(变量的预解析) 直接以函数为主

  • JS编程时应该尽量避免变量名和函数名同名,否则会发生相互覆盖的问题.从实际测试效果来看,这种覆盖可以分为两种情况:

  • 定义变量时只使用var定义变量,不分配变量初始值,此时函数的优先级更高,函数会覆盖变量;

  • 定以变量时为变量指定了初始值,此时变量的优先级更高,变量会覆盖函数.

     var fn='hhh' //有提升
     console.log(fn) //没有
    
     fn()//没有
     function fn(){ //有
         console.log(1)
     }
     fn() //没有
     ----------------------------------------------------------------
     //预解析之后
     function fn(){   //第一行
         console.log(1)
     }
     var fn   //第二行  没意义
    
     fn='hhh'  //这行很重要,直接将变量保存的函数,更改为了 'hhh'
    
     console.log(fn) //按照分析,此处应该打印 'hhh'
    
     fn() //按照分析,此处fn 的应该为'hhh' 所以会报错 fn is not a function
    
     fn() //按照分析 此处fn 的值还是'hhh',所以还会报错 fn is not a function