JavaScript函数基础：定义、调用、参数与返回值详解

作者：纸飞机时间：2026-10-29 18:19:18浏览：657

本文系统梳理JavaScript函数的核心概念，涵盖函数的定义语法、调用方式（脚本内与HTML事件）、带参函数的使用、return返回值机制，以及全局与局部变量的作用域区别。通过具体代码示例，帮助开发者理解如何有效封装代码、避免变量污染，并掌握函数在JavaScript中的实际应用。

JavaScript函数基础：定义、调用、参数与返回值详解

1、什么是函数若需多次执行同一段代码，可将其封装为函数。函数（function）是一组允许在代码中随时调用的语句集合，每个函数本质上是一个短小的脚本。例如：需要计算多组数字的和。

什么是函数


var sum;
sum = 3+2;
alear(sum);
 
sum = 7+8;
alear(sum);
......//不停的重复两行代码

若需计算8组数字的和，直接编写需16行代码，需求越多，代码行数随之增加。因此，可将完成特定功能的代码块放入函数中，直接调用该函数，从而避免重复输入大量代码。使用函数实现如下：


function add(a,b){
  sum = a+b;//只需要写一次就可以
 };
 add2(3,2);
 add2(7,8);
 ......//只需要调用函数就可以

2、定义函数定义函数的语法如下：

定义函数


 function 函数名(参数argument){
　　函数体statements;
 }
 //function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。


function shout(){
   var beatles = Array("John","Paul","George","Ringo");
   for (var count = 0; count < beatles.length; count++){
     alert(beatles[count]);
   }
 }
 //这个函数里面的循环语句将依次弹出对话框来显示beatles里面内容。 
 shout();调用函数，执行脚本里的动作

实现两个数求和并显示结果的功能：

函数调用


<script type="text/javascript">
  function add2(){
    sum = 3+2;
    alert()sum;
   }
   add2();
 </script>

3、函数调用函数定义后不会自动执行，需在需要的位置直接书写函数名进行调用。第一种情况：在<script>标签内调用。


<script type="text/javascript">
   function add(){
     sum = 1+1;
     alert(sum);
  }
   add();//调用函数，直接写函数名。
</script>

第二种情况：在HTML文件中调用，例如通过点击按钮触发已定义的函数。


<html>
 <head>
 <script type="text/javascript">
   function add2(){
     sum = 5 + 6;
     alert(sum);
   }  
 </script>
 </head>
 <body>
 <form>
  <input type="button" value="click it" onclick="add2()"> //按钮,onclick点击事件，直接写函数名
 </form>
 </body>
 </html>

4、有参数的函数定义函数时可采用以下格式： function 函数名(参数1，参数2){ 函数代码 } 定义函数时，可声明任意多个参数，以逗号分隔。在函数内部，可像使用普通变量那样使用任一参数。按此格式，实现任意两数之和的代码应写为：

有参数的函数


function add2(x,y){
   sum = x + y;
   document.write(sum);
 }
 //x和y则是函数的两个参数，调用函数的时候，我们可通过这两个参数把两个实际的加数传递给函数了。

实现以下功能：定义名为add3的函数，计算三个数的和。分别计算5、8、3与7、1、4两组三个数的和。


 <script type="text/JavaScript">
   function add3(x,y,z) {
   sum = x + y +z;
     document.write(x+"、"+y+"、"+z+"和:"+sum+"<br/>");
   }
   add3(5,8,3);
   add3(7,1,4); 
 </script>

5、返回值的函数函数不仅能以参数形式接收数据，还能返回数据。可创建函数并返回一个值、字符串、数组或布尔值，这需要使用return语句。

返回值的函数


 function multiply(num1,num2){
   var total = num1*num2;
   return total;
 }

此前通过"document.write"输出结果，现改用函数输出。只需将"document.write(sum)"这行代码修改为：


 function add2(x,y){
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
 }
 //还可以通过变量存储调用函数的返回值：
 result = add2(3,4);//语句执行后，result变量中的值为7。

示例：以下函数仅含一个参数（华氏温度值），将返回对应数值（同一温度的摄氏温度值）：


 <script type="text/javascript">
   function convertToCelsius (temp) {
     var result = temp - 32;
     result = result / 1.8;
     return result;
   }
   //函数的真正价值体现在，我们还可以把它们当做一种数据类型来使用，这意味着可以把一个函数的调用结果赋给一个变量：
   var temp_fahrenheit = 95;
   var temp_celsius = convertToCelsius(temp_fahrenheit);
   alert(temp_celsius);
 </script>

JavaScript函数基础：定义、调用、参数与返回值详解

变量的作用域

在此例中，变量temp_celsius的值为35，该数值由convertToCelsius函数返回。命名变量时，使用下划线分隔单词；命名函数时，从第二个单词起采用首字母大写形式（即驼峰命名法）。 1）、变量的作用域变量可分为全局变量与局部变量。全局变量（global variable）可在脚本中任何位置被引用。一旦在脚本中声明全局变量，即可从脚本内任何位置——包括函数内部——引用它。全局变量的作用域覆盖整个脚本。局部变量（local variable）仅存在于声明它的函数内部，在函数外部无法引用。局部变量的作用域仅限于特定函数。可使用var关键字明确为函数变量设定作用域。若在函数中使用var，该变量被视为局部变量，仅存在于函数上下文中；反之，若未使用var，该变量被视为全局变量。若脚本中已存在同名全局变量，该函数将修改该全局变量的值。示例：


function square(num){
   total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
alert(total);

此处存在错误，number的值为400，但alert弹出的是total的值，应为50。

这些代码将不可避免地导致全局变量total的值发生变化。

全局变量total的值变为400。本意是让square()函数仅将计算出的平方值返回给变量number，但因未将函数内部total变量明确声明为局部变量，该函数同时修改了同名全局变量的值。

将函数改写为以下形式才是正确的：


 function square(num){
   var total = num*num;
   return total;
 }
 var total = 50;
 var number = square(20);
 alert(total);
 </script>

正确结果：

JavaScript函数基础：定义、调用、参数与返回值详解

以上为JavaScript函数的学习笔记，还涉及部分变量知识点，希望对大家的学习有所帮助。

作者最新文章

JS动态构建复杂嵌套JSON对象的方法

2026-11-05 15:41:52

JS负数取余为什么是负数？详解余数与模运算区别

2026-11-05 13:34:41

JS 解压出现乱码或报错怎么解决？

2026-11-05 12:32:38

JS 中 startsWith、indexOf 与正则判断字符串前缀的对比

2026-11-04 22:19:43

JS解析Excel后怎么将数据转换为JSON格式

2026-11-04 20:58:28