IIFE(立即执行函数表达式)

简介: IIFE(立即执行函数表达式)

IIFE

IIFE(立即执行函数表达式)是一种在定义时立即执行的 JavaScript 函数。这种函数形式非常有用,特别是当需要创建一个新的作用域以避免污染全局作用域或需要执行一段代码但不希望这段代码之后再被引用或重用。

(function() {
  // 函数体
})();
/*或者箭头函数*/
(() => {
  // 函数体
})();

解释

函数表达式:IIFE 是一个函数表达式而不是函数声明。区别在于函数表达式可以赋值给变量,可以作为参数传递给其他函数,而函数声明则是一个独立的语句,以 function 关键字开头,并有一个函数名称。

立即执行:函数定义后立即执行。通过在函数表达式后面添加一对圆括号 () 实现,这对括号使 JavaScript 引擎执行这个函数。

创建作用域:IIFE 创建了一个新的作用域。作用域内部声明的变量外部不可见,避免全局作用域的污染。

参数传递:可以向 IIFE 传递参数。将外部变量传入 IIFE 的作用域,同时还保持了外部作用域的变量不被修改

(function(x) {
  console.log(x); // 输出: 10
})(10);

使用场景

避免变量污染:当代码片段不应该干扰到其他部分的执行或变量时,IIFE可以很好地隔离这些代码。

模块化编程:在 ES6 的模块导入之前,IIFE 是创建模块的一种方式,可以将公共接口暴露给外部,而将模块内部的实现细节隐藏起来。

例如: for循环便利节点数据,根据数据创建的节点需要添加click事件,同时事件需要使用迭代节点的数据.如果直接在for里面写addEventListener('click', function () {}),匿名函数里面获取的是节点的最终值并非节点的迭代值.

临时代码执行:当你需要执行一些只需运行一次的初始化代码时,IIFE 是一个很好的选择。

相关文章
|
10月前
|
JavaScript 前端开发 开发者
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
混淆赋值运算符(=)和相等比较运算符(==, ===)(js的问题)
49 0
|
10月前
|
存储 自然语言处理 JavaScript
深入理解JS的执行上下文、词法作用域和闭包(上)
深入理解JS的执行上下文、词法作用域和闭包(上)
|
10月前
|
自然语言处理 JavaScript 前端开发
深入理解JS的执行上下文、词法作用域和闭包(中)
深入理解JS的执行上下文、词法作用域和闭包(中)
|
存储 Swift
24 闭包和闭包表达式
闭包和闭包表达式
76 0
|
5月前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性,但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现,开发者可以更好地编写和维护 JavaScript 代码,避免因不了解这些机制而导致的错误和不一致。同时,不断提高对执行上下文等相关概念的认识,将有助于提升对 JavaScript 语言的整体理解和运用能力。
|
6月前
|
JavaScript 前端开发
js 变量作用域与解构赋值| 22
js 变量作用域与解构赋值| 22
|
6月前
|
JavaScript 前端开发
JS 偏函数、函数柯里化~
该文章介绍了JavaScript中偏函数和函数柯里化的概念、实现方法和使用场景,通过代码示例展示了如何创建预设参数的函数以及如何将多参数函数转换成单参数函数的链式调用。
29 0
JS 偏函数、函数柯里化~
|
JavaScript
JS三元表达式
JS三元表达式
80 0
|
10月前
|
自然语言处理 JavaScript 前端开发
深入理解JS的执行上下文、词法作用域和闭包(下)
深入理解JS的执行上下文、词法作用域和闭包(下)
|
10月前
|
JavaScript Java PHP
js三元表达式(三元运算符)
js三元表达式(三元运算符)
110 0