为何要将函数赋值给变量？JS两种函数写法的适用场景解析

你提到的两种写法，本质是函数表达式（示例1）和函数声明（示例2）的区别，表面调用方式一致，但在执行逻辑、适用场景上有核心差异，下面分点说明：

1. 变量提升的差异 #

这是最基础也最容易踩坑的区别：

• 函数声明会被完整提升到作用域顶部，在代码执行前就可以调用：

// 正常运行，函数声明已被提升
askQuestion();
function askQuestion() {
  return prompt('What\'s the first letter of your name?');
}

• 函数表达式只有变量本身被提升，函数体要等到赋值语句执行后才能调用：

// 报错：askQuestion is not a function，此时变量仅被声明为undefined
askQuestion();
var askQuestion = function() {
  return prompt('What\'s the first letter of your name?');
}

如果你的代码需要在函数定义位置之前调用它，只能用函数声明。

2. 动态赋值与作用域灵活性 #

函数表达式的核心优势是可以像普通变量一样赋值、传递，适配更多动态场景：

• 动态切换实现：根据条件给变量分配不同的函数逻辑

var askQuestion;
// 比如判断设备类型，切换交互方式
if (window.innerWidth < 768) {
  askQuestion = function() {
    return alert('请输入名字首字母');
  }
} else {
  askQuestion = function() {
    return prompt('What\'s the first letter of your name?');
  }
}

• 作为回调函数传递：这是Web开发中最常用的场景，比如事件监听、异步操作

// 点击按钮时执行匿名函数表达式
document.querySelector('button').addEventListener('click', function() {
  askQuestion();
});

函数声明无法直接做这类动态操作，因为它不能放在块级作用域（严格模式下会报错），也没法随时切换逻辑。

3. 匿名函数与立即执行逻辑 #

函数表达式可以是匿名的，适合不需要复用的一次性逻辑：

• 立即执行函数（IIFE）：创建独立作用域，避免污染全局变量

(function() {
  var tempData = '仅在这个作用域内可用';
  console.log(tempData);
})();
// 外部无法访问tempData

函数声明必须有名字，没法直接实现这种立即执行的私有逻辑。

4. 模块化与私有函数 #

在模块化开发中，函数表达式配合闭包可以隐藏内部逻辑，只暴露需要的接口：

var NameHandler = (function() {
  // 私有函数，外部无法访问
  function validateLetter(letter) {
    return /^[a-zA-Z]$/.test(letter);
  }

  // 暴露给外部的方法
  return {
    ask: function() {
      var letter = prompt('What\'s the first letter of your name?');
      return validateLetter(letter) ? letter : '输入无效';
    }
  }
})();

// 仅能通过NameHandler.ask调用，内部逻辑被封装
NameHandler.ask();

场景选择总结 #

• 用函数声明：当你需要在定义前调用函数，或者希望代码结构更清晰（比如把所有函数放在文件顶部）；
• 用函数表达式：当你需要动态切换逻辑、传递回调、创建私有作用域，或者只需要一次性执行的匿名逻辑。

内容的提问来源于stack exchange，提问作者Tomakairos