详解JavaScript的函数简介

在 JavaScript 中，函数是一种重要的概念。函数是将代码封装成一个可执行的容器，可以通过调用函数来执行其中的代码。本文将详细介绍 JavaScript 函数的基本语法、定义方式、参数传递、值返回和作用域。

函数的基本语法

函数有以下基本语法：

function functionName(parameters) {
  // function body
  return value;
}

function 关键字用于声明函数，后面跟着函数名。在括号中，可以定义零个或多个形参，并在函数体中引用它们。函数体包含要执行的代码和 return 语句，用于返回函数的输出值。函数可以有或没有返回值，可以有或没有参数。

函数的定义方式

有三种常见的定义函数的方式：

函数声明

这是定义函数最常用的方式，函数声明可以放在任何地方：

function sum(x, y) {
  return x + y;
}

函数表达式

通过函数表达式创建的函数也被称为匿名函数，可以将函数值分配给变量，并传递到其他函数中：

var sum = function(x, y) {
  return x + y;
};

Function 构造函数

在 JavaScript 中，可以使用内置的 Function() 构造函数来定义函数：

var sum = new Function('x', 'y', 'return x + y');

参数传递

函数可以接受参数，这些参数作为函数的局部变量，在函数内部使用。JavaScript 中传递参数有两种方式，一种是传值，一种是传引用。传值表示将实际参数的值复制到函数的局部变量，而传引用表示将实际参数的引用复制给函数。

传值

var x = 10;

function changeValue(n) {
  n += 5;
}

changeValue(x);
console.log(x);
// 输出：10

在上面的代码中，x 值并没有改变，因为在调用 changeValue() 函数时，x 参数的值被复制到局部变量 n 中，并在函数内部增加 5。即使 n 被更改了，x 的值也不会受到影响。

传引用

var obj = {
  x: 10
};

function changeValue(obj) {
  obj.x += 5;
}

changeValue(obj);
console.log(obj.x);
// 输出：15

在上面的代码中，obj 的 x 值发生了变化，因为在调用 changeValue() 函数时，obj 参数的引用被复制给函数，并在函数内部修改 obj.x 的值。由于 obj 是一个对象，因此可以使用传引用传递给函数。

值返回

函数可以返回值，return 语句用于指定要返回的值。如果没有指定返回值，则函数的返回值为 undefined。

以下是一个示例：

function multiply(x, y) {
  return x * y;
}

var result = multiply(2, 3);
console.log(result);
// 输出：6

在上面的代码中，multiply() 函数返回 x 和 y 的乘积，并将其复制给 result 变量。

作用域

在 JavaScript 中，函数内部定义的所有变量都是局部变量。这意味着，它们只能在函数内部使用。

以下是一个示例：

function myFunction() {
  var message = 'Hello';

  console.log(message);
}

myFunction();
console.log(message);
// 输出：'Hello' 和 报错：message is not defined

在上面的代码中，message 变量是声明在 myFunction() 函数中的局部变量。因此，它只能在函数内部使用。当在函数外部尝试访问该变量时，会抛出错误。

示例说明

例子1：变量作用域

var x = 10;

function myFunction() {
  var x = 20;
  console.log(x);
}

myFunction();
console.log(x);

在上面的代码中，函数 myFunction() 内部定义了一个局部变量 x，因此局部变量 x 的值为 20。当在函数外部访问变量 x 时，其值为全局变量 x 的值，即 10。

例子2：使用闭包

function createCounter() {
  var count = 0;

  function increment() {
    count++;
    console.log(count);
  }

  return increment;
}

var counter1 = createCounter();
counter1();
counter1();

var counter2 = createCounter();
counter2();
counter2();
counter2();

在上述代码中，createCounter() 函数返回了一个内部函数 increment()，该函数可以使用外部函数的局部变量 count。通过调用 createCounter() 函数，我们可以得到两个不同的计数器。每次调用计数器上的函数 increment()，变量 count 的值都会增加，并在控制台中显示。由于每个计数器都存储在不同的闭包中，因此它们之间不会相互干扰，并且每个计数器都可以独立地工作。