【JavaScript从入门到精通】第三课初探JavaScript魅力-03

时间 2019-11-06

标签 javascript 入门精通第三初探魅力栏目 JavaScript 繁體版

原文原文链接

第三课初探JavaScript魅力-03

函数传参

上节课的时候咱们已经讲了什么是函数,实际上,函数在功能上就相似于css的class同样,将一段代码包裹起来使用。为了让函数的功能更加的丰富和实用，咱们须要用到的就是函数传参。咱们已经提过，JS将参数放在函数名后的圆括号内，而为了具体说明参数怎么使用，咱们举一个小例子。css

咱们在HTML页面中放入一个有颜色的div块，并加入3个按钮，其目的是经过点击按钮来改变div块的颜色。经过前面两节课的学习，咱们能够很轻松地写出下面的代码来实现这个功能：html

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function toGreen() { var oDiv=document.getElementById('div1'); oDiv.style.background='green'; } function toYellow() { var oDiv=document.getElementById('div1'); oDiv.style.background='yellow'; } function toBlack() { var oDiv=document.getElementById('div1'); oDiv.style.background='black'; } </script> </head> <body> <input type="button" value="变绿" onclick="toGreen();" /> <input type="button" value="变黄" onclick="toYellow();" /> <input type="button" value="变黑" onclick="toBlack();" /> <div id="div1"> </div> </body> </html>

效果以下：浏览器

能够看到，为了实现这一功能咱们一共写了三个函数，做用分别是让div块变绿、变黄、变红。这三个函数的结构几乎如出一辙：经过getElementById获取到div1并赋值给oDiv，而后修改其background属性，惟一的区别是具体的颜色值不一样。因此，有没有办法将这三个函数进行合并呢？天然是有的，方法就是咱们这节课要讲的函数传参。ide

这里，咱们先将前面讲函数的定义和调用那个例子拿过来。函数

function show()       
{                       //定义
  alert("a");
}
show();            //调用

运行网页后会固定弹出内容为“a”的窗口。这样的功能是否是太简单了？若是我但愿它弹出的内容是我给定的内容应该怎么作？答案即是使用参数。post

参数的使用方法其实很简单，在这个例子里，咱们在函数的()放入一个num，这个num相似于前面讲的变量，名字由编写者自定，而且函数定义的时候num自身的值是未知的。如何肯定num的值呢？在调用函数的时候，在()内输入的值即是num的具体值。示例以下：学习

function show(num)       
{               
  alert(num);
}
show(12);

结果以下：htm

运行程序后，弹出来的窗口值变为了12。咱们修改show()里的值，运行结果也会发生相应的变化。因而，咱们就能够称num为函数show()的参数。这个例子咱们能够看出，函数参数扮演的是占位符的角色，在定义的时候参数仅仅是占据一个位置而没有具体的值，其值在函数调用时才被传入。blog

值得注意的是，对于一个函数来讲，它的参数是能够有不少个的，传入多个参数时，咱们用逗号将参数隔开：ip

function show(a,b)       
{               
  alert(a+b);
}
show(5,12);

结果以下：

须要注意传入的值要和参数一一对应（a=5，b=12）。

如今咱们就经过传参的方法将前面的代码进行合并。咱们写一个统一的函数setColor，并传入一个color参数（用于决定将div修改成什么颜色），保留前面三个函数的主体部分，只将颜色具体的值修改成color，color具体的值则在button里调用setColor函数时再决定。修改后的代码以下：

<html>
  <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
      #div1{
        width:200px;
        height:200px;
        background:red;
      }
    </style>
    <script>
      function setColor(color){
        var oDiv=document.getElementById('div1');
        oDiv.style.background=color;
      }
    </script>
  </head>
  <body>
    <input type="button" value="变绿" onclick="setColor('green');" />
    <input type="button" value="变黄" onclick="setColor('yellow');" />
    <input type="button" value="变黑" onclick="setColor('black');" />
    <div id="div1">
    </div>
  </body>
</html>

传参的具体内容就是这些，但关于传参，不少初学者都会有这样的疑惑：咱们如何判断一个函数是否应该使用参数传递呢？一个比较简单的判断方法是，当咱们的函数若是存在一部份内容在定义时没法肯定下来，就有使用参数传递的必要。

改变Div的任意样式

刚才的程序里的函数setColor，其做用只能修改div的背景颜色。假设咱们想经过一个函数，来改变一个div的各类样式，例如宽，高，边框等，又应该如何对咱们的函数进行修改呢？

很明显，想修改Div的任意样式，有两处是没法肯定的，一个是具体的样式名(name)，一个是具体样式的值(value)，所以咱们须要两个参数。若是按照咱们前面所讲，那么JS函数的写法应该以下：

functionsetStyle(name,value)
{
  var oDiv=document.getElementById('div1');
  oDiv.style.name=value;
}

实际上，尝试一下就会发现，这个函数是没法正常运行的。缘由出在这种写法下，浏览器并不会认为oDiv.style.name中的name和参数中的name是同一个东西，而会认为这是一个叫“name”的样式，固然css中并无名为“name”的样式，所以没法执行。

为了解决这个问题，咱们必须了解第二种操做属性方法。第一种操做属性的方法就是咱们已经学过的使用.字符链接，咱们以前全部案例都是经过这种方法来操做属性。而第二种操做属性的方法，是经过['属性名']的方法来进行操做。具体的使用方法以下：

function setText()
{
  var oTxt=document.getElementById.('txt1');
  //第一种操做属性的方法
  oTxt.value='dsfasdfasdf';
  //第二种操做属性的方法
  oTxt['value']='dsfasdfasdf';
}

在这个小例子中，两者不存在任何区别。在日常的书写中，因为第一种比第二种更为简便，所以大多选用第一种写法。而第二种写法的好处是，[]内放置的是一个字符串（关于字符串的具体内容本课末会讲），而字符串能够经过变量来储存，也能够经过参数传递具体的值。所以，前一个案例里想经过参数改变样式名的目的即可以经过这种方法达成。实现代码以下：

<html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> #div1{ width:200px; height:200px; background:red; } </style> <script> function setStyle(name, value) { var oDiv=document.getElementById('div1'); oDiv.style[name]=value; } </script> </head> <body> <input type="button" value="变宽" onclick="setStyle('width', '400px')" /> <input type="button" value="变高" onclick="setStyle('height', '400px')" /> <input type="button" value="变绿" onclick="setStyle('background', 'green')" /> <div id="div1"> </div> </body> </html>

效果以下：

这样，不管想改变div的什么属性，均可以经过传递参数来实现了。

顺便一提，在JS里，任何使用.字符的地方，均可以用[]代替，例如document.getElementById('div1')能够修改成document['getElementById']('div1')，oDiv.style.[name]能够修改成oDiv['style'][name]，具体如何使用视实际状况而定。

字符串和变量——区别和关系

观察前面的代码，能够看到有不少使用""和''的地方，在JS里使用引号标注的就是字符串。变量和字符串之间有什么关联或者区别呢？

说到这里，再说起JS里面一个与变量相对的概念：字面量（常量）。对于字面量来讲，其值是固定的，咱们能够清楚地知道它是多少。数字，字符串都是字面量。相对来讲，变量的具体值则是不肯定的，若是单独看变量自己咱们是没法肯定其值为多少的。

对于变量和参数来讲，使用它们是不须要加引号的，而字符串则必须加上引号。对于下面一个例子：

alert(abc);

咱们的本意是想将abc输出，但因为没有加引号，浏览器会认为abc是一个变量，又因为abc没有被定义过值，因此会出现abc没有被定义的报错。字符串和变量在咱们之后的课程中会不断地应用到，你们慢慢就会熟悉他们之间的关系和区别。

【JavaScript从入门到精通】第三课 初探JavaScript魅力-03

第三课 初探JavaScript魅力-03

函数传参

改变Div的任意样式

字符串和变量——区别和关系

【JavaScript从入门到精通】第三课初探JavaScript魅力-03

第三课初探JavaScript魅力-03