这个JavaScript / jQuery语法是如何工作的:(函数(窗口,未定义的){ })(窗口)?

阅读时长 3 分钟读完

在前端开发中,我们经常见到以下这种形式的代码:

这种写法被称为“立即执行函数表达式”(Immediately Invoked Function Expression,IIFE),它可以让我们创建一个局部作用域并且不会污染全局命名空间。那么这个语法具体是如何工作的呢?

函数声明和函数表达式

在深入 IIFE 之前,我们需要先了解两个概念:函数声明和函数表达式。

函数声明通常是这样的:

这里的 foo 是一个函数名,后面跟着一对花括号,里面是函数体。当 JavaScript 解析器遇到这个声明时,它会在当前作用域中创建一个名为 foo 的函数对象,并将其赋值给 foo 变量。

函数表达式则是这样的:

这里的 bar 是一个变量名,它指向一个函数对象,也就是所谓的匿名函数。当 JavaScript 解析器遇到这个表达式时,它会先创建一个函数对象,然后将这个对象赋值给 bar 变量。因为这个函数没有名字,所以也被称为匿名函数。

IIFE 的基本形式

了解了函数声明和函数表达式的区别之后,我们再来看一下 IIFE 的基本形式:

这里的 (function() {}) 是一个匿名函数表达式,它被用括号包裹起来形成了一个整体,最后用另一对括号调用了这个函数。这样做的好处是可以在定义函数的同时立即执行它,并且不会在全局命名空间中留下任何痕迹。

传递参数

上面的例子中,IIFE 并没有传递任何参数。但是实际上,我们可以在定义函数时就传递参数:

这里的 name 是一个函数参数,在调用函数时通过 'World' 传递进去。这样就可以在函数内部访问到外部作用域中的变量。

IIFE 和闭包

由于 IIFE 创建了一个局部作用域,因此可以被用来创建闭包。比如下面这个例子:

-- -------------------- ---- -------
--- ------- - ----------- -
  --- ----- - --
  ------ ---------- -
    ------ --------
  --
-----

----------------------- -- -
----------------------- -- -
----------------------- -- -

这里的 counter 是一个变量,它指向一个匿名函数的返回值。这个匿名函数中定义了一个局部变量 count,然后返回了另一个匿名函数,这个函数可以访问到 count 变量并对其进行递增操作。

由于外层的匿名函数只会在定义时执行一次,所以 count 变量也只会被创建一次,不会被重置。每次调用 counter() 函数时,内层匿名函数都会被调用,并且能够访问到正确的 count 值,从而实现了计数器的功能。

IIFE 和模块化

最后,我们来看一下如何使用 IIFE 实现简单的模块化。比如下面这个例子:

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/9644

纠错
反馈