函数 声明及使用

.函数

3.1 概念

• 函数(function):函数就是将具有独立功能的代码块 整合在一起并命名 需要的时候调用即可

• 好处:提高代码的复用率

左箭头.onclick = function(){ change }
右箭头.onclick = function(){ change }
指示点.onclick = function(){ change}
​
//切换图片
function  change(){
  切换图片
}

• 函数使用场景

  • 事件处理函数

  标签.事件类型 = function(){}

  • 代码复用封装

  左箭头.onclick = function(){ change }
  右箭头.onclick = function(){ change }
  指示点.onclick = function(){ change}
  ​
  //切换图片
  function  change(){
    切换图片
  }

  • 对象的方法

  var obj = {
    "name":"张三",
    "age":10,
    "isOn":true
    "a":undefined,
    "b":null,
    "c":[1,2,3,4],
     "d":{},
     "f":function(){ } 函数在对象中叫方法
  }
  ​
  //获取对象中的属性  obj.属性名
  //调用对象中的方法  obj.对象名()  obj.f()

3.2 函数声明及使用

• 代码复用封装的声明

  • 普通声明

  • 表达式声明

• 普通声明和使用

声明:function  函数名(){  代码块 } 
使用:函数名()

• 表达式声明和使用

声明   var 变量名 = function(){ 代码块 }
使用   变量名()

• 声明和使用代码示例

    <script>
        // 1.普通声明 
        function change(){
            console.log("切换图片")
        }
        // 函数只有调用的时候  才会执行里面的代码  调用一定要在函数名后面加()
        change();//切换图片
        // 在打印的时候  如果只写函数名 将整个函数打印输出
        console.log(change) // “function change(){ console.log("切换图片") }"
​
​
        
        // 2.表达式声明
        var change1 = function(){
            console.log("切换图片1");
        }
        // 使用
        change1();//"切换图片1"
        console.log(change1);// "function(){console.log("切换图片1")}"
​
    </script>

==函数使用注意==

• 函数只有调用的时候 才会执行里面的代码 调用一定要在函数名后面加()

• 在打印的时候 如果只写函数名 将整个函数作为字符串打印输出

3.3 函数参数

• 什么需要参数:函数中出现不确定的值，传递不同的参数 实现不同的功能

• 参数的分类

  • 形参(形式参数):function 函数名(a,b){ }------a和b就是形参

  • 实参(实际参数):函数名(100,200)-----100和200就是实参 实参是将值赋值给形参

• 当形参和实参的个数不匹配的时候

  • ==形参和实参是一一对应的==

//4.当形参和实参个数不对应的时候
        function add3(a,b){//var a;  var b;
            console.log(a,b);
            console.log(arguments);//参数的集合
            arguments[0] = 100;//arrguments[0] 和 a是一样的  修改arrgument[0]的值 a也会跟着改变
            console.log(a);// 100
        }
        // add3(10);//10 undefined  实参比形参个数少
        // add3(10,20,30);//10,20   实参比形参个数多
        add3(10,20);//10,20  实参和形参个数相同

• 多个参数: 多个参数之间用逗号隔开

 <script>
        // 1.普通的声明  两个值相加
        function add(a, b) {// var a; a=100  var b; b=200
            // console.log(a,b);
            console.log(a + b);
        }
        //使用 10/20   20/30  40/100  200/300
        add(100, 200);
​
        add(10, 20); // 30
        add(20, 30);// 50
        add(40, 100);// 140
        add(200, 300)// 500
​
​
        //2.表达式声明
        var add1 = function(a,b){//var a;  var b;
            console.log(a*b);
        }
​
        add1(10,20);//200
    </script>

• 参数不确定 arguments参数的集合

 //3.当参数个数不确定的时候：arguments参数集合  你传几个值  我就累加几个值
        function add2(){ //
            console.log(arguments);//实参的集合
            console.log(arguments.length);//实参的集合的长度
            console.log(arguments[0])//10  arguments[下标]  获取下标对应的参数
            var s = 0//
            for(var i = 0;i<arguments.length;i++){
                s+=arguments[i]
            }
            console.log(s);
        }
        add2(10,20,40);//3个参数
        add2(10,20,30,40,50);// 5个参数
        add2(100,200);//2个参数

• ==函数的注意问题==

  • 函数名重名会被覆盖

  • 实参比形参少，没有被赋值的形参值为undefined

function add(){
  console.log("快吃饭了")
}
function add(){
  console.log("中午吃什么")
}
add();// 中午吃什么
​
​
function add1(a,b){
  console.log(a,b);
}
​
add1(10);//10 undefined