在JavaScript编程中，函数是实现逻辑封装和复用的重要载体，不同的函数声明方式会带来不同的执行特性和作用域表现，其中执行顺序的差异是很多开发者容易踩坑的点。理解这些差异能帮助我们写出更健壮的代码，减少因函数调用时机不当引发的问题。
JS常见的函数声明方式
1. 函数声明
函数声明是最基础的函数定义方式，使用function关键字直接定义函数，语法格式如下：
// 函数声明语法
function add(a, b) {
return a + b;
}
这种方式定义的函数会被提升到当前作用域的顶部，在声明之前就可以调用。
2. 函数表达式
函数表达式是将函数赋值给一个变量，函数可以是匿名的，也可以有名称，常见的是匿名函数表达式：
// 函数表达式语法
const multiply = function(a, b) {
return a * b;
};
这种方式定义的函数不会被提升，只有在赋值语句执行之后才能调用，否则会报错。
3. 箭头函数
箭头函数是ES6新增的函数声明方式，语法更简洁，没有自己的this绑定，适合用于回调函数等场景：
// 箭头函数语法
const subtract = (a, b) => {
return a - b;
};
// 简化写法，单表达式可省略return和花括号
const divide = (a, b) => a / b;
箭头函数同样属于函数表达式的一种，不会被提升，需要在定义之后才能调用。
不同声明方式的执行顺序规则
函数声明的提升机制
函数声明会被JS引擎在执行代码前进行函数提升，整个函数定义都会被提升到作用域顶部，因此可以在声明前调用：
// 函数声明前调用不会报错
console.log(add(1, 2)); // 输出3
function add(a, b) {
return a + b;
}
上述代码中，add函数在声明之前就被调用，依然可以正常执行，这就是函数提升的效果。
函数表达式的执行顺序
函数表达式本质是变量赋值，只会提升变量的声明，不会提升函数的赋值，因此在赋值前调用会报错：
// 函数表达式前调用会报错
console.log(multiply(2, 3)); // 报错：multiply is not a function
const multiply = function(a, b) {
return a * b;
};
这里multiply变量被提升，但此时它的值是undefined，不是函数，所以调用会抛出错误。
箭头函数的执行顺序
箭头函数和函数表达式的执行顺序规则一致，同样需要等待赋值完成后才能调用：
// 箭头函数前调用会报错
console.log(subtract(5, 2)); // 报错：subtract is not a function
const subtract = (a, b) => {
return a - b;
};
同名函数的执行顺序优先级
如果同一个作用域内存在同名的函数声明和变量声明，函数声明的优先级更高，会覆盖变量声明：
// 同名函数声明和变量声明的情况
console.log(test()); // 输出"函数声明"
function test() {
return "函数声明";
}
var test = function() {
return "函数表达式";
};
如果同名的函数声明有多个，后面的会覆盖前面的：
// 多个同名函数声明的情况
console.log(foo()); // 输出"第二个函数声明"
function foo() {
return "第一个函数声明";
}
function foo() {
return "第二个函数声明";
}
执行顺序相关注意事项
- 函数声明提升是整体提升，函数表达式只提升变量声明不提升赋值
- 箭头函数没有自己的
this，它的this继承自外层作用域，不适合作为对象的方法使用 - 块级作用域内的函数声明在不同浏览器中表现可能有差异，建议避免在块级作用域内使用函数声明
- 使用
let或const声明的函数表达式存在暂时性死区，在声明前调用会直接报错，比var更严格
掌握JS函数的声明方式和执行顺序规则，能帮助我们更清晰地理解代码的执行逻辑，在开发过程中合理选择函数声明方式，避免因执行顺序问题导致的bug，提升代码的稳定性和可维护性。