Skip to content

JavaScript 函数

函数声明、箭头函数、参数、返回值与闭包。

你将学到

  • 函数声明、函数表达式与箭头函数的区别
  • 参数、默认值与剩余参数(...args)
  • return 语句以及忘记它为什么会返回 undefined
  • 普通函数与箭头函数中 this 的行为差异
  • 什么是闭包以及它为何有用

概念讲解

编写函数的三种方式

// 1. 函数声明——会被提升,可以在定义之前调用
function add(a, b) {
  return a + b;
}

// 2. 函数表达式——不会被提升
const subtract = function (a, b) {
  return a - b;
};

// 3. 箭头函数——简洁,没有自己的 this
const multiply = (a, b) => a * b;

参数与默认值

函数接受参数,并可以给它们默认值:

function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
greet("Ada");           // "Hello, Ada!"
greet("Ada", "Hi");     // "Hi, Ada!"

剩余参数 ...args 把多余的实参收集成数组:

function sum(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}
sum(1, 2, 3, 4); // 10

返回值

函数如果没有 return 语句或单独使用 return,则返回 undefined。忘记 return 是新手最常见的错误之一:

function double(x) {
  x * 2; // ← 忘了 return!返回 undefined
}
function doubleFixed(x) {
  return x * 2; // 正确
}

箭头函数与 this

箭头函数没有自己的 this——它从外层作用域继承。这使它非常适合回调,但不适合需要 this 的对象方法:

const obj = {
  value: 42,
  regular: function () { return this.value; },     // 42
  arrow: () => this.value,                          // undefined——没有自己的 this
};

闭包

闭包是一个记住了创建环境的函数,即使外层函数已经返回。这是创建私有状态的方式:

function makeCounter() {
  let count = 0;
  return () => ++count; // "记住"了 count
}
const counter = makeCounter();
counter(); // 1
counter(); // 2
counter(); // 3

闭包驱动了许多模式:模块工厂、记忆化、偏函数应用和 React hooks。

示例代码

              // 带默认参数的函数声明
function greet(name, greeting = "Hello") {
  return `${greeting}, ${name}!`;
}
console.log(greet("Ada"));        // "Hello, Ada!"
console.log(greet("Ada", "Hi"));  // "Hi, Ada!"

// 箭头函数——适合简短的转换
const square = (n) => n * n;
console.log(square(5)); // 25

// 剩余参数收集多余实参
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);
console.log(sum(1, 2, 3, 4)); // 10

// 闭包:记住创建环境的函数
function makeAdder(base) {
  return (n) => base + n; // 记住了 base
}
const addTen = makeAdder(10);
console.log(addTen(5));  // 15
console.log(addTen(20)); // 30

本例展示了带默认值的声明、箭头函数、剩余参数,以及闭包(makeAdder)。闭包让你可以创建记住配置的函数。

动手试一试

  • Math Evaluator

    计算数学表达式——类似于函数返回的结果。

  • Regex Tester

    函数经常封装正则逻辑——在线测试模式。

常见错误

错误写法

忘记写 return 关键字

正确做法

没有显式 return 的函数会返回 undefined。如果你的函数应该产生一个值,确保写上 return value;。

错误写法

把箭头函数当对象方法用,却期望 this 正常工作

正确做法

箭头函数没有自己的 this——它从外层作用域继承。需要 this 的对象方法请使用普通函数或方法简写。

相关资源

相关代码片段

相关速查表

练习 JavaScript 函数

2 个练习

练习 JavaScript 函数

查阅不认识的术语

新手友好的术语表用大白话解释编程术语——变量、函数、DOM、Promise 等等。

查看术语表

动手做项目

通过引导式项目应用所学，含起始代码与解决方案。

查看项目

解读错误信息

用大白话解释常见错误——什么意思、为什么发生、如何修复。

查看错误