函数基础

函数是JavaScript编程的核心概念之一，理解函数的基础用法是编写高效代码的关键。函数可以封装逻辑、重复使用代码，还能通过参数和返回值实现灵活的数据处理。

函数的定义与调用

JavaScript中定义函数主要有三种方式：

1. 函数声明：

function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Alice')); // 输出: Hello, Alice!

2. 函数表达式：

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

3. 箭头函数（ES6新增）：

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

函数调用时，括号()是执行的关键：

function calculate(a, b) {
  return a * b;
}
const result = calculate(3, 4); // 返回12

参数与返回值

函数参数支持默认值（ES6）：

function createUser(name, role = 'user') {
  return { name, role };
}
console.log(createUser('Bob')); // 输出: {name: "Bob", role: "user"}

不定参数使用剩余参数语法：

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3)); // 输出6

返回值可以是任意类型，包括函数：

function createMultiplier(factor) {
  return function(num) {
    return num * factor;
  };
}
const double = createMultiplier(2);
console.log(double(5)); // 输出10

作用域与闭包

函数作用域遵循词法作用域规则：

let globalVar = 'global';

function outer() {
  let outerVar = 'outer';
  
  function inner() {
    let innerVar = 'inner';
    console.log(globalVar, outerVar, innerVar); // 可以访问所有变量
  }
  
  inner();
  console.log(innerVar); // 报错: innerVar未定义
}

闭包示例：

function counter() {
  let count = 0;
  return function() {
    return ++count;
  };
}
const myCounter = counter();
console.log(myCounter()); // 1
console.log(myCounter()); // 2

高阶函数

接收函数作为参数或返回函数的函数称为高阶函数：

// 接收函数作为参数
function repeat(n, action) {
  for (let i = 0; i < n; i++) {
    action(i);
  }
}
repeat(3, console.log); // 输出0 1 2

// 返回函数
function greaterThan(n) {
  return m => m > n;
}
const greaterThan10 = greaterThan(10);
console.log(greaterThan10(15)); // true

数组常用高阶函数：

const numbers = [1, 2, 3, 4];

// map
const squares = numbers.map(x => x * x); // [1, 4, 9, 16]

// filter
const evens = numbers.filter(x => x % 2 === 0); // [2, 4]

// reduce
const sum = numbers.reduce((acc, x) => acc + x, 0); // 10

this关键字

函数内的this值取决于调用方式：

const obj = {
  name: 'My Object',
  logName: function() {
    console.log(this.name);
  }
};

obj.logName(); // "My Object"
const log = obj.logName;
log(); // undefined（严格模式下报错）

箭头函数不绑定自己的this：

function Timer() {
  this.seconds = 0;
  setInterval(() => {
    this.seconds++; // 正确引用Timer实例
    console.log(this.seconds);
  }, 1000);
}
new Timer();

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

创建独立作用域的常见模式：

(function() {
  let privateVar = 'secret';
  console.log('IIFE executed');
})();

// 模块模式
const counterModule = (function() {
  let count = 0;
  
  return {
    increment() { count++; },
    getCount() { return count; }
  };
})();

递归函数

函数调用自身的模式：

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}
console.log(factorial(5)); // 120

尾递归优化（ES6）：

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

生成器函数

使用function*定义的函数可以暂停执行：

function* idGenerator() {
  let id = 1;
  while (true) {
    yield id++;
  }
}

const gen = idGenerator();
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

异步函数

async/await语法糖：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch failed:', error);
  }
}

函数式编程基础

纯函数示例：

// 纯函数
function add(a, b) {
  return a + b;
}

// 非纯函数
let counter = 0;
function increment() {
  return ++counter;
}

函数组合：

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);

const toUpperCase = str => str.toUpperCase();
const exclaim = str => str + '!';
const shout = compose(exclaim, toUpperCase);

console.log(shout('hello')); // "HELLO!"