🚀 函数声明与函数表达式的区别是什么？

📅 发布于 2026年1月 | 👤 作者：博主 | 🏷️ 标签：函数声明, 函数表达式, 变量提升, JavaScript, Web开发, 前端, 面试

欢迎来到我的博客文章！所有文章都是满满的前端干货，文章简明扼要。

一、语法形式对比

✅ 函数声明

function myFunction() {
  console.log('这是函数声明');
}

✅ 函数表达式（Function Expression）

const myFunc = function() {
  console.log('这是函数表达式');
};

// 或带名字（命名函数表达式）
const myFunc2 = function namedFn() {
  console.log('这是命名函数表达式');
};

二、核心区别：变量提升（Hoisting）

这是两者最根本的区别！

🔹 函数声明：整个函数被提升

myFunction(); // ✅ 正常执行！

function myFunction() {
  console.log('Hello');
}

JS 引擎会将整个函数体提升到作用域顶部。

可以在定义之前调用。

🔹 函数表达式：只有变量声明被提升，赋值不会

myFunc(); // ❌ TypeError: myFunc is not a function

const myFunc = function() {
  console.log('Hello');
};

const/let 声明的变量存在暂时性死区（TDZ），在赋值前访问会报错。

三、对比总结表

特性 函数声明 函数表达式
语法 function name() {} const name = function() {}
变量提升 ✅ 整个函数提升 ❌ 只有变量声明提升
定义前调用 ✅ 可以 ❌ 不可以
必须有名字 ✅ 是 ❌ 否（可匿名）
作为值传递 需要引用名字 ✅ 直接作为值

四、典型使用场景

✅ 函数声明：适用于通用工具函数、顶层逻辑

// 工具函数
function formatDate(date) {
  return date.toISOString();
}

// 顶层逻辑
function init() {
  setupEventListeners();
  loadData();
}

✅ 函数表达式：适用于回调、对象方法、模块化、IIFE

// 回调函数
setTimeout(function() {
  console.log('延迟执行');
}, 1000);

// 对象方法
const obj = {
  method: function() {
    console.log('对象方法');
  }
};

// IIFE（立即执行函数表达式）
(function() {
  console.log('立即执行');
})();

五、最佳实践建议

💡 推荐做法

← 返回首页