函数声明就像魔法口诀，念对了代码才能运转,今天咱们就来盘点JavaScript世界里的函数声明全家桶！
“函数声明”这四个字听起来高大上，但其实它就是我们写代码时定义函数的方式，就像你去餐厅点菜，有服务员推荐、有菜单自选、还有外卖电话，函数声明也有多种多样的方式,今天咱们就来盘一盘JavaScript世界里的函数声明大乱斗！
函数声明就像念咒语：传统方式定义函数
function sayHello(name) {
return `Hello, ${name}!`;
}
这是最常见的函数声明方式，我们称之为函数声明语句，它的特点是会被提升（hoisting），也就是说,函数可以在声明之前调用！
案例演示：
<script>
console.log(sayHello('小明')); // 正常输出 "Hello, 小明!"
function sayHello(name) {
return `Hello, ${name}!`;
}
</script>
即使代码从console.log开始执行，也不会报错，因为函数声明会被提升到代码顶部，这就像你走进一家餐厅，即使还没点菜,服务员也知道你能点什么菜！
函数表达式：匿名函数的优雅舞者
const sayHello = function(name) {
return `Hello, ${name}!`;
};
这种写法先创建一个匿名函数，再把这个函数赋值给变量，它不会被提升,必须在赋值后再调用。
案例演示：
<script>
// console.log(sayHello('小明')); // 这行会报错，因为此时sayHello还是undefined
const sayHello = function(name) {
return `Hello, ${name}!`;
};
console.log(sayHello('小明')); // 正常输出 "Hello, 小明!"
</script>
这就像是你点菜需要先看菜单,知道能点什么才能下单。
箭头函数：ES6带来的语法糖
const sayHello = (name) => `Hello, ${name}!`;
ES6带来的箭头函数，让代码更加简洁，它没有自己的this，没有arguments对象,不能作为构造函数。
案例演示：
<script>
const person = {
name: '小明',
say: function() {
// 普通函数的this指向person对象
console.log(this.name, '说：', sayHello(this.name));
}
};
const sayHello = (name) => `Hello, ${name}!`;
person.say(); // 输出 "小明说： Hello, 小明!"
</script>
注意：箭头函数中的this不会被绑定，而是继承外部作用域的this，这就像你在派对上说话，你的声音会自然地传播出去，而不是被一个固定的“麦克风”限制。
构造函数：创建对象的工厂
function Person(name, age) {
this.name = name;
this.age = age;
}
构造函数使用new关键字调用，会创建一个新的对象，并将函数的this绑定到新对象上。
案例演示：
<script>
const person1 = new Person('小明', 20);
console.log(person1.name); // 输出 "小明"
// 给构造函数原型添加方法
Person.prototype.sayHello = function() {
console.log(`Hello, my name is ${this.name}`);
};
person1.sayHello(); // 输出 "Hello, my name is 小明"
</script>
构造函数就像一个工厂,可以批量生产具有相同结构的对象。
async/await：异步函数的新写法
async function fetchData() {
const response = await fetch('https://api.example.com/data');
return response.json();
}
ES8引入的async函数让异步代码看起来像同步代码,大大简化了Promise的使用。
案例演示：
<script>
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
fetchData().then(data => console.log(data));
</script>
async函数会自动返回一个Promise,让异步操作的处理更加流畅。
命名函数表达式：有名字的匿名函数
const createCalculator = function Calculator(a, b) {
return {
sum: function() { return a + b; },
diff: function() { return a - b; }
};
};
这种写法既有函数名，又像匿名函数，函数名只在函数内部可见,可以提高代码性能。
案例演示：
<script>
const calc = createCalculator(10, 5);
console.log(calc.sum()); // 输出 15
// 内部函数名可以用于递归
function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1);
}
</script>
命名函数表达式就像给自己起个小名,方便内部使用。
Function构造函数：最底层的函数创建方式
const sayHello = new Function('name', 'return `Hello, ${name}!`');
这是最底层的函数创建方式，可以直接从字符串创建函数，虽然灵活,但不推荐日常使用。
案例演示：
<script>
const sayHello = new Function('name', 'return `Hello, ${name}!`');
console.log(sayHello('小明')); // 输出 "Hello, 小明!"
</script>
这种方式适合在某些特殊场景,比如动态生成函数。
对象方法：对象中的函数声明
const person = {
name: '小明',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
函数可以直接作为对象的属性定义,这是最常见的函数使用方式之一。
案例演示：
<script>
const person = {
name: '小明',
sayHello: function() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.sayHello(); // 输出 "Hello, my name is 小明"
</script>
对象方法是函数最常见的应用场景之一,就像给角色赋予能力。
函数声明对比表
| 函数类型 | 语法 | 提升 | this绑定 | 是否有prototype | 是否有arguments | 是否可以new调用 |
|---|---|---|---|---|---|---|
| 函数声明 | function name() {} | 是 | 自身 | 有 | 有 | 是 |
| 函数表达式 | const/var name = function() {} | 否 | 自身 | 有 | 有 | 是 |
| 箭头函数 | (params) => expr | 否 | 外部 | 无 | 无 | 否 |
| 构造函数 | function name() {} | 是 | 新对象 | 有 | 有 | 是 |
| async函数 | async function name() {} | 是 | 自身 | 有 | 有 | 是 |
| 命名函数表达式 | const/var name = function Inner() {} | 否 | 自身 | 有 | 有 | 是 |
| Function构造函数 | new Function() | 否 | 新对象 | 有 | 有 | 是 |
| 对象方法 | { method: function() {} } | 否 | 调用者 | 有 | 有 | 否 |
常见问题解答
问：为什么有时候函数声明会被提升，而函数表达式不会？ 答：这是JavaScript解析机制决定的，函数声明在解析阶段就会被读取，而函数表达式只是变量赋值,直到代码执行到那行才会被解析。
问：箭头函数和普通函数有什么区别？
答：主要区别在于this的绑定方式，箭头函数没有自己的this，而是继承外部作用域的this；普通函数有自己的this,在不同调用方式下会变化。
问：async函数和Promise有什么关系？ 答：async函数返回一个Promise，而await可以暂停函数执行直到Promise被解决，它们是处理异步代码的两种方式，async/await更简洁。
问：为什么有时候需要使用命名函数表达式而不是普通函数声明？ 答：命名函数表达式在函数内部可以使用函数名进行递归调用，而且不会暴露函数名到外部作用域,提高了代码的封装性。
写在最后
函数声明是JavaScript编程的基础，掌握它们就像学会了代码世界的咒语，每种函数声明方式都有其适用场景，就像不同场合需要不同的餐具一样，希望这篇文章能帮你理清思路,在代码世界中游刃有余！
拿起你的魔法棒（键盘），开始练习这些函数声明方式吧！最好的学习方式就是动手实践，把每个例子都跑一遍,你会发现JavaScript函数声明的世界远比想象中更有趣！
本文由ChatGPT生成，欢迎在评论区分享你的学习心得和疑问,我们一起进步！
知识扩展阅读
大家好,今天我们来聊聊编程中经常遇到的“声明函数”，在我们编写程序的过程中，函数扮演着非常重要的角色，什么是声明函数呢？声明函数又有哪些种类和用法呢？让我们一起探讨一下。
什么是声明函数？
在编程中,声明函数是对函数进行预先的告知，告诉编译器这个函数的名称、返回类型以及所需的参数等信息，这样，当我们在程序的其他地方调用这个函数时，编译器就能知道如何正确地处理，函数声明就是给函数的一个“名片”，让其他人（包括编译器）知道这个函数的存在和它的功能。
声明函数的种类和用法
- 函数原型声明
这是最常见的函数声明方式,它告诉编译器函数的返回类型、函数名和参数列表。
int add(int a, int b); // 函数原型声明
这里声明了一个名为add的函数，它接受两个整数参数并返回一个整数。
- 内联函数声明
内联函数是一种特殊类型的函数,它在调用时会被直接插入到调用点，而不是像普通函数那样进行常规的函数调用，在声明内联函数时，需要在函数名前加上inline关键字。
inline int max(int a, int b) { return (a > b) ? a : b; } // 内联函数声明这种声明有助于提高代码的执行效率。
- 静态函数声明
静态函数只能在定义它的文件内被调用,不能在文件外部调用，在声明静态函数时，需要在函数名前加上static关键字。
static int count = 0; // 静态变量声明
static int incrementCount() { return ++count; } // 静态函数声明静态函数常用于处理与文件相关的操作或管理静态变量等。
- 构造函数与析构函数声明
在面向对象的编程中,构造函数用于初始化对象的状态，析构函数用于释放对象占用的资源，它们的声明通常出现在类的定义中。
class MyClass { // 类定义开始
public: // 公共成员函数声明开始
MyClass(); // 构造函数声明
~MyClass(); // 析构函数声明开始结束等符号省略... } // 类定义结束等符号省略... } // 类定义结束等符号省略... }等符号省略...等符号省略...等符号省略...等符号省略...等符号省略...等符号省略...等符号省略...等符号省略...等符号省略...等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号省略结束等符号结束结束等符号省略结束结束等符号省略结束结束等符号省略结束结束；析构函数声明结束等符号省略结束；析构函数声明结束等符号省略结束；析构函数声明结束结束等符号省略结束结束；类定义结束结束等符号省略结束结束；类定义结束。表格说明：下面是一个关于不同种类声明函数的简单表格：| 声明函数类型 | 描述 | 常见用法举例 |返回值类型|参数列表|特点||---------|---------------------------------|---------------------------------|---------|---------|---------|| 函数原型声明 | 告诉编译器函数的返回类型、名称和参数 | `int add(int a, int b);` |任意类型|任意参数列表|最常见的函数声明方式|| 内联函数声明 | 在调用点直接插入函数的代码，提高效率 | `inline int max(int a, int b) {...}` |任意类型|任意参数列表|适用于小型、频繁调用的函数|| 静态函数声明 | 只能在定义它的文件内调用 | `static int incrementCount() {...}` |任意类型|无或特定参数列表|用于文件内操作或管理静态变量|| 构造函数声明 | 用于初始化对象状态 | `MyClass() {...}` |无返回值|无参数或特定参数列表（通常用于初始化成员变量）|在对象创建时自动调用|| 析构函数声明 | 用于释放对象占用的资源 | `~MyClass() {...}` |无返回值|无参数列表（通常用于清理资源）|在对象销毁时自动调用||通过上面的表格，我们可以看到不同类型声明的特点和使用场景。三、案例说明假设我们有一个简单的计算器程序，需要实现加、减、乘、除四个基本运算功能，我们可以这样进行函数的声明和定义：```cpp// 函数原型声明int add(int a, int b);int subtract(int a, int b);int multiply(int a, int b);int divide(int a, int b); // 函数定义实现int add(int a, int b) { return a + b; }int subtract(int a, int b) { return a - b; }int multiply(int a, int b) { return a * b; }int divide(int a, int b) { return a / b; }(注意：在实际使用中，还需要考虑除数为零的情况。)在这个例子中，我们使用了函数原型声明来告诉编译器函数的名称和参数列表，然后我们在函数的定义中实现了具体的功能逻辑，通过这种方式，我们可以轻松地扩展我们的计算器程序，添加更多的功能或修改现有功能。*：今天我们一起探讨了关于声明函数的种类和用法，通过了解不同类型的声明函数，我们可以更好地组织和管理我们的代码，提高代码的可读性和可维护性，在实际编程过程中，根据具体的需求和场景选择合适的函数声明方式是非常重要的，希望这篇文章能帮助大家更好地理解声明函数的相关知识，如果有任何疑问或建议，欢迎留言讨论！相关的知识点：
