返回

JavaScript声明函数到底有多少种?看这11种就够了

前端

JavaScript函数声明
JavaScript函数声明有多种方式,主要分为以下11种:

  1. 函数声明(Function Declaration)
    这是最普通的声明方式,与其他语言也相近的一种方式。
function greet(name) {
  console.log(`Hello, ${name}!`);
}
  1. 函数表达式(Function Expression)
    函数表达式是将函数声明包裹在一个变量中。
const greet = function (name) {
  console.log(`Hello, ${name}!`);
};
  1. 箭头函数(Arrow Function)
    箭头函数是ES6中引入的一种新的函数声明方式,它使用更简洁的语法。
const greet = name => {
  console.log(`Hello, ${name}!`);
};
  1. IIFE(Immediately Invoked Function Expression)
    IIFE是一种立即执行的函数表达式,它可以立即执行函数。
(function() {
  console.log('Hello, world!');
})();
  1. 具名函数表达式(Named Function Expression)
    具名函数表达式与函数声明类似,但它可以被赋予一个名称。
const greet = function sayHello(name) {
  console.log(`Hello, ${name}!`);
};
  1. 匿名函数表达式(Anonymous Function Expression)
    匿名函数表达式与函数表达式类似,但它没有名称。
const greet = function (name) {
  console.log(`Hello, ${name}!`);
};
  1. 回调函数(Callback Function)
    回调函数是一种被另一个函数调用的函数。
function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

greet('John', function() {
  console.log('Goodbye!');
});
  1. 生成器函数(Generator Function)
    生成器函数是一种可以暂停和恢复执行的函数。
function* greetGenerator() {
  yield 'Hello, ';
  yield 'world!';
}

const generator = greetGenerator();
console.log(generator.next().value); // Hello,
console.log(generator.next().value); // world!
  1. 异步函数(Async Function)
    异步函数是一种可以异步执行的函数。
async function greetAsync(name) {
  await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`Hello, ${name}!`);
    }, 1000);
  });
}

greetAsync('John').then(result => {
  console.log(result); // Hello, John!
});
  1. 方法(Method)
    方法是对象中的函数。
const person = {
  name: 'John',
  greet: function() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.greet(); // Hello, my name is John!
  1. 构造函数(Constructor)
    构造函数是用来创建对象的函数。
function Person(name) {
  this.name = name;
}

const person = new Person('John');
console.log(person.name); // John

总结

JavaScript中函数的声明有多种方式,每种方式都有其独特的用法和优势。了解这些不同的函数声明方式,可以帮助你更好地理解和使用JavaScript。