JavaScript 函数

JavaScript 是函数式编程语言,在 JavaScript 脚本中可以随处看到函数,函数构成了 JavaScript 源代码的主体。一般来说,要掌握 JavaScript 语言,首先要掌握函数的应用。

JavaScript 函数是被设计为执行特定任务的代码块,会在某代码调用它时被执行。


实例

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 函数</h2>
  5. <p>本例调用了一个执行计算的函数,然后返回结果:</p>
  6. <p id="demo">
  7. <script>
  8. function myFunction(p1, p2) {
  9. return p1 * p2;
  10. }
  11. document.getElementById("demo").innerHTML = myFunction(7, 8);
  12. </script>
  13. </body>
  14. </html>

JavaScript 定义函数

JavaScript 定义函数方法由两种。

  • 使用 function 语句声明函数。
  • 使用 function 对象来构造函数,把函数看作一个复杂的表达式,并把表达式赋值给变量。
  1. //方式1:命名函数,也称为声明式函数
  2. function name(参数 1, 参数 2, 参数 3) {
  3. 要执行的代码
  4. }
  1. //方式2:匿名函数,也称为引用式函数
  2. var f = function(参数 1, 参数 2, 参数 3) {
  3. 要执行的代码
  4. }

JavaScript 函数通过 function 关键词进行定义,其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号(规则与变量名相同)。

圆括号可包括由逗号分隔的参数:

  1. (参数 1, 参数 2, ...)

函数调用

函数中的代码将在其他代码调用该函数时执行:

  • 当事件发生时(当用户点击按钮时)
  • 当 JavaScript 代码调用时
  • 自动的(自调用)

函数返回

当 JavaScript 到达 return 语句,函数将停止执行。

如果函数被某条语句调用,JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者。

计算两个数的乘积,并返回结果:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 函数</h2>
  5. <p>本例调用了一个执行计算的函数,然后返回结果:</p>
  6. <p id="demo">
  7. <script>
  8. var x = myFunction(7, 8);
  9. document.getElementById("demo").innerHTML = x;
  10. function myFunction(a, b) {
  11. return a * b;
  12. }
  13. </script>
  14. </body>
  15. </html>

为何使用函数?

您能够对代码进行复用:只要定义一次代码,就可以多次使用它。

您能够多次向同一函数传递不同的参数,以产生不同的结果。

把华氏度转换为摄氏度:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 函数</h2>
  5. <p>本例调用函数把华氏度转换为摄氏度:</p>
  6. <p id="demo">
  7. <script>
  8. function toCelsius(f) {
  9. return (5/9) * (f-32);
  10. }
  11. document.getElementById("demo").innerHTML = toCelsius(86);
  12. </script>
  13. </body>
  14. </html>

() 运算符调用函数

使用上面的例子,toCelsius 引用的是函数对象,而 toCelsius() 引用的是函数结果。

访问没有 () 的函数将返回函数定义:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 函数</h2>
  5. <p>不使用 () 访问函数将返回函数声明而不是函数结果:</p>
  6. <p id="demo">
  7. <script>
  8. function toCelsius(f) {
  9. return (5/9) * (f-32);
  10. }
  11. document.getElementById("demo").innerHTML = toCelsius;
  12. </script>
  13. </body>
  14. </html>

用作变量值的函数

函数的使用方法与变量一致,在所有类型的公式、赋值和计算中。

使用变量来存储函数的值:

  1. var x = toCelsius(77);
  2. var text = "The temperature is " + x + " Celsius";

您能够把函数当做变量值直接使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 函数</h2>
  5. <p id="demo">
  6. <script>
  7. document.getElementById("demo").innerHTML = "温度是:" + toCelsius(86) + " 摄氏度。";
  8. function toCelsius(fahrenheit) {
  9. return (5/9) * (fahrenheit-32);
  10. }
  11. </script>
  12. </body>
  13. </html>

局部变量

在 JavaScript 函数中声明的变量,会成为函数的局部变量。

局部变量只能在函数内访问。

  1. // 此处的代码不能使用 carName
  2. function myFunction() { var carName = "沃尔沃"; // 此处代码才可以使用 carName }
  3. // 此处的代码可以使用 carName

由于局部变量只能被其函数识别,因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建,在函数完成时被删除。