JavaScript 声明函数的 5 种方法对比

结果或目标

在 JavaScript 开发中，函数是核心组件。不同的声明方式不仅影响代码的可读性，还涉及作用域规则与 this 关键字的绑定行为。了解这五种方法的机制，能帮助我们在编写更简洁、易维护的代码时做出正确选择。

准备条件

本教程适用于所有阶段的 JavaScript 开发者。为了最佳实践效果，建议在支持 ES6+（ECMAScript 2015 及以上）的现代浏览器环境中进行测试，因为部分特性如箭头函数依赖于较新的引擎标准。

真实操作顺序

第1步：使用 Function 声明（常规函数声明）

目的：最常用的传统定义方式，具有变量提升特性。

入口：使用 function 关键字。

动作：

function foo() {
    console.log('这是一个函数的打印结果');
}

// 调用示例
foo();

参数说明：可在括号内传入动态参数，并在函数体内通过引用处理数据。
完成状态：函数被成功加载至当前作用域并可通过名称随时调用，即使写在调用语句之后也能正常工作（因提升机制）。

第2步：理解并赋值匿名函数

目的：掌握无函数名的基础构造体，通常作为函数表达式的基底。

入口：function 关键字后直接跟随括号。

动作：

// 注意：裸写的匿名函数无法独立访问，必须通过变量保存
let foo = function() {
    console.log('这是一个匿名函数的打印');
};
foo();

重要参数：该形式通常立即赋值给变量，从而转换为“函数表达式”。
完成状态：变量内存地址持有匿名函数实例。

第3步：采用函数表达式（Function Expression）

目的：将函数赋值给变量，实现按需初始化。

入口：变量声明（let/const/var + = + function...）。

动作：

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

// 验证结果
console.log(add(1, 2)); // 输出 3

区别点：不同于普通声明，函数表达式不会发生提升，必须在定义之后才能调用。
可观察状态：执行后返回预期的运算结果或触发预期回调。

第4步：应用箭头函数（Arrow Functions）

目的：使用 ES6 语法简化单行或多行逻辑，并继承父级 this 上下文。

入口：使用 (()=> ...) 语法糖。

动作：

// 单参数单语句省略写法
let sayHi = name => `Hello ${name}`;

// 多语句需加花括号
let checkAge = (age) => {
    if (age > 18) {
        console.log('成年');
    } else {
        console.log('未成年');
    }
};

checkAge(20);

优势：语法极其精简，且其内部没有自己的 this，而是捕获定义时所在的上下文对象。
适用场景：非常适合用作非方法调用的回调函数（如事件监听）。

第5步：使用 Function 构造函数

目的：通过字符串动态创建函数（现代开发极少推荐，主要用于元编程场景）。

入口：new Function(...)

动作：

let sum = new Function("a", "b", "return a + b");
console.log(sum(5, 6)); // 输出 11

注意事项：最后一个参数字符串被视为函数体，前面的参数被视为形参名。此方式在沙箱中运行可能带来安全漏洞，且无法访问定义时的词法作用域，仅能访问全局作用域。

完成判断

当上述五种方式的代码均能在控制台正确输出预期日志或数值时，即完成了对各类声明形态的认知与实践。对于多数日常项目，应优先确保能够熟练使用前四种静态定义的规范模式。

原文有依据的排错

许多初学者容易混淆匿名函数和函数表达式的边界，实际上它们是包含与被包含的关系——函数表达式本质上是匿名的函数主体赋给一个标识符的过程。此外，务必警惕构造函数形式下 this 始终指向全局环境（window 或 global），而非预期对象的问题，这是导致 Bug 的常见根源。

简要总结

关于 JavaScript 函数声明的五种主要方法已介绍完毕。虽然它们最终都能达成调用逻辑的目标，但在实际工程实践中，强烈建议遵循团队编码规范并尽可能坚持使用箭头函数（针对回调场景）或常规声明（针对具名复用逻辑），以此兼顾性能表现、可读性以及清晰的词法绑定关系。 以上就是 JavaScript 声明函数的 5 种方法对比的详细内容，更多关于 JavaScript 函数定义的资料请关注本站其它相关文章！