js函数定义方式有哪些?

133 阅读2分钟

JavaScript 函数定义方式

JavaScript 提供了多种方式来定义函数,以下是常见的几种方式:

1. 函数声明(Function Declaration)

函数声明是最常见的定义函数的方式,使用 function 关键字定义函数。

function add(a, b) {
  return a + b;
}

// 调用函数
console.log(add(2, 3)); // 输出: 5

2. 函数表达式(Function Expression)

函数表达式是将一个函数赋值给一个变量。函数可以是匿名的,也可以是命名的。

// 匿名函数表达式
const multiply = function(a, b) {
  return a * b;
};

// 调用函数
console.log(multiply(4, 5)); // 输出: 20

// 命名函数表达式
const divide = function divideFn(a, b) {
  return a / b;
};

// 调用函数
console.log(divide(10, 2)); // 输出: 5

3. 箭头函数(Arrow Function)

箭头函数是 ES6 引入的一种简便的函数定义方式。它的语法更简洁,并且不绑定 this

const subtract = (a, b) => {
  return a - b;
};

// 简写形式
const square = x => x * x;

// 调用函数
console.log(subtract(10, 5)); // 输出: 5
console.log(square(4)); // 输出: 16

4. 立即调用函数表达式(IIFE)

立即调用函数表达式是定义后立即执行的函数。通常用于创建一个局部作用域。

(function() {
  console.log("IIFE executed!");
})();

// 带参数的 IIFE
(function(a, b) {
  console.log(a + b);
})(3, 4); // 输出: 7

5. 方法(Method)

方法是对象的一个属性,定义时使用 function 关键字。调用时通过对象来访问。

const obj = {
  name: "Alice",
  greet: function() {
    console.log(`Hello, ${this.name}!`);
  }
};

// 调用方法
obj.greet(); // 输出: Hello, Alice!

6. Generator 函数

Generator 函数是 ES6 引入的一种特殊的函数,可以暂停和恢复执行,使用 function* 关键字定义。

function* generatorFunction() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = generatorFunction();

console.log(gen.next().value); // 输出: 1
console.log(gen.next().value); // 输出: 2
console.log(gen.next().value); // 输出: 3

7. async 函数

async 函数是 ES8 引入的,用于处理异步操作,返回一个 Promise。

async function fetchData() {
  return "Data fetched!";
}

fetchData().then(result => console.log(result)); // 输出: Data fetched!

总结

JavaScript 提供了多种函数定义方式,包括函数声明、函数表达式、箭头函数、立即调用函数表达式、方法、Generator 函数和 async 函数等。每种方式都有其独特的用法和适用场景,根据需求选择合适的函数定义方式将有助于提高代码的可读性和维护性。