高级JavaScript:为什么这个函数用圆括号封装?

在 JavaScript 中,我们经常会看到一个函数被用圆括号封装起来。例如:

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

这种写法被称为立即执行函数表达式(Immediately Invoked Function Expression,IIFE)。那么为什么要使用 IIFE 呢?本文将深入探讨这个问题。

作用域

JavaScript 的作用域是基于函数的。也就是说,每个函数都会创建一个新的作用域,其中声明的变量只在该函数内可见。

但是,在某些情况下,我们可能希望创建一个临时的作用域,以避免变量名冲突或者泄露到全局作用域中。这时候,我们可以使用 IIFE 来创建一个新的作用域。

例如,考虑以下代码:

--- - - ---

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

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

在上面的代码中,foo() 函数内部声明了一个变量 x,它的值为 20。但是,全局作用域中也有一个变量 x,它的值为 10。因此,当我们调用 foo() 函数时,它会输出 20,但是在函数外部调用 console.log(x) 时,它会输出 10。

如果我们想要避免这种情况,可以使用 IIFE 来创建一个临时的作用域。例如:

--- - - ---

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

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

在上面的代码中,console.log(x) 输出了 20,因为它是在 IIFE 的作用域内执行的。而在函数外部调用 console.log(x) 时,它仍然会输出 10。

封装

除了创建临时作用域之外,IIFE 还可以用来封装代码。例如,假设我们有一个变量 x,我们希望将它隐藏起来,以便其他人无法访问它。我们可以使用 IIFE 来实现这个目的。

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

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

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

在上面的代码中,我们创建了一个计数器对象,它包含两个方法:increment()getValue()。这些方法都是在 IIFE 的作用域内定义的,并且可以访问该作用域中声明的变量 x。同时,我们将计数器对象赋值给变量 counter,从而使其对外可见。

由于变量 x 是在 IIFE 的作用域中声明的,因此其他人无法直接访问它。只有通过调用 increment()getValue() 方法才能改变和获取计数器的值。

总结

通过使用 IIFE,我们可以创建临时作用域,以避免变量名冲突或泄露到全局作用域中。同时,我们还可以使用 IIFE 封装代码,以实现信息隐藏和封装性。

虽然 IIFE 看起来有些复杂,但是它们是 JavaScript 中非常有用的概念。如果您想要进一步提高您的 JavaScript 技能,那么学习如何使用 IIFE 是一个很好的起点。

示例代码:

--- - - ---

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

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

猜你喜欢

  • 如何通过history.pushState获得有关历史变化的通知

    在Web开发中,我们经常需要管理浏览器的历史记录。HTML5引入了一种新的API - history.pushState(),它可以在不刷新页面的情况下将新状态压入浏览器历史记录中。

    7 年前
  • 如何避免JavaScript中大量数字的科学标注?

    在前端开发中,我们经常需要处理一些数值数据,然而当这些数字过大或太小时,JavaScript会将其自动转换为科学计数法的形式,比如1e+10、1.5e-6等。 虽然科学计数法有其优点,但在某些场景下使...

    7 年前
  • 前端资源解释为脚本,但用MIME类型文本/普通文件传输本地文件

    在前端开发中,我们经常会使用 JavaScript 脚本来处理各种资源,例如图片、CSS 样式等。然而,在某些情况下,我们需要将本地文件作为资源传输到浏览器端,并且希望能够像处理脚本一样对其进行解释。

    7 年前
  • 让溢出的div自动滚动,直到用户手动滚动

    在前端开发中,我们经常会遇到需要展示长内容的情况,而有限的页面空间往往难以完整地展示这些内容。此时,我们可以利用div的滚动来实现溢出内容的展示,并确保用户能够方便地查看所有内容。

    7 年前
  • 我怎么能在JavaScript的alert()查看阵列结构?

    当你在编写 JavaScript 代码时,有时候需要查看数组的结构以便进行调试和测试。一个简单的方法是通过 alert() 函数来输出数组。但是,在输出大型或嵌套的数组时,alert() 的输出可能不...

    7 年前
  • 在 `a` 标签中使用 `preventDefault()` 方法

    在前端开发中,<a> 标签是常用的 HTML 标签之一,通常用于创建链接。但有时我们希望在用户点击链接时阻止默认的行为(即链接跳转),这时就可以使用 preventDefault() 方法...

    7 年前
  • 禁用浏览器的垂直和水平滚动条

    当我们制作网页时,有时候需要隐藏浏览器的垂直和水平滚动条。这种需求通常出现在需要自定义滚动条样式或者希望页面呈现为固定大小的情况下。本文将介绍如何通过 CSS 和 JavaScript 来实现禁用垂直...

    7 年前
  • 我怎样改变moment.js语言

    Moment.js是一个JavaScript日期时间处理库,它提供了一种简单易用的方式来解析、验证、操作和显示日期时间。它支持不同语言环境的本地化,但默认情况下使用英语。

    7 年前
  • 以编程方式向JavaScript函数添加代码

    在前端开发中,我们经常需要向现有的JavaScript函数添加新的功能或改进现有功能。这可以通过编程方式实现,而不是手动修改函数源代码。本文将介绍如何使用JavaScript编程技术来向现有函数添加代...

    7 年前
  • 正确的写循环的方法

    在前端开发中,循环是一个非常常见的操作。它可以让我们对数组、对象等数据类型进行遍历和操作。但是,很多初学者在写循环时容易出现一些错误,导致代码效率低下或不符合预期。

    7 年前
  • 启动脚本运行时开始失踪的错误

    在前端开发中,启动脚本是很常见的一种方式来运行项目。然而,有时候我们可能会遇到启动脚本运行时出现了一些神秘的错误,甚至不知道该如何去解决。 问题描述 当我们使用启动脚本来运行项目时,有时候会发现控制台...

    7 年前
  • 如何依次调用三个函数?

    在前端开发中,我们经常需要执行多个函数。有时候,这些函数需要按照一定的顺序依次执行。本文将介绍如何依次调用三个函数。 方法一:callback 回调函数 回调函数是 JavaScript 中一个非常重...

    7 年前
  • 结合类选择器和属性选择器与jQuery

    什么是类选择器和属性选择器? 在CSS中,类选择器和属性选择器分别用于选择具有相同类名或特定属性值的元素。 类选择器使用“.”符号,后跟一个类名,如下所示: --------- - ------ ...

    7 年前
  • 如何检查用户是否可以返回浏览器历史记录?

    在前端开发中,经常需要处理浏览器的历史记录。有时候我们需要禁止用户返回上一页或者刷新页面,这就需要知道如何检查用户是否可以返回浏览器历史记录。 window.history 浏览器提供了一个 wind...

    7 年前
  • 使用JavaScript选择添加选项

    当我们需要动态地向网页中添加选项时,通常会使用JavaScript。本文将介绍如何使用JavaScript添加选项,并提供详细的示例代码。 基本步骤 获取要添加选项的元素。

    7 年前
  • 最小有效JSON是多少?

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,旨在易于阅读和编写。它广泛用于前端和后端之间的数据交换。那么最小有效的JSON又是多少呢?本文将探讨这个问题...

    7 年前
  • 如何更新 ImmutableJS 中的元素

    ImmutableJS 是一个 JavaScript 库,它提供了一种不可变的数据结构,可以帮助我们更好地管理和操作数据。在前端开发中,ImmutableJS 广泛用于状态管理、数据缓存和性能优化等方...

    7 年前
  • 是否可以使用CSS或JavaScript将光标隐藏在网页中?

    在某些特定的情况下,可能需要隐藏光标。例如,在显示屏幕录像期间,要避免光标干扰到视频内容。但是,是否可以使用 CSS 或 JavaScript 来实现这个效果呢?本文将探讨这个问题。

    7 年前
  • 如何在JavaScript中使用正则表达式匹配文本?

    正则表达式是一种强大的工具,可以用来匹配和搜索文本。在前端开发中,正则表达式经常被用来验证表单输入、搜索和替换文本等领域。本文将介绍如何在JavaScript中使用正则表达式匹配文本。

    7 年前
  • 是ECMAScript 6有抽象类的一个会议吗?[重复]

    很抱歉,我无法为您提供重复的文章。请提供其他主题或问题,我将尽力回答您。 ...

    7 年前

相关推荐

    暂无文章