5. JavaScript 函数的 7 种定义方式,哪些最常用?

508 阅读3分钟

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() 方法时,函数会 恢复执行继续从暂停的地方运行