Javascript基础知识(三):函数参数(传参)
2017-05-06 18:00
549 查看
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>
谢谢大家!
相关文章推荐
- PHP输出javascript脚本,带php参数,函数传参字符串并带有变量
- Javascript 基础知识 - 函数
- C++基础知识——二维数组做函数参数
- Javascript基础——深入了解Javascript(函数返回值return、函数传参arguments、兼容各浏览器的单一行间样式、元素的插入删除split/shift/sort/pop)
- Javascript 基础知识学习--javascript中的参数传递都是按值传递的
- c#基础知识——函数参数数组
- JavaScript基础----14Javascript函数-带参数的函数
- Javascript基础知识盲点总结——函数
- C语言基础知识之(十二):结构体作为函数的参数(结构体变量、结构体数组)
- javascript 函数的基础知识
- PHP_零基础学php_3PHP函数、传参函数、默认参数、函数返回值
- 【JavaScript 4—基础知识点】:函数
- javascript基础知识--函数定义
- iOS基础知识:数组作为函数的参数
- 栋栋晓10:Javascript学习总结:基础知识2(语句,函数,)
- javascript基础知识复习3-javascript的函数
- 黑马程序员_javascript 函数和对象基础知识
- 函数的参数传递的几种形式(值、地址、引用)及指针基础知识
- JavaScript 你可能会忘记的基础知识 (2)函数和参数表
- JavaScript函数基础知识