JavaScript 函数全面解析 - 从基础到高级应用

JavaScript 函数全面解析 - 从基础到高级应用

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial

函数基础概念

函数是 JavaScript 中最核心的概念之一，它是一段可以反复调用的代码块，能够接受输入参数并返回不同的值。理解函数的工作原理对于掌握 JavaScript 至关重要。

函数的三种声明方式

1. function 命令声明

这是最传统的函数声明方式：

function greet(name) {
  return `Hello, ${name}!`;
}

特点：

• 函数名 greet 会被提升（hoisting）
• 适合定义需要多次调用的函数

2. 函数表达式

将匿名函数赋值给变量：

const greet = function(name) {
  return `Hello, ${name}!`;
};

特点：

• 更灵活，可以像普通变量一样使用
• 适合作为回调函数或立即执行函数

3. Function 构造函数

不推荐在实际开发中使用：

const add = new Function('x', 'y', 'return x + y');

特点：

• 动态生成函数代码
• 存在安全风险且性能较差

函数提升与重复声明

JavaScript 中的函数声明会被提升到当前作用域的顶部，这意味着你可以在声明前调用函数：

foo(); // 正常工作
function foo() {}

但要注意重复声明会覆盖之前的定义：

function foo() { console.log(1); }
function foo() { console.log(2); }
foo(); // 输出 2

函数参数详解

参数传递机制

• 基本类型：传值（pass by value）

  let a = 1;
  function change(num) { num = 2; }
  change(a);
  console.log(a); // 仍然是 1
  

• 引用类型：传引用（pass by reference）

  let obj = { value: 1 };
  function change(o) { o.value = 2; }
  change(obj);
  console.log(obj.value); // 变为 2
  

arguments 对象

每个函数内部都可以访问 arguments 对象，它包含所有传入的参数：

function sum() {
  let total = 0;
  for(let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}
sum(1, 2, 3); // 6

现代 JavaScript 更推荐使用剩余参数(...args)替代 arguments。

函数作用域与闭包

作用域规则

JavaScript 采用词法作用域（lexical scoping），函数的作用域在定义时确定：

let x = 1;

function outer() {
  let x = 2;
  function inner() {
    console.log(x); // 2，访问 outer 的 x
  }
  return inner;
}

const fn = outer();
fn(); // 输出 2

闭包原理与应用

闭包是指能够访问外部变量的函数（外部变量是指在函数中使用的，但既不是函数参数也不是函数局部变量的变量）。

经典计数器示例：

function createCounter() {
  let count = 0;
  return function() {
    count++;
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

闭包的实际应用场景：

1. 数据封装和私有变量
2. 函数工厂（创建特定配置的函数）
3. 事件处理程序和回调
4. 函数柯里化

高级函数技巧

立即调用函数表达式(IIFE)

IIFE 可以创建独立作用域，避免污染全局命名空间：

(function() {
  let privateVar = 'secret';
  // 这里面的代码有自己的作用域
})();

现代模块系统已经很大程度上取代了 IIFE 的需求。

函数属性和方法

每个函数都有一些内置属性和方法：

function example(a, b, c) {
  // 函数体
}

// 函数名
console.log(example.name); // "example"

// 参数个数
console.log(example.length); // 3

// 源代码
console.log(example.toString()); 

递归函数

递归是函数调用自身的技术，适合解决分治类问题：

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}

注意事项：

• 必须有终止条件
• 注意调用栈深度限制
• 尾调用优化可以提升性能

函数式编程基础

JavaScript 支持函数式编程范式，主要特性包括：

1. 高阶函数：接受或返回函数的函数

   function map(arr, fn) {
     const result = [];
     for (let item of arr) {
       result.push(fn(item));
     }
     return result;
   }
   

2. 纯函数：相同输入总是产生相同输出，没有副作用

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

3. 函数组合：将多个函数组合成新函数

   const compose = (f, g) => x => f(g(x));
   

性能与最佳实践

1. 避免不必要的函数创建：特别是在循环内部
2. 合理使用闭包：注意内存泄漏风险
3. 优先使用函数声明：提升行为更可预测
4. 限制递归深度：考虑使用迭代替代深度递归
5. 善用箭头函数：简洁的语法适合回调场景

// 不好的做法
for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(i);
  }, 100);
}

// 改进做法
for (let i = 0; i < 10; i++) {
  setTimeout(() => console.log(i), 100);
}

通过深入理解 JavaScript 函数的各种特性和模式，开发者可以编写出更简洁、更高效、更易维护的代码。函数作为 JavaScript 的一等公民，其灵活性和强大功能是这门语言的核心魅力所在。

jstutorial Javascript tutorial book 项目地址: https://gitcode.com/gh_mirrors/js/jstutorial