将整个 Javascript 文件包装在像“(function(){ … })()”这样的匿名函数中的目的是什么?

2023-11-27

我最近读了很多 Javascript,我注意到整个文件在要导入的 .js 文件中像下面这样包装。

(function() {
    ... 
    code
    ...
})();

这样做的原因是什么而不是一组简单的构造函数?


它通常是命名空间(见下文)并控制成员函数和/或变量的可见性。将其视为对象定义。它的技术名称是立即调用函数表达式(IIFE)。 jQuery 插件通常是这样写的。

在 Javascript 中,您可以嵌套函数。因此,以下内容是合法的:

function outerFunction() {
   function innerFunction() {
      // code
   }
}

现在你可以打电话outerFunction(),但可见度innerFunction()仅限于范围outerFunction(),这意味着它是私有的outerFunction()。它基本上遵循与 Javascript 中的变量相同的原理:

var globalVariable;

function someFunction() {
   var localVariable;
}

相应地:

function globalFunction() {

   var localFunction1 = function() {
       //I'm anonymous! But localFunction1 is a reference to me!
   };

   function localFunction2() {
      //I'm named!
   }
}

在上面的场景中,你可以调用globalFunction()从任何地方,但你不能打电话localFunction1 or localFunction2.

当你写作时你在做什么(function() { ... })(),您是否正在将第一组括号内的代码设为函数文字(意味着整个“对象”实际上是一个函数)。之后,您将自调用该函数(最终的())您刚刚定义的。因此,正如我之前提到的,它的主要优点是您可以拥有私有方法/函数和属性:

(function() {
   var private_var;

   function private_function() {
     //code
   }
})();

在第一个示例中,您将显式调用globalFunction按名称运行它。也就是说,你只需要做globalFunction()运行它。但在上面的示例中,您不仅定义了一个函数;还定义了一个函数。你正在定义and一口气调用它。这意味着当您的 JavaScript 文件被加载时,它会立即执行。当然,你可以这样做:

function globalFunction() {
    // code
}
globalFunction();

除了一个显着差异之外,行为在很大程度上是相同的:当您使用 IIFE 时,您可以避免污染全局范围(因此,这也意味着您不能多次调用该函数,因为它没有名称,但因为该函数仅在确实不存在问题时才执行)。

IIFE 的巧妙之处在于,您还可以在内部定义内容,并且只向外界公开您想要的部分(命名空间的示例,这样您基本上就可以创建自己的库/插件):

var myPlugin = (function() {
 var private_var;

 function private_function() {
 }

 return {
    public_function1: function() {
    },
    public_function2: function() {
    }
 }
})()

现在你可以打电话myPlugin.public_function1(),但您无法访问private_function()!与类定义非常相似。为了更好地理解这一点,我推荐以下链接进行进一步阅读:

  • 为你的 Javascript 命名空间
  • Javascript 中的私有成员(Douglas Crockford)

EDIT

我忘了提及。在那场决赛中(),你可以在里面传递任何你想要的东西。例如,当你创建 jQuery 插件时,你传入jQuery or $像这样:

(function(jQ) { ... code ... })(jQuery) 

因此,您在这里所做的就是定义一个接受一个参数(称为jQ,一个局部变量,并且已知only到该功能)。然后你自调用该函数并传入一个参数(也称为jQuery, but this一个来自外部世界,一个是对实际 jQuery 本身的引用)。没有迫切需要这样做,但有一些优点:

  • 您可以重新定义全局参数并为其指定一个在本地范围内有意义的名称。
  • 有一点性能优势,因为在本地作用域中查找内容比必须沿着作用域链进入全局作用域更快。
  • 压缩(缩小)有好处。

前面我描述了这些函数如何在启动时自动运行,但如果它们自动运行,谁来传递参数呢?该技术假设您需要的所有参数都已定义为全局变量。因此,如果 jQuery 尚未定义为全局变量,则此示例将无法工作。正如您可能猜到的,jquery.js 在初始化期间所做的一件事是定义一个“jQuery”全局变量,以及它更著名的“$”全局变量,这允许此代码在包含 jQuery 后工作。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将整个 Javascript 文件包装在像“(function(){ … })()”这样的匿名函数中的目的是什么? 的相关文章

  • 在 Three.js 中绕点旋转对象的正确方法是什么?

    关于 Three js 的大多数教程 问题都建议使用 Three js 绕点旋转对象的方法是在要旋转的位置创建父对象 附加对象 然后移动子对象 然后 当父级旋转时 子级围绕该点旋转 例如 Make a pivot var pivot new
  • jQuery mobile 中的文本区域高度和宽度?

    我修复了 jQuery mobile 中文本区域元素的高度 并且在纵向中得到了完美的高度和宽度 但在横向中宽度没有放大 谁能帮我 提前致谢 HTML
  • Angular UI 模式的范围问题

    我无法理解 使用角度 UI 模式的范围 虽然这里不是很明显 但我已经正确设置了模块和所有内容 据我所知 但这些代码示例尤其是我发现错误的地方 index html 其中重要部分 div class btn group div
  • 在特定页面上执行 javascript 的正确“Rails”方式

    我试图在特定页面上运行 javascript 而我唯一的解决方案似乎是反模式 我有controller js内部生成的assets javascripts 我在用着gem jquery turbolinks 我的代码类似于以下内容 docu
  • 如何正确清理来自 AngularJS 控制器的无效输入的表单?

    我有一个 AngularJS 表单 其中包含 除其他字段之外 类型之一url 后者很重要 因为这会强制相应的输入成为有效的 URL 在某些条件下 例如 要关闭具有此类表单的模式对话框 我想以编程方式清除该表单 为此 我实现了方法reset基
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 使用 Angular 指令禁用文本选择

    我正在学习 JavaScript 和 AngularJS 我想使用 Angular Directive 禁用文本选择 我有该函数的 JavaScript 代码 function clearSelection if document sele
  • Number.IsNaN() 比 isNaN() 更糟糕吗

    Soooooo isNaNJavaScript 显然被破坏了 比如 isNaN isNaN isNaN true isNaN false isNaN 0 返回 false 当它们看起来都是 不是数字 在 ECMAScript 6 中 草案包
  • 按下回车键时不刷新页面

    我遇到了一些问题 只要表单中有输入 回车键就会触发页面刷新 下面的代码 如果按下回车并且文本区域 input 中没有输入任何文本 则不会刷新页面 但是如果按下回车并且 input中有输入或者光标位于文本区域 我不确定是什么触发了它 因为 s
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • React autoFocus 将光标设置为输入值的开头

    我有一个受控输入 最初显示一个值 我已将该输入设置为自动聚焦 但当我希望它出现在末尾时 光标出现在输入的开头 我知道这可能是因为自动对焦是在值之前添加的 但我不能 100 确定 在输入字段末尾完成光标初始化的最佳方法是什么 var Test
  • 如何始终将焦点保持在文本框中

    我创建了一个包含两个 div 的 HTML 页面 左侧的 div 页面的 90 是 ajax 结果的目标 右侧的 div 页面的 10 包含一个文本框 该页面的想法是在文本框中输入零件编号 通过条形码扫描仪 并显示与该零件编号匹配的绘图 显
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 改变 JavaScript 中的顶部填充

    以下是我在 css 中设置顶部填充的方法 body font size font size px margin 0 padding 100px 0 20px 0 width 100 important 如何使用最简单的 javascript
  • LeafleteachLayer函数不会迭代所有Layer

    使用 GeoJSON 数据数组创建一些标记 getJSON GetLocationsServlet function data L geoJSON data onEachFeature onEachFeature addTo mymap G
  • 用于选择特定 div 中具有特定类的锚元素的 jQuery 选择器是什么

    我有一些这样的代码 我想选择每个 a 带有类的标签status在 div 中foo div a class status a div 你可以这样做 foo find status a
  • Google Maps API (v3) 添加/更新标记

    编辑 它现在可以工作 但如果用户不允许或没有基于位置的服务 则不会加载 请参阅 jsfiddle 示例接受的答案评论 我已经浏览了一些教程和问题 但我无法安静地理解正在发生的事情 或者在这种情况下 没有发生 当用户单击链接时 我正在加载地图
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

随机推荐

  • 使用 devtools::install_github() 安装无法检测构建工具

    这是我第一次尝试下载 Github 包 在 MacOS Big Sur v11 2 1 上使用 RStudio v1 2 5033 时遇到了一些问题 最初 运行时 library devtools devtools install gith
  • 在Python中将分钟转换为HH:MM格式[重复]

    这个问题在这里已经有答案了 首先 我想指出我是Python的初学者 我的问题是我不知道在 Python 中将分钟转换为 HH MM 格式的正确方法是什么 任何帮助表示赞赏 Use the divmod 功能 02d 02d format d
  • 如何从授权的 access_token 创建 GoogleCredential?

    我有一个像这样的 OAuth2 令牌 access token xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx expires in 3600 refresh token xxxxxxxxxxxxxxx
  • 客户端已断开连接

    我在 WebAPI 日志中收到以下错误 System Web HttpException 0x800703E3 客户端已断开连接 在 System Web Hosting IIS7WorkerRequest EndRead IAsyncRe
  • 如何使用 winapi 了解 Windows 文件系统中的文件何时以及哪些文件被更改

    我为教育目的制作了具有间谍软件功能的程序 我需要在程序中知道文件系统何时更改文件以及正在更改哪些文件 我怎样才能在 C 中做到这一点 在 Windows 上 查看SHChangeNotifyRegister 它不仅告诉您发生了何种类型的更改
  • 如何连接Heroku Redis TLS节点?

    我似乎无法在 Node 上使用 TLS 连接到 Heroku Redis 这些文档并没有多大帮助 https devcenter heroku com articles secure heroku redis 有人有一个有效的例子吗 我应该
  • Markdown 将 JavaScript 中的双星号转换为粗体文本

    我正在尝试制作自己的可降价文本区域 就像 Stackoverflow 所做的那样 目标是让人们能够打字 blah blah 在文本区域中 并在 div 中输出 span style font weight bold blah blah sp
  • PHP:对象分配给静态属性,这是非法的吗?

    将某个对象分配给静态属性是非法的吗 我在下面的代码中收到 HTTP 500 错误 require once class linkedlist php class SinglyLinkedlistTester public static ll
  • 创建自定义 TSetProperty 属性编辑器

    我正在尝试为某些自定义组件创建自定义属性编辑器 自定义属性编辑器旨在编辑一些设置属性 例如 type TButtonOption boOption1 boOption2 boOption3 TButtonOptions set of TBu
  • 在 VB.NET 字符数组中添加“c”有什么作用?

    我想使用 String 方法 IndexOfAny 来检查指定字符串中是否存在字符 我在网上找到的使用 IndexOfAny 方法的示例在使用 VB NET 时在字符数组中的每个字符后面包含一个 c 然而 当我查看 VB NET 中简单字符
  • 无锁同步

    我的问题与多线程无锁同步有关 我想知道以下内容 实现这一目标的一般方法是什么 我在某处读到过有关 LockFreePrimitives 的内容 如 CompareAndExchange CAS 或 DoubleCompareAndExcha
  • 相关模型的每个实例的活动管理范围

    我对动态活动管理范围有疑问 我试图为我的应用程序中 项目 的每个 经理 创建一个范围 但是 当创建新的经理 或分配给项目 时 范围似乎不会更新 但如果我重新启动服务器 它们会更新 所以代码本身 有效 但显然不是按照我希望的方式 我是一个 r
  • Cert-Manager 证书续订流程 - 如何执行?

    我在用cert manager v0 10 0从其安装舵图 我在用kong就像入口控制器来管理入口操作 所以我创建了一个ClusterIssuer资源 以便可以通过 kong ingress 控制器从 Ingress 资源联系它 The C
  • C 语言中 ~0 的值是多少?

    我想得到的值INT MIN and INT MAX 我试过了 0 and 0 gt gt 1因为最左边的位是符号位但我得到了 1对于他们俩来说 很困惑为什么 0事实并非如此0xffffffff and 0 gt gt 1 to be 0x7
  • Yolo 没有开始训练

    我正在尝试在自定义数据集上训练 Yolo 一切似乎都正常运行 没有错误 但它只是没有训练 我按照教程进行操作https github com AlexeyAB darknet两次但我得到相同的结果 darknet detector trai
  • 资源解释为文档,但使用 MIME 类型 image/jpeg 进行传输

    我正在使用 Filepicker io 处理网站上的图像上传 我还使用 FancyBox 来显示一个漂亮的滑块 如果我使用常规图像 则一切正常 http i imgur com asdf jpeg as the img src 这意味着我单
  • 在 Unity 中验证 SSL\TLS 证书

    我在统一证书验证方面遇到问题 我使用 Net 类 HttpWebResponse 发出请求并向 ServicePointManager ServerCertificateValidationCallback 提供回调函数 该证书由权威机构签
  • 替换 JavaFX GridPane 中 (row,col) 处的节点

    我正在制作一个基于错误 感知 和吃食物的网格式游戏 模拟 我正在使用 gridPane 称为worldGrid 标签来显示虫子和食物的网格 当错误将细胞移向食物等时 这显然会不断更新 我目前有一个功能updateGrid int col i
  • 克隆 git“shallow”存储库时出错

    发出命令时出现以下错误git clone bare path to repo fatal attempt to fetch clone from a shallow repository 首先 什么是浅存储库 为什么它不允许我克隆它 将 g
  • 将整个 Javascript 文件包装在像“(function(){ … })()”这样的匿名函数中的目的是什么?

    我最近读了很多 Javascript 我注意到整个文件在要导入的 js 文件中像下面这样包装 function code 这样做的原因是什么而不是一组简单的构造函数 它通常是命名空间 见下文 并控制成员函数和 或变量的可见性 将其视为对象定