JavaScript中全局赋值与初始化函数内赋值变量的差异

首先明确：性能上几乎没有差异，这两种写法的核心区别在于变量初始化的时机、作用域内的可用性，以及代码的组织逻辑，和性能关系极小。

1. 初始化时机不同 #

• 直接声明赋值（let num = 1;）：变量在声明的同时就完成初始化，只要进入当前作用域（比如函数、全局），这个变量就有确定的值。
• 先声明后在init赋值（let num; init()）：变量声明后处于未初始化状态（值为undefined），直到init函数执行时才被赋予实际值。

2. 适配动态初始化场景 #

很多Canvas项目里用init函数，是因为有些值需要依赖运行时环境才能确定：

• 比如Canvas的宽高let canvasWidth; function init() { canvasWidth = window.innerWidth; }，直接声明赋值的话，拿到的可能是页面加载前的错误值，或者无法响应窗口大小变化（如果init会在resize时重新调用）。
• 再比如需要依赖用户输入、异步数据的变量，必须等这些资源就绪后才能赋值，这时先声明变量，再在init（或回调）里赋值就很必要。

3. 代码组织与复用性 #

把初始化逻辑集中到init函数里，能让代码更清晰：

• 所有需要初始化的变量都在一处处理，方便维护和修改。
• 如果需要重置应用状态（比如点击按钮重新生成Canvas内容），直接调用init就能重新给所有变量赋值，不用零散地重新声明变量。

4. 关于性能 #

你猜测的性能提升基本不存在，JS引擎对这两种写法的优化程度几乎一致。唯一可能的差异是，如果init函数很久才执行，变量会暂时处于undefined状态，但这对性能的影响可以忽略不计。

举个Canvas里的实际例子：

// 先声明后初始化，适配窗口大小
let canvas;
let ctx;
let circleRadius;

function init() {
  canvas = document.getElementById('myCanvas');
  ctx = canvas.getContext('2d');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  circleRadius = Math.min(canvas.width, canvas.height) * 0.1;
}

// 窗口 resize 时重新初始化
window.addEventListener('resize', init);

// 页面加载完成后执行初始化
window.addEventListener('load', init);

这种写法比直接赋值更灵活，能确保每次窗口变化时，circleRadius等变量都能拿到正确的新值。

内容的提问来源于stack exchange，提问作者whycan'ticode