原文地址:https://dev.to/bhagatparwinder/iife-immediately-invoked-function-expressions-49c5
IIFE 是一个声明和调用在同一时间的函数。你通过匿名函数和 ()
来闭合函数,然后紧跟一对小括号来立即调用它。
(function(name){ // function expression enclosed in ()
console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder"); // Immediately called by using () in the end. Yes we can pass arguments
立即执行函数在以下方便有帮助:
- 避免在块中变量提升。
- 避免污染全局作用域。
- 当我们在维护 IIFE 中定义的变量时,允许我们访问全局方法。
简而言之,IIFE 是保护你函数内的作用域以及其内部的变量的极好方法。
不能因为我们在写上面函数时用了 function
关键字并不意味着你也必须要这样做。随着 ES6 的流行,你也可以使用箭头函数。
(name => {
console.log(`Hello ${name}`); // Hello Parwinder
})("Parwinder");
另一个创建 IIFE 的方法是使用取反操作符 !
,当我们使用 function
关键字时,创建的是函数声明。
function myName() {
return "Parwinder";
}
console.log(myName()); // Parwinder
你必须调用这个函数来返回结果。如果我们在前面加上取反操作符,它就会变成函数表达式。
!function myName() {
return "Parwinder";
}
Ta-Da! 我们使用 !function = {}()
代替 (function => {})()
来创建 IIFE,不需要使用 ()
块来包裹函数块。
在我最后一个例子中,你是否观察到我把返回结果声明改为了 console.log?那是有目的的, IIFE 总是返回 undefined
。如果我们使用取反操作符创建 IIFE,它将会返回 true
那是因为 !undefined
的值为 true
。