JavaScript函数声明与函数表达式的区别
在 JavaScript 中，函数声明（Function Declaration）和函数表达式（Function Expression）是两种定义函数的方式。它们的主要区别在于语法、作用域提升（Hoisting）以及使用场景。以下是它们的详细对比：
- 语法区别
函数声明
- 使用
function关键字直接定义函数。 - 语法：
function 函数名(参数) { 函数体 }
示例
function greet(name) {
console.log(`Hello, ${name}!`);
}
greet("Alice"); // 输出: Hello, Alice!
函数表达式
- 将函数赋值给一个变量或属性。
- 语法：
const 变量名 = function(参数) { 函数体 };
示例
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
greet("Alice"); // 输出: Hello, Alice!
- 作用域提升（Hoisting）
函数声明
- 函数声明会被提升（Hoisting）到当前作用域的顶部，因此在函数声明之前调用函数不会报错。
示例
greet("Alice"); // 输出: Hello, Alice!
function greet(name) {
console.log(`Hello, ${name}!`);
}
函数表达式
- 函数表达式不会被提升，只有在赋值完成后才能调用函数。
- 如果在赋值之前调用函数，会抛出错误。
示例
greet("Alice"); // 报错: greet is not a function
const greet = function(name) {
console.log(`Hello, ${name}!`);
};
- 命名函数表达式
函数表达式可以是匿名的，也可以是命名的。命名函数表达式在调试时更有用，因为函数名会显示在调用栈中。
示例
const greet = function sayHello(name) {
console.log(`Hello, ${name}!`);
};
greet("Alice"); // 输出: Hello, Alice!
- 使用场景
函数声明
- 适合定义全局函数或需要提前调用的函数。
- 适合需要提升的场景。
示例
function calculate(a, b, operation) {
return operation(a, b);
}
function add(a, b) {
return a + b;
}
console.log(calculate(2, 3, add)); // 输出: 5
函数表达式
- 适合将函数作为值传递（如回调函数、高阶函数）。
- 适合需要动态创建函数的场景。
示例
const operations = {
add: function(a, b) { return a + b; },
subtract: function(a, b) { return a - b; }
};
console.log(operations.add(2, 3)); // 输出: 5
console.log(operations.subtract(5, 2)); // 输出: 3
- 立即执行函数表达式（IIFE）
函数表达式可以立即执行，这种模式称为 立即执行函数表达式（IIFE, Immediately Invoked Function Expression）。
示例
(function() {
console.log("This is an IIFE!");
})();
// 输出: This is an IIFE!
- 箭头函数
箭头函数是函数表达式的一种简洁语法，但它没有自己的 this、arguments、super 或 new.target。
示例
const greet = (name) => {
console.log(`Hello, ${name}!`);
};
greet("Alice"); // 输出: Hello, Alice!
总结
| 特性 | 函数声明 | 函数表达式 |
|---|---|---|
| 语法 | function 函数名() {} | const 变量名 = function() {} |
| 提升 | 整个函数被提升 | 只有变量声明被提升，赋值不被提升 |
| 命名 | 必须有函数名 | 可以是匿名或命名 |
| 使用场景 | 全局函数、需要提升的场景 | 回调函数、动态创建函数 |
| IIFE | 不支持 | 支持 |
| 箭头函数 | 不支持 | 支持 |
根据具体需求选择合适的方式：
- 如果需要提升或定义全局函数，使用 函数声明。
- 如果需要将函数作为值传递或动态创建函数，使用 函数表达式。
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
