全部 / 前端 / 技术 · 2022年7月10日 0

59 – 立即执行函数

原文地址: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