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 是一个很好的选择。