返回

函数与函数表达式 | 立即调用函数表达式大揭秘!

见解分享

函数与函数表达式

函数是 JavaScript 中的代码块,可以接受参数,并执行一些操作后返回结果。函数声明是使用 function 来声明函数,函数表达式是使用箭头函数或 function 关键字来定义函数。

// 函数声明
function foo() {
  console.log("Hello, world!");
}

// 函数表达式
const bar = function () {
  console.log("Hello, world!");
};

// 立即调用函数表达式
(function () {
  console.log("Hello, world!");
})();

立即调用函数表达式

立即调用函数表达式(IIFE)是一种匿名函数,在定义后立即调用。IIFE 是通过在函数表达式后添加一对括号来实现的。

(function () {
  console.log("Hello, world!");
})();

IIFE 有很多用途,其中一些常见用途包括:

  • 私有作用域: IIFE 可以创建自己的私有作用域,其中的变量和函数不会污染全局作用域。
  • 模块化: IIFE 可以用于模块化代码,使代码更易于组织和维护。
  • 延迟执行: IIFE 可以用于延迟执行代码,直到满足某些条件时再执行。

理解立即调用函数表达式

为了理解 IIFE 是如何工作的,我们首先需要了解 JavaScript 中的函数提升机制。函数提升是指在代码执行之前,函数声明会提升到代码的顶部。这意味着,即使函数声明出现在代码的后面,它仍然可以在代码的前面被调用。

另一方面,函数表达式不会被提升。这意味着,函数表达式必须在代码中被定义之后才能被调用。

// 函数提升
console.log(foo()); // "Hello, world!"

function foo() {
  return "Hello, world!";
}

// 函数表达式
console.log(bar()); // ReferenceError: bar is not defined

const bar = function () {
  return "Hello, world!";
};

在上面的示例中,foo() 可以被调用,因为它是函数声明,并且在代码执行之前已经被提升到了代码的顶部。然而,bar() 不能被调用,因为它是函数表达式,并且在代码中被定义之后才能被调用。

IIFE 的工作原理是利用函数提升机制。IIFE 将函数表达式放在一对括号中,然后在括号后面添加一对圆括号。这使得函数表达式在代码执行之前就被提升到了代码的顶部,并且可以在代码的任何地方被调用。

(function () {
  console.log("Hello, world!");
})();

在上面的示例中,IIFE 将函数表达式放在了一对括号中,然后在括号后面添加了一对圆括号。这使得函数表达式在代码执行之前就被提升到了代码的顶部,并且可以在代码的任何地方被调用。

总结

函数声明和函数表达式是两种不同的函数定义方式。函数声明具有函数提升的特点,在运行代码之前已经完成了定义。函数表达式是一种匿名函数,立即调用函数表达式则是在函数表达式后直接加一对括号来直接调用函数。

IIFE 有很多用途,其中一些常见用途包括:

  • 私有作用域
  • 模块化
  • 延迟执行

理解 IIFE 是如何工作的,我们首先需要了解 JavaScript 中的函数提升机制。函数提升是指在代码执行之前,函数声明会提升到代码的顶部。这意味着,即使函数声明出现在代码的后面,它仍然可以在代码的前面被调用。

另一方面,函数表达式不会被提升。这意味着,函数表达式必须在代码中被定义之后才能被调用。

IIFE 的工作原理是利用函数提升机制。IIFE 将函数表达式放在一对括号中,然后在括号后面添加一对圆括号。这使得函数表达式在代码执行之前就被提升到了代码的顶部,并且可以在代码的任何地方被调用。