小程序里为何偏爱 var？从一段代码看 var、let 和 const 的较量！

原创于 2025-03-13 17:47:53 发布 · 783 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #js #var #let #const

微信小程序WxMa 同时被 2 个专栏收录

109 篇文章

订阅专栏

35 篇文章

订阅专栏

🚀 小程序里为何偏爱 `var`？从一段代码看 `var`、`let` 和 `const` 的较量！

作者：辞无所假
日期：2025年3月13日
标签：JavaScript | 微信小程序 | 变量作用域

大家好！👋 最近在研究微信小程序代码时，我发现了一段让人“脑洞大开”的代码片段。里面用的是老朋友 var，而不是现代化的 let 或 const。这让我不禁思考：为啥不用更“潮流”的关键字呢？今天就带大家一起剖析这段代码，聊聊背后的门道，顺便用 Mermaid 画个流程图，直观感受一下！✨

🎯 问题起源：代码长啥样？

先上代码，这是我在小程序 Page 的 onLoad 生命周期里挖到的“宝藏”：

if (options.fromTab === 'saved') {
  var fixedFromTab = 'toCompare';
} else {
  var fixedFromTab = options.fromTab;
}
// 后面用它更新数据
this.setData({
  fromTab: fixedFromTab
});

这段代码的任务很简单：根据 options.fromTab 的值，决定 fixedFromTab 是 'toCompare' 还是原值，然后塞进 this.setData 更新页面数据。乍一看挺普通，但为啥用 var？换成 let 或 const 会咋样？别急，咱们慢慢拆解！🔍

🧠 分析：`var` 的“秘密武器”

1. 作用域是关键！

在 JavaScript 中，var、let 和 const 的最大区别就是作用域：

var：函数作用域，声明的变量在整个函数里都能用，哪怕是在 if 块里定义的。
let 和 const：块作用域，只在 {} 块内有效，出了块就“拜拜”。

在这段代码中，fixedFromTab 定义在 if 或 else 块里，但后续的 this.setData 需要用到它。如果用 let，会发生什么？来看看：

if (options.fromTab === 'saved') {
  let fixedFromTab = 'toCompare';
} else {
  let fixedFromTab = options.fromTab;
}
this.setData({
  fromTab: fixedFromTab // ❌ 报错：fixedFromTab 未定义
});

由于 let 的块作用域，fixedFromTab 在块外压根儿找不到，程序直接抛 ReferenceError。而 var 因为是函数作用域，整个 onLoad 函数都能访问它，完美解决问题！🎉

2. `const` 为啥不香？

有人可能会问：“那用 const 不行吗？”答案是不行！const 是常量，一旦赋值就不能改。但在这段代码里，fixedFromTab 的值在 if 和 else 里可能是不同的。如果用 const，第二次赋值会报错：

if (options.fromTab === 'saved') {
  const fixedFromTab = 'toCompare';
} else {
  const fixedFromTab = options.fromTab; // ❌ 语法错误：重复声明
}

所以，const 在这里完全“躺平”，没法用。😂

3. 变量提升的“彩蛋”

var 还有个特性：变量提升（hoisting）。声明会被“偷偷”提到函数顶部，虽然初始化不会提升。比如：

console.log(fixedFromTab); // undefined
var fixedFromTab = 'hello';

在这段代码中，提升影响不大，但它确实是 var 的“隐藏技能”，让它在函数里随处可用。

📈 流程图：直观看作用域区别

用 Mermaid 画个流程图，感受一下 var 和 let 的区别：

在这里插入图片描述

从图中 видно（看得见）：var 一路畅通，let 在块外就“翻车”了。🚗💥

🤔 为啥开发者选 `var`？

简单粗暴：直接在块内用 var，省去提前声明的麻烦，代码更简洁。
历史遗留：小程序早期，开发者可能更习惯 var，毕竟 let 和 const 是 ES6 的“新宠”。
无副作用：在这段代码里，fixedFromTab 只用了一次，var 的函数作用域不会惹麻烦。

🌟 改进：现代化的 `let` 方案

虽然 var 能用，但现代 JavaScript 更推崇 let 和 const，因为它们作用域更清晰，减少意外bug。怎么改呢？很简单，在块外声明 let：

let fixedFromTab; // 提前声明
if (options.fromTab === 'saved') {
  fixedFromTab = 'toCompare';
} else {
  fixedFromTab = options.fromTab;
}
this.setData({
  fromTab: fixedFromTab
});