Javascript基础知识（三）：函数参数（传参）

1.函数参数分类及使用

上一篇博客已经讲到函数参数有实参和形参两种。

函数参数使用时需要注意以下几点：

1.如果形参有两个赋值，而实参只给了一个值，那么就要把这个值赋予第一个形参.第二个形参没有赋值。
示例：

<script>
    Function fn(a,b){
        Console.log(a+b);
    }
    Fn(4);
</script>

有上述代码分析可知： a = 4 , 数据类型是num， b 没有赋值，数据类型是undefined。
所以一个num和undefined 相加，控制台输出 NaN（Not a Number）。

2.如果实参赋值个数多于形参赋值个数，那么只需按顺序一一对应赋值，不用管多出来得实参。

<script>
    Function fn(a,b){
        Console.log(a+b);
    }
    Fn(4,5,7);
</script>

a=4; b=5;
输出结果是9。
JS语言中形参和实参个数可以不同，但是在其他计算机语言中，形参和实参一定要匹配，否则会报错。尽管不报错，在写程序时，尽量让实参和形参匹配。

2.arguments对象

• Javascript在创建函数的同时，会在函数内部创建一个arguments对象实例，Arguments用来存储函数传送过过来实参。
• arguments对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组，访问单个参数的方式与访问数组元素的方式相同。
• arguments对象的长度是由实参个数而不是形参个数决定的。
  示例：

<script>
    function fn(a,b) {
    //设定形参
        console.log(fn.length);
        //获取形参的长度，length属性可返回字符串中的字符数目。
        console.log(arguments.length);
        //获取实参的长度，因为Arguments用来存储函数传送过过来实参
        if (fn.length == arguments.length){
        //判断形参长度和实参长度是否相同
            console.log(a+b);
            //如果if条件语句成立，输出实参之和。
        }
        else{
         //如果if条件语句不成立，在控制台报错。
            console.error(" 对不起，您的实参和形参不匹配，正确的个数应该是"+ fn.length);
        }
    }
    fn(1,2)
    //给出实参
</script>

fn(1,2)实参个数和形参个数相等，控制台输出结果：

如果fn(1,2,7)，那么实参和形参个数不相等，所以执行else语句。控制台结果为：

3.函数传参控制盒子

1.运用js使盒子显示或消失

页面中有三个隐藏的盒子，和三个按钮，需要做到的效果是：当点击按钮时，与之对应的盒子就会显示出来。
分析：
事件源；按钮
事件：onclick
事件处理程序；显示盒子
代码：

<style>
    div{
        width: 200px;
        height: 200px;
        background-color: pink;
        display: none;
        /*隐藏盒子*/
        margin: 20px;
    }
</style>
<script>
       function fn(obj) {
//           这个函数负责接收传递的函数，当点击button1，obj= hezi1;当点击button2，obj = hezi2.
         var  hezi = document.getElementById(obj);
//         obj  是变量，所以不要加双引号。
         hezi.style.display = "block"
         //display = "block"表示显示盒子
       }
    </script>
    <button onclick="fn('hezi1');">显示第1个盒子</button> 
<!--内嵌式：外双内单，负责传递出函数内嵌式：外双内单，负责传递出函数。当点击按钮,调用fn(obj)函数,并把盒子1的类名作为实参传到函数中-->
    <button onclick="fn('hezi2');">显示第2个盒子</button>
    <button onclick="fn('hezi3');">显示第3个盒子</button>
    <div id="hezi1">1</div>
    <div id="hezi2">2</div>
    <div id="hezi3">3</div>

这个案例传参过程：首先点击按钮事件，把对应盒子的ID传给fn函数作实参，fn函数执行 var hezi = document.getElementById(obj);语句，提取出来盒子的ID，并修改样式。

2.制作淘宝展示图片轮换效果

效果：

当鼠标经过下面的小图片使，上面的大图片也跟着改变。
分析：
事件源：小图片
事件：鼠标经过
事件处理程序：大盒子的背景 图片改变。
首先分析，这个事件中又几个变量。经过的小图片变，大盒子的背景图片变。所以两个变量分别为小图片的ID和大图片的背景。
知道有几个变量之后，就可以以这两个变量为形参开始封装函数了。

 function fn(liid, bg) {
 //事件源是小图片，首先要获取的是小图片的ID
  var obj = document.getElementById(liid);
  //获取ID后，开始写事件处理过程：事件源.事件=function（）{}
  obj.onmouseover = function(){
  改变对象的ID.style.backgroundImage = bg
  //bg是变量由实参控制
  }
 }

函数封装好了，只要在实际运用中调用就可以了。
附上需要的图片：










HTML代码：

<div id="box">
    <ul>
        <li id="li01"><img src="images/01.jpg" alt=""/></li>
        <li id="li02"><img src="images/02.jpg" alt=""/></li>
        <li id="li03"><img src="images/03.jpg" alt=""/></li>
        <li id="li04"><img src="images/04.jpg" alt=""/></li>
        <li id="li05"><img src="images/05.jpg" alt=""/></li>
    </ul>
</div>

CSS代码：

<style>
    *{margin:0;padding:0;}
    ul{list-style:none;}
    #box {
        height: 70px;
        width: 360px;
        padding-top: 360px;
        border:1px solid #ccc;
        margin:100px auto;
        overflow: hidden;
        background: url(images/01big.jpg) no-repeat;
    }
    #box ul{
        overflow: hidden;
        border-top:1px solid #ccc;
    }
    #box li {
        float: left;
    }
</style>

JS代码：

<script>
 window.onload = function() {
//     记得要引入函数
     var box = document.getElementById("box");
//     大盒子从始至终不变化，所以可以放到循环外面
     function fn(liid, bg) {
//         封装函数，用来接收传来的参数。首先确定有几个变量，变量之间用逗号隔开，不加双引号。
         var obj = document.getElementById(liid);
//         获取变量，执行以下函数
         obj.onmouseover = function () {
             box.style.backgroundImage = bg;
//             在执行的函数中也有一个变量，不加双引号。
         }
     }
//下面是调用函数，给出了实参，参数不是变量，需要用双引号引起来。
     fn("li01", "url(images/01big.jpg)");
     fn("li02", "url(images/02big.jpg)");
     fn("li03", "url(images/03big.jpg)");
     fn("li04", "url(images/04big.jpg)");
     fn("li05", "url(images/05big.jpg)");
 }
</script>

谢谢大家！