JavaScript 函数的 7 种定义方式,哪些最常用?
函数是非常重要的组成部分,JavaScript 提供了 多种 定义函数 的方式。
1 函数声明 (Function Declaration)
以 function 关键字 开始,后跟 函数名、参数列表 和 函数体。
function sayHello() {
console.log("Hello, world!");
}
sayHello(); // 调用函数
- 函数声明 会被提升,也就是说 它可以 在声明之前 被调用。
- 适用于 定义 命名的函数。
2 函数表达式 (Function Expression)
在 变量赋值的过程中 定义函数。与函数声明不同,函数表达式 不会被提升。
const sayHello = function() {
console.log("Hello, world!");
};
sayHello(); // 调用函数
这种方式定义的函数 通常是 匿名函数(没有名字),但是你也可以给它命名。
3 箭头函数 (Arrow Function)
一种 更加简洁的 函数写法,使用箭头 => 来定义。箭头函数 没有自己的 this,它会 继承外部作用域的 this。
const sayHello = () => {
console.log("Hello, world!");
};
sayHello(); // 调用函数
更简洁的形式
如果 函数体 只有一个表达式,可以 省略 大括号 和 return 关键字。
const add = (a, b) => a + b;
console.log(add(2, 3)); // 输出 5
箭头函数 特别适合用于 回调函数、简短的操作 或者 作为函数参数。
4 构造函数 (Constructor Function)
构造函数 是 一种特殊的函数,用于 创建对象。构造函数 通常以 大写字母开头,使用 new 关键字 来 创建实例。
function Person(name, age) {
this.name = name;
this.age = age;
}
const person1 = new Person("Alice", 25);
console.log(person1.name); // 输出 Alice
console.log(person1.age); // 输出 25
- 使用
new关键字 调用时,构造函数会 返回一个新对象。 - 构造函数中的
this指向 新创建的对象。
5 ES6 类 (Class)
虽然 类的语法 是 基于构造函数,但它是一个 更现代、更面向对象 的方式来 定义函数。类的语法 是 JavaScript 对象创建和继承 的 简化方式。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayHello() {
console.log(`Hello, my name is ${this.name}`);
}
}
const person1 = new Person("Alice", 25);
person1.sayHello(); // 输出 Hello, my name is Alice
class提供了 更简洁、清晰的语法 来定义 构造函数 和 实例方法。- 类是 基于原型链的,但是它为我们 封装了 很多实现细节。
6 立即执行函数表达式 (IIFE)
IIFE 是一种 立即执行的 匿名函数,定义后 会立即执行。它通常用于 创建独立的作用域,避免污染全局变量。
(function() {
console.log("立即执行函数");
})();
IIFE 是一个 自执行的函数,它的主要作用是 创建 一个封闭的作用域。
7 Generator 函数 (Generator Function)
通过 function* 来定义的,它可以 在执行过程中 暂停 并 恢复,适用于 处理 异步操作 或者 迭代器。
function* counter() {
yield 1;
yield 2;
yield 3;
}
const counterGen = counter();
console.log(counterGen.next().value); // 输出 1
console.log(counterGen.next().value); // 输出 2
console.log(counterGen.next().value); // 输出 3
yield 关键字 用于 暂停函数的执行,并且可以 返回一个值。每次调用 .next() 方法时,函数会 恢复执行 并 继续从暂停的地方运行。