JavaScript函数
6119字,阅读需时21分钟

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

1、定义函数

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

显示定义函数

显示定义函数通过函数声明来定义,定义语法如下:

function functionname(parameters){
   函数代码
}

其中,function是定义函数的关键字,functionname是函数名称,parameters是函数传入的参数,可以传入多个参数,每个参数之间用英文逗号分隔。

JS函数不需要声明返回类型,当函数需要返回值时,直接使用return语句返回即可。

案例3:显示定义函数案例代码(案例代码见unit1\case3.html):

<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就可以调用函数。

2、函数的调用

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(“您单击了该链接”)

案例4:使用超链接调用函数的网页代码(案例代码见unit1\case4.html):

<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>

3、 内置函数

JavaScript内部提供了一些函数,开发者可以直接使用这些函数,提高编程效率和JS程序的稳定性。下表列出了常用的JS内置函数。

006.png

4、  嵌套函数

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代码:

案例5:嵌套函数案例代码(案例代码见unit1\case5.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函数执行失败,显然在函数体内嵌套的函数是不能被外部调用的,其作用域仅限于函数内部。

读者留言
最新
推荐
郎宏林
授课老师
授课老师简介
项目经理,系统分析和架构师,从事多年中文信息处理技术。熟悉项目管理、擅长项目需求分析和设计、精通Java、C#、Python等编程语言。