现在位置: 首页 / JavaScript / 正文

JavaScript入门：函数

函数就是在程序设计中，将一段代码封装起来，完成一个特定的功能，并给这段代码起一个名称，程序通过名称就可以执行这段代码。

定义函数

JavaScript定义函数有两种方式：一种方式是显示定义函数；一种方式是匿名定义函数。

显示定义函数

显示定义函数通过函数声明来定义，定义语法如下：
function functionname(parameters){
函数代码
}
其中，function是定义函数的关键字，functionname是函数名称，parameters是函数传入的参数，可以传入多个参数，每个参数之间用英文逗号分隔。
JS函数不需要声明返回类型，当函数需要返回值时，直接使用return语句返回即可。
例如：
<html>
<head>
    <title>JavaScript开发案例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }
function sum(a,b){
return a+b;
    }


</script>
</head>
<body>
       <h3>JavaScript开发案例</h3>
       <hr>
      <form action="/login.jsp">
          <p> 加数：<input type="text" id="op1" name="op1" maxlength="20" value=""/></p>
          <p> 加数：<input type="text" id="op2" name="op2" maxlength="10" value=""/></p>
          <p><input type="button" value="加法" onclick="add()"/></p>
     </form>    
</boyd>
<html>

在上面的案例代码中，定义了两个JS函数，分别是add函数和sum函数，add和sum是函数名称。

add函数负责处理HTML元素button的单击事件，在函数内部获取id为op1和op2元素的值，并调用sum函数求op1和op2的和。
sum函数是求和函数，计算传入参数a和b的和，并使用return语句返回a和b的和。
parseInt是JS内置函数，该函数将数字型的字符串转换为整数。

匿名函数的定义

匿名函数通过一个表达式来定义，函数没有名称，定义的函数会赋值给一个变量，该变量指向函数的内存地址，当访问变量时，函数即被调用。
定义匿名函数的语法规则如下：
varfun = function(parameters){
函数代码;
}
其中，varfun是变量，用于存储函数的内存地址，function是定义函数的关键字，parameters是传入函数的参数，可以传入多个参数，每个参数之间用英文逗号分隔。
例如：
sum = function(a,b){
return a+b;
}

上面的代码定义了一个匿名函数，该函数的内存地址赋值给变量sum，通过变量sum就可以调用函数。

函数的调用

JS有多种方式来调用函数，有直接调用，表达式中调用，在事件响应中调用，通过链接调用。不管哪种方式调用函数，调用时都要写入函数名称，若是匿名函数，要写入变量名称。

直接调用

直接调用就是函数调用语句占单独一行，直接调用比较适合与没有返回值的函数。
例如：
<script type="text/javascript">
function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }
function sum(a,b){
return a+b;
    }
add();
  </script>

语句add()就是直接调用，该语句调用函数add()。

表达式中调用

函数可以在表达式内调用，函数的返回值参与表达式的计算。在表达式内调用函数，一般适用于有返回值的函数。
例如下面的JS函数：
function sum(a,b){
return a+b;
}
sum函数计算a和b两数的和，并使用return语句返回计算结果。调用sum函数就需要在表达式内调用。
例如：
value = sum(10,90)
alert(sum(10,90))
value = sum(10,90) * 2

在事件响应中调用函数

JS代码一般嵌入到HTML网页内，网页的页面加载、用户单击HTML元素、移动光标都会产生事件，若要对产生的事件进行响应或处理，可以调用JS函数来响应这个事件。
例如下面定义的函数：
function add(){
  num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
}
add函数用于响应HTML按钮元素的单击事件，add函数响应按钮单击事件的代码如下：
  <p><input type="button" value="加法" onclick="add()"/></p>
HTML元素input 的onclick属性用于定义该元素产生单击事件后的动作，onclick属性的值可以是定义的JS函数名称。

通过超链接调用函数

JS函数还可以通过超链接调用。在HTML元素<a>标签的href属性的值可以是已定义的JS函数名称，或直接编写JS代码。语法如下：
JavaScript:函数名称
例如：
JavaScript:add()
JavaScript:alert(“您单击了该链接”)
案例代码：
<html>
<head>
    <title>JavaScript开发案例</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function add(){
   num1 = parseInt(document.getElementById("op1").value);
num2 = parseInt(document.getElementById("op2").value);
alert(sum(num1,num2));
    }
function sum(a,b){
return a+b;
    }
sum(10,100);


    </script>
</head>
<body>
       <h3>JavaScript开发案例</h3>
       <hr>
       <p> 加数：<input type="text" id="op1" name="op1" /></p>
       <p> 加数：<input type="text" id="op2" name="op2" /></p>
       <p><input type="button" value="加法" onclick="add()"/></p>
   <a href="JavaScript:add()">计算数的和</a>
</boyd>
<html>

内置函数

JavaScript内部提供了一些函数，开发者可以直接使用这些函数，提高编程效率和JS程序的稳定性。
函数 描述
decodeURI() 解码某个编码的 URI。
decodeURIComponent() 解码一个编码的 URI 组件。
encodeURI() 把字符串编码为 URI。
encodeURIComponent() 把字符串编码为 URI 组件。
escape() 对字符串进行编码。
eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass() 返回一个 JavaObject 的 JavaClass。
isFinite() 检查某个值是否为有穷大的数。
isNaN() 检查某个值是否是数字。
Number() 把对象的值转换为数字。
parseFloat() 解析一个字符串并返回一个浮点数。
parseInt() 解析一个字符串并返回一个整数。
String() 把对象的值转换为字符串。
unescape() 对由 escape() 编码的字符串进行解码。

嵌套函数


JS语言支持函数嵌套，即在函数内部可以嵌套定义子函数。那么嵌套的子函数是否可以在函数外部调用呢？它的作用域又是什么范围呢？

//定义嵌套函数
function foo() {
m = 3;
function bar() {
n = 4;
alert(m+n)
}
bar();
}

上面的JS代码定义了foo函数，在foo函数内部又嵌套定义了bar子函数。bar子函数使用了foo函数声明的变量m，并输出m与n的和。foo函数的最后一条语句调用了bar函数。
下面是调用函数的HTML代码：

<html>
<head>
<title>JavaScript开发案例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function foo() {
m = 3;
function bar() {
n = 4;
alert(m+n)
}
bar();
}
</script>
</head>
<body>
<input type="button" value="调用foo函数" onclick="foo()"/>
<input type="button" value="调用bar函数" onclick="bar()"/>
</boyd>
<html>

从执行结果可以看出，foo函数被正确执行，并输出了正确的结果数字7。因此在嵌套函数中，子函数内部可以访问父函数声明的变量。
bar函数执行失败，显然在函数体内嵌套的函数是不能被外部调用的，其作用域仅限于函数内