重温JavaScript：第五天函数剖析

2024-01-06 20:11:59

今天，我们将踏入JavaScript函数的迷人世界，探索它们的定义、范围和使用。

函数：代码的可重复利用模块

JavaScript函数是代码模块，可以重复利用，通过事件触发或显式调用来执行。它们为封装代码提供了便利，使代码更易于组织、重用和维护。

函数声明与作用域

普通函数声明

我们可以使用传统的函数声明来定义函数：

function myFunction() {
  // 函数体
}

表达式函数声明

另一种定义函数的方法是使用表达式函数声明：

const myFunction = function() {
  // 函数体
};

表达式函数声明的优势在于：

封装：我们可以将具有特定功能的代码封装成函数。
闭包：函数可以访问其声明作用域中的变量，即使该作用域已结束。

函数的执行

函数通过以下方式执行：

事件触发： 当与函数关联的事件（例如单击事件）发生时，函数被调用。
函数调用： 我们可以显式调用函数，就像这样：

myFunction();

JavaScript函数的特征

JavaScript函数具有以下特征：

参数： 函数可以接受参数，这些参数代表传递给函数的数据。
返回值： 函数可以返回一个值，代表函数执行的结果。
作用域： 函数具有自己的作用域，其中声明的变量只在函数内部可见。
类型： JavaScript函数是对象，这意味着我们可以将函数存储在变量中或将它们传递给其他函数。

实例与指南

让我们通过一个例子来理解函数的工作原理：

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

const result = add(3, 5); // 调用函数并存储结果
console.log(result); // 输出结果 8

技术指南

函数声明语法

function functionName(parameters) {
  // 函数体
  // ...
  return value; // 可选：返回值
}

调用函数

functionName(arguments);

案例研究：使用函数构建计算器

让我们构建一个简单的计算器函数来展示函数的实际应用：

function Calculator(num1, operator, num2) {
  switch (operator) {
    case '+':
      return num1 + num2;
    case '-':
      return num1 - num2;
    case '*':
      return num1 * num2;
    case '/':
      return num1 / num2;
  }
}

const result = Calculator(10, '+', 5);
console.log(result); // 输出结果 15