将整个 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(){ … })()”这样的匿名函数中的目的是什么? 的相关文章

  • Typescript:按值检查对象是否存在于数组中

    我有这个数据 roles roleId 69801 role ADMIN roleId 69806 role SUPER ADMIN roleId 69805 role RB roleId 69804 role PILOTE roleId
  • ReferenceError:找不到变量:需要

    我在加载时遇到问题node modules到我的网页之一 我已经安装了 npm node js 并且我想使用require 函数在我的网站上初始化 Firebase 我不知道为什么 但它抛出引用错误 ReferenceError 找不到变量
  • 无法显示由 Fine-uploader 上传到 Amazon s3 的图像

    我现在尝试设置fineuploader s3以显示在aws服务器上成功上传的文件的图像 如示例页面上所做的那样 http fineuploader com s3 demo http fineuploader com s3 demo 我 仍然
  • Twisted 的 Deferred 和 JavaScript 中的 Promise 一样吗?

    我开始在一个需要异步编程的项目中使用 Twisted 并且文档非常好 所以我的问题是 Twisted 中的 Deferred 与 Javascript 中的 Promise 相同吗 如果不是 有什么区别 你的问题的答案是Yes and No
  • ant-d upload中如何为removeFile添加PopConfirm一个图片文件

    我正在使用 Ant d Upload 通过本地系统上传文件 然后单击文件预览图像上的删除图标 图像文件将被删除 我想添加一个弹出确认 所以我尝试在 onRemovefunction 中添加确认作为承诺但它不起作用 它在浏览器中显示警报 on
  • 计算Javascript中两次点击之间的时间

    我想用 javascript 计算属性的两次点击之间的时间 但我不知道如何 例如 a href click here a 如果用户单击多次 假设 5 秒内 我想显示警报 如果有帮助的话我正在使用 jQuery 我对 javascript 不
  • 将一个文本框的内容复制到另一个文本框

    假设在文本框中输入了一个条目 是否可以在第二个文本框中保留相同的输入文本 如果是这样 这是如何完成的
  • 未捕获的引用错误:myFunction 未定义[重复]

    这个问题在这里已经有答案了 这到底是怎么回事 http jsfiddle net sVT54 http jsfiddle net sVT54
  • 将音频与视频流合并 Node.js

    我正在创建 YouTube 视频下载器并且正在使用ytdl core库 它无法下载带有音频的高质量视频 因为 youtube 将其放在另一个文件中 但我需要将其全部下载到一个文件中 我已经这样做了 app get download asyn
  • 禁用 JavaScript 中的右键单击

    当我尝试禁用右键单击时 它不起作用 我尝试使用下面的代码 document onclick function e console log e button if e button 2 e preventDefault return fals
  • 何时不使用承诺[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在阅读了数十篇关于 es6 Promise 有多伟大以及为什么我们应该实现它们的文章之后 我有这样的感觉 ALL我的 不平凡的 JavaScri
  • 如何在 d3 js 中突出显示从根到选定节点的路径?

    我使用 d3 js 创建了一棵树 现在我创建了一个下拉菜单 其中包含树中所有节点的列表 现在 从下拉菜单中选择一个节点时 我想突出显示从根到该特定节点的路径 这个怎么做 首先创建一个 flatten 函数 它将分层数据变成一个 n 数组 f
  • 保存/导出Chrome的JavaScript控制台输入历史记录

    无论如何 我可以保存或导出 JavaScript 控制台的历史记录吗 input 控制台历史记录 在 Google Chrome 中 我不想保存输出或错误 因此将鼠标悬停在控制台框上 右键单击并选择Save as 不是解决方案 我不想每次都
  • 使react-leaflet能够离线使用

    我一直在使用反应传单 https github com PaulLeCam react leaflet图书馆 到目前为止运作良好 现在我希望网站预加载尽可能多的图块 以便网络应用程序 也是 PWA 可以在没有互联网的情况下使用 我找到了一些
  • 如何将 Browserify 与外部依赖项一起使用?

    我正在尝试慢慢地将 Browserify 引入我的网站 但我不想重写所有 js 也不希望 jquery 和其他库的重复实例与我的 Browserify 版本捆绑在一起 如果我构建将 jquery 列为外部依赖项的模块 那么如何将其指向我的全
  • 有关于 PHP 中的 V8JS 的文档吗?

    有没有关于V8JS的文档 我是否只需要标准 PHP 或一些扩展即可使用 V8JS 我将非常感谢有关 PHP 中的 V8JS 的任何信息 要求 PHP 5 3 3 和 V8 库和标头安装在正确的路径中 Install http www php
  • window.showModalDialog 的等效跨浏览器解决方案是什么?

    window showModalDialog 的等效跨浏览器解决方案有哪些 showModalDialog 在 IE 和 FF 3 中引入 我个人认为没有 但是有很多 UI 工具包提供了这样的功能 例如jQuery UI http jque
  • 替换两个引号之间的字符串

    我想转动一根绳子str hello my name is michael what s your s into hello my name is span class name michael span 我怎样才能在 JavaScript
  • Django 与谷歌图表

    我试图让谷歌图表显示在我的页面上 但我不知道如何将值从 django 视图传递到 javascript 以便我可以绘制图表 姜戈代码 array Year Sales Expenses 2004 1000 400 2005 1170 460
  • Restangular - _.contains() 不是一个函数

    如果您最近通过 Bower 更新了 Restangular 它将安装最新的 Lodash 新的 4 0 然而 这是一个问题 因为 Restangular Angular 现在会抛出错误 contains 不是函数 你怎么解决 解决方案非常简

随机推荐

  • 使用 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 这样做的原因是什么而不是一组简单的构造函数 它通常是命名空间 见下文 并控制成员函数和 或变量的可见性 将其视为对象定