JavaScript的函数介绍

文章目录

[1. 定义函数的四种方式](#1. 定义函数的四种方式)
- [函数声明（Function Declaration）](#函数声明（Function Declaration）)
- [函数表达式（Function Expression）](#函数表达式（Function Expression）)
- [箭头函数（Arrow Function，ES6）](#箭头函数（Arrow Function，ES6）)
- [用 Function 构造函数（很少用）](#用 Function 构造函数（很少用）)
[2. 参数：更灵活的处理方式](#2. 参数：更灵活的处理方式)
- 默认参数
- [arguments 对象](#arguments 对象)
[3. 返回值](#3. 返回值)
[4. 作用域与闭包（非常重要）](#4. 作用域与闭包（非常重要）)
[5. this 的指向](#5. this 的指向)
[6. 高阶函数与回调](#6. 高阶函数与回调)
[7. 立即执行函数（IIFE）](#7. 立即执行函数（IIFE）)
[8. 其他现代函数形式](#8. 其他现代函数形式)

JavaScript 中的函数是一等公民，它不仅是封装代码、复用的基本单元，更是一种对象。

1. 定义函数的四种方式

函数声明（Function Declaration）

会被提升，可以在定义前调用。

bash 复制代码

function greet(name) {
  return 'Hello, ' + name;
}

函数表达式（Function Expression）

将函数赋值给变量，不会被提升。

c 复制代码

const greet = function(name) {
  return 'Hello, ' + name;
};

箭头函数（Arrow Function，ES6）

写法更简洁，且不绑定自己的 this、arguments。

bash 复制代码

const greet = (name) => 'Hello, ' + name;
// 多个语句需要用 {} 和 return
const sum = (a, b) => {
  const result = a + b;
  return result;
};

用 Function 构造函数（很少用）

bash 复制代码

const greet = new Function('name', 'return "Hello, " + name');

2. 参数：更灵活的处理方式

默认参数

bash 复制代码

function greet(name = '访客') {
  return `你好，${name}`;
}
greet(); // "你好，访客"

arguments 对象

在非箭头函数中可用，是一个类数组对象，包含所有传入的参数。

bash 复制代码

function oldStyle() {
  for (var i = 0; i < arguments.length; i++) {
    console.log(arguments[i]);
  }
}
oldStyle('Hello', 'World', 3);

3. 返回值

函数默认返回 undefined，用 return 可以返回任意值（包括另一个函数）。

bash 复制代码

function noReturn() {}
noReturn(); // undefined

4. 作用域与闭包（非常重要）

函数在创建时，会记住自己所在的作用域，形成闭包。

bash 复制代码

function createCounter() {
  let count = 0; // 这个变量被内部函数"记住"了
  return function() {
    count += 1;
    return count;
  };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2 --- 说明 count 仍然存活

闭包是实现模块化、数据私有的基础。

5. this 的指向

this 的值取决于函数的调用方式，而非定义方式。

bash 复制代码

const user = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  },
  sayArrow: () => {
    console.log(this.name); // this 指向 window/全局
  }
};
user.sayName(); // 'Alice'
user.sayArrow(); // undefined（视环境而定）

6. 高阶函数与回调

函数可以作为参数传递，或作为返回值------这就是高阶函数。

以下使用到了闭包。

bash 复制代码

// 回调函数
setTimeout(() => console.log('tick'), 1000);

// 数组方法的回调
const doubled = [1, 2, 3].map(x => x * 2); // [2,4,6]

// 返回函数的函数
function multiplyBy(factor) {
  return function(number) {
    return number * factor;
  };
}
const double = multiplyBy(2);
double(5); // 10

7. 立即执行函数（IIFE）

定义后立即执行，常用于创建独立作用域。

bash 复制代码

(function() {
  var secret = 'IIFE';
  console.log(secret);
})(); // 输出 IIFE，外部无法访问 secret

8. 其他现代函数形式

生成器函数 function*：可暂停和恢复，通过 yield 逐步产出值。

异步函数 async function：返回 Promise，用 await 等待异步结果，代码更像同步。

bash 复制代码

async function fetchData() {
  const res = await fetch('/api');
  return res.json();
}