JavaScript 函数定义
定义函数
在JavaScript中,定义函数的方式如下:
function abs(x) {
if (x >= 0) { return x;
} else { return -x;
}
}
上述abs()函数的定义如下:
function指出这是一个函数定义;abs是函数的名称;(x)括号内列出函数的参数,多个参数以,分隔;{ ... }之间的代码是函数体,可以包含若干语句,甚至可以没有任何语句。
请注意,函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回。因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑。
如果没有return语句,函数执行完毕后也会返回结果,只是结果为undefined。
由于JavaScript的函数也是一个对象,上述定义的abs()函数实际上是一个函数对象,而函数名abs可以视为指向该函数的变量。
因此,第二种定义函数的方式如下:
var abs = function (x) {
if (x >= 0) { return x;
} else { return -x;
}
};
在这种方式下,function (x) { ... }是一个匿名函数,它没有函数名。但是,这个匿名函数赋值给了变量abs,所以,通过变量abs就可以调用该函数。
上述两种定义完全等价,注意第二种方式按照完整语法需要在函数体末尾加一个;,表示赋值语句结束。
函数是 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 函数可以通过一个表达式定义。
函数表达式可以存储在变量中:
var x = function (a, b) {return a * b};
在函数表达式存储在变量后,变量也可作为一个函数使用:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> var x = function (a, b) {return a * b}; document.getElementById("demo").innerHTML = x(6, 9); </script> </body> </html>
函数提升(Hoisting)
在之前的教程中我们已经了解了 "hoisting(提升)"。
提升(Hoisting)是 JavaScript 默认将当前作用域提升到前面去的的行为。
提升(Hoisting)应用在变量的声明与函数的声明。
因此,函数可以在声明之前调用:
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表达式定义函数时无法提升。
arguments
JavaScript还有一个免费赠送的关键字arguments,它只在函数内部起作用,并且永远指向当前函数的调用者传入的所有参数。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript"> function foo(x) { alert(x); // 10 for (var i=0; i<arguments.length; i++) { alert(arguments[i]); // 10, 20, 30 } } foo(10, 20, 30); </script> </head> <body> </body> </html>
函数是对象
在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。
但是JavaScript 函数描述为一个对象更加准确。
JavaScript 函数有 属性 和 方法。
arguments.length 属性返回函数调用过程接收到的参数个数:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <p id="demo"></p> <script> function myFunction(a, b) { return arguments.length; } document.getElementById("demo").innerHTML = myFunction(4,7,3); </script> </body> </html>