JavaScript 函数基础教程：从入门到实践

JavaScript 函数基础教程：从入门到实践

什么是函数？

在编程中，我们经常需要在多个地方执行相同的操作。比如，当用户访问网站时显示欢迎消息，当用户离开时显示告别消息，或者在其他各种场景中显示提示信息。

函数就是为解决这类重复代码问题而设计的编程结构。它们是 JavaScript 中的基本构建块，就像乐高积木一样，可以组合起来构建复杂的程序。

函数的基本结构

一个典型的函数声明包含以下几个部分：

function functionName(parameters) {
  // 函数体 - 要执行的代码
}

• function 是声明函数的关键字
• functionName 是你给函数起的名字
• parameters 是函数的参数列表（可选）
• 大括号 {} 内是函数体，包含要执行的代码

实际示例

function greet() {
  console.log('你好，世界！');
}

// 调用函数
greet(); // 输出：你好，世界！
greet(); // 再次输出：你好，世界！

函数参数与返回值

参数传递

函数可以接收外部传入的值，这些值称为参数：

function greet(name) {
  console.log('你好，' + name + '！');
}

greet('张三'); // 输出：你好，张三！
greet('李四'); // 输出：你好，李四！

返回值

函数可以通过 return 语句返回结果：

function add(a, b) {
  return a + b;
}

let sum = add(3, 5);
console.log(sum); // 输出：8

变量作用域

局部变量

在函数内部声明的变量称为局部变量，只能在函数内部访问：

function showMessage() {
  let message = "这是局部变量";
  console.log(message); // 可以访问
}

showMessage();
console.log(message); // 报错：message未定义

全局变量

在函数外部声明的变量称为全局变量，可以在任何地方访问：

let globalVar = "我是全局变量";

function checkGlobal() {
  console.log(globalVar); // 可以访问
}

checkGlobal();
console.log(globalVar); // 也可以访问

函数命名最佳实践

好的函数命名应该：

1. 使用动词开头，描述函数的行为
2. 保持简洁但具有描述性
3. 遵循一致的命名约定

常见的前缀约定：

• get... - 获取值
• calc... - 计算值
• create... - 创建对象
• check... - 检查条件并返回布尔值
• show... - 显示内容

函数设计原则

1. 单一职责原则：一个函数应该只做一件事
2. 简洁性原则：函数应该尽可能短小精悍
3. 可读性原则：函数名应该清晰表达其功能
4. 避免副作用：理想情况下，函数不应该修改外部状态

高级特性

默认参数

ES6引入了默认参数语法：

function greet(name = "访客") {
  console.log('你好，' + name + '！');
}

greet(); // 输出：你好，访客！
greet('王五'); // 输出：你好，王五！

函数表达式

除了函数声明，还可以使用函数表达式：

const greet = function(name) {
  console.log('你好，' + name + '！');
};

greet('赵六');

常见错误与陷阱

1. 忘记return语句：函数没有return会返回undefined
2. 参数混淆：确保传递参数的顺序正确
3. 作用域问题：注意变量是在全局还是局部作用域
4. 意外的全局变量：在严格模式下可以避免

总结

函数是JavaScript编程的核心概念。掌握函数的使用能让你：

• 避免代码重复
• 提高代码可读性
• 更好地组织代码结构
• 构建更复杂的程序

记住，好的函数应该像黑盒子一样：有明确的输入（参数）和输出（返回值），内部实现细节对外部不可见。这种封装性是构建可维护代码的基础。