同名函数调用哪个？搞懂作用域和调用优先级

写代码时，你有没有遇到过两个名字一样的函数？比如在项目里改着改着，突然发现有个函数被重复定义了，这时候系统到底会执行哪一个？这事儿听起来小，真碰上了却能让程序跑出意料之外的结果。

函数名重复不是小事

先说个真实场景：小李在维护一个老项目，页面上有个按钮点击后应该弹出用户信息，结果点下去却跳转到了首页。查了半天，发现代码里有两个 handleClick 函数，一个在全局，一个在模块内部。问题就出在这儿——调用的时候，系统选错了那个。

看位置：谁离得近就用谁

函数调用哪个，关键看作用域。简单讲，JavaScript 这类语言会从当前作用域开始一层层往外找，找到第一个就用它。就像你在家里喊“小明”，如果儿子在屋里，他就会应声，不会等楼下的邻居小明来答。

function greet() {
  console.log("我是全局函数");
}

function outer() {
  function greet() {
    console.log("我是内部函数");
  }
  greet(); // 输出：我是内部函数
}

outer();

上面这段代码里，虽然全局有个 greet，但 outer 里面也定义了一个。当在 outer 内部调用 greet() 时，引擎优先使用内部的那个。

变量提升和声明方式也有影响

函数表达式和函数声明的行为还不一样。用 var 声明的函数表达式会被提升，但值是 undefined，而函数声明会整个提升。这就可能导致意外覆盖。

greet(); // 输出：我是声明函数

function greet() {
  console.log("我是声明函数");
}

var greet = function() {
  console.log("我是表达式函数");
};

这段代码输出的是“我是声明函数”，因为函数声明被提升到了最前，而赋值还没发生。反过来写，结果就不一样了。

模块化时代更要注意命名冲突

现在项目大多用 ES6 模块，不同文件里的同名函数本来互不干扰。但一旦你手动引入时没注意别名，或者用了 import * 全部拉进来，风险就来了。

// utils.js
export function format() {
  return "数字格式化";
}

// formatter.js
export function format() {
  return "时间格式化";
}

// 页面中
import * as utils from './utils.js';
import * as time from './formatter.js';

console.log(utils.format()); // 明确指定来源

这种情况下，靠命名空间区分是最稳妥的。别图省事直接解构一堆同名函数到同一作用域。

调试时怎么快速判断

当你不确定调了哪个函数，最简单的办法是在各个同名函数里加 console.trace()，它会打印调用栈，一眼看出是从哪儿触发的，顺藤摸瓜就能定位。

同名函数不可怕，关键是理解作用域链和加载顺序。写代码时尽量避免重复命名，实在避不开，就用模块或命名空间把它们隔开。干净的命名和清晰的结构，比事后排查省心得多。