JavaScript 函数

什么是函数?

函数是一组可重复使用的代码块,在 JavaScript 中,函数由事件驱动或者被其他代码调用。

函数是 JavaScript 语言的核心之一,其基本语法如下:

function functionName(arg0, arg1, ...) {
   statements
}

语法解读

使用 function 关键字定义一个函数

function 关键字空格之后紧跟函数名

函数名字后面是一对小括弧,arg0, arg1 表示函数的参数,参数之间以 , 号分隔,参数个数可以为 0-25 个(0即表示无参数)。在没有参数时,() 括号不可省略,超过25个的参数,将被JavaScript忽略

{} 是函数体,里面是该函数要实现的功能语句

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function hello(name){
    document.write(name + ",你好!");
}
</script>
</head>
<body>
  <input type="button" onclick="hello('小明')" value="确定" />
</body>
</html>

JavaScript 函数命名

通常,我们推荐函数的名字使用小驼峰命名法,并以函数名能大致描述该函数功能或特性为宜。小驼峰法是指,首字符小写,后面其他单词的首字母大写,下面是一些函数命名例子:

function changeName(){
   ...
}
function getAgeByInput(){
   ...
}

也有不少人使用下划线来分割函数名中的单词,如 change_name,这也是可以的,实际执行可依照具体项目规范。

特别地,函数前加 _ 符号(如 _getName),一般约定俗成表示类(对象)的私有方法。

JavaScript 函数内的变量

如果一个变量在函数体内被声明,则只能在该函数中访问该变量。这样,您可以在不同的函数内使用名称相同的变量。

如果在函数之外声明了一个变量,则 Web 页面上的所有函数都可以访问该变量。

JavaScript 函数参数

JavaScript 函数允许没有参数(但包含参数的小括号不能省略),也可以向函数传递参数供函数使用。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function hello(name,age){
    document.write("我叫" + name + ",今年" + age + "岁!");
}
</script>
</head>
<body>
  <input type="button" onclick="hello('小明',18)" value="确定" />
</body>
</html>

运行该例子,点击 确定 按钮,输出:

我叫小明,今年18岁!

如上例所示,传入的值是字符串时,需要加上引号;传入的值是数字,不需要加引号。

JavaScript 函数参数错误

JavaScript 函数参数并没有严格要求哪些参数是必选参数,哪些参数是可选参数,因此传入的参数个数是允许不等于定义函数时参数的个数的。

如果在函数中使用了未定义的参数,则会提示语法错误(参数未定义),JavaScript 代码不会正常运行。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function hello(name,age){
    document.write("我叫" + name + ",今年" + age + "岁!");
}
</script>
</head>
<body>
  <input type="button" onclick="hello('小明')" value="确定" />
</body>
</html>

运行该例子,点击 确定 按钮,输出:

我叫小明,今年undefined岁!

JavaScript 函数 return

JavaScript 函数的 return 语句用来规定从函数返回的值。当一个函数运行后,要得到一个运行结果,就需要使用 return 语句来返回该结果。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script type="text/javascript">
function sum(x,y){
    return x+y;
}
result = sum(2,3);
document.write( result );
</script>
</head>
<body>
</body>
</html>

运行该例子输出:5

无返回值的 return 语句

如果函数无返回值,那么可以调用没有参数的 return 运算符,随时退出函数:

<script type="text/javascript">
function sum(x,y){
   if( x<y ){
       return;
   }else{
return x-y;
   }
}
</script>


局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。


全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。


JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。


向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

这条语句:

carname="Volvo";

将声明一个全局变量 carname,即使它在函数内执行。



继续学习
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function hello(name,age){ document.write("我叫" + name + ",今年" + age + "岁!"); } </script> </head> <body> <input type="button" onclick="hello('小明',18)" value="确定" /> </body> </html>
提交重置代码