AngularJS中(function(a,b){})(a,b)立即函数理解

2023-11-10

;(function(window, angular, document){

函数体;

})(window, window.angular, document);


一、Scope

我们知道,Javascript是函数作用域,因此,这么写创建了一个“私有作用域”。例如:

(function (window, document, undefined) {
  var name = 'Todd';
})(window, document);

console.log(name); // name is not defined, it's in a different scope

二、How it works

一个普通的函数看起来像这样:

var logMyName = function (name) {
  console.log(name);
};

logMyName('Todd');

我们能够在作用域下的任何一处调用它。

我们如何让上面的函数在运行时能立即调用呢?可以像下面这样:

var logMyName = (function (name) {
  console.log(name); // Benjamin
})('Benjamin');

立即函数的定义像下面这样:

(function () {
  
})();

额外的圆括号是必须的,但是下面的代码会报错:

function () {
  //Uncaught SyntaxError: Unexpected token ( 
}();

虽然几种怪异的写法能欺骗javascript "making it work",这些迫使JavaScript分析器对待下面的代码中的“!”字符作为一个表达式:

!function () {
  
}();

还有一些其他的变种:

+function () {
  
}();
-function () {
  
}();
~function () {
  
}();

当然我们不会使用它们,如果你感兴趣可以运行下它们都输出为何值?

三、Arguments

现在我们已经知道它是如何工作的了,我能传递参数到立即函数中。

(function (window) {
  
})(window);

在函数运行时我们传递一个window对象,接收的参数名称也命名为window,你可能觉得不好,但是现在也使用window。
我们还可以传入文档对象document,像下面这样:

(function (window, document) {
  // we refer to window and document normally
})(window, document);

熟悉原型链的同学都知道,访问局部变量肯定比访问全局变量速度快,如果一个程序中大规模的访问全局变量,那性能问题是值得我们考虑的。

四、What about undefined?

在Ecmascript 3中,undefined是可变的,不是关键字,这意味着它的值可以被覆盖或者重新赋值。如undefined = true。值得庆幸的是,在ECMASCRIPT 5严格模式('use strict';)中解析器将抛出一个类型错误。因此我们需要保护我们的undefined,像下面这样:

(function (window, document, undefined) {

})(window, document);

这意味着,如果有人重新定义了undefined,对我们也是么有影响的,想下面这样:

undefined = true;
(function (window, document, undefined) {
  // undefined is a local undefined variable
})(window, document);

五、Minifying

使用立即函数的形式,在我们压缩代码时会更容易的:

(function (window, document, undefined) {
  console.log(window); // Object window
})(window, document);

改变如下:

(function (a, b, c) {
  console.log(a); // Object window
})(window, document);

想象一下,所有的形参、window、document都能被很好的压缩,当然像使用jQuery时常用$,同时我们可以使用其他的代替:

(function ($, window, document, undefined) {
  // use $ to refer to jQuery
  // $(document).addClass('test');
})(jQuery, window, document);

(function (a, b, c, d) {
  // becomes
  // a(c).addClass('test');
})(jQuery, window, document);

这也意味着你不要使用jQuery.noConflict();当引用不同的库发生$冲突时。
当然,一个好的minifier将确保重命名undefined to c。重要的是要注意,这和undefined的名称是不相关的。我们只需要知道该引用对象是undefined,因为undefined没有特殊的含义 - undefined是javascript分配给未定义变量的值。

六、Non-browser global environments

当在非浏览器环境中,如nodejs,为了适应多种环境,我们定义立即函数像如下这样:

(function (root) {

})(this);

下面是一个通用的解决方案,在不同的环境中:

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(factory); //requireJS
  } else if (typeof exports === 'object') {
    module.exports = factory; //as nodejs
  } else {
    root.MYMODULE = factory(); //in borwser
  }
})(this, function () {
  // 
});
======================================================================================================================================================================
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularJS中(function(a,b){})(a,b)立即函数理解 的相关文章

  • 禁用 Ctrl + 滚动以缩放谷歌地图

    Does anybody know how to disable the CTRL Scroll First when the mouse wheel was moved the Map would Zoom in out But now
  • JW Player - 视频可以在 Chrome 中播放,不能在 Firefox 或 IE 中播放

    See 工作链接 http www 888behindthescenes com test 在主页上我有两个视频 intro video 和 video container 在 chrome 下我没有问题 但在 firefox 和 IE 中
  • React 和 Leaflet 结合的好方法

    我正在开发一个将 React 和 Leaflet 结合起来的项目 但我必须说我在语义方面遇到了一些困难 由于大部分内容都是由 Leaflet 直接管理的 我不知道将 Leaflet 映射实例添加为 React 组件中的状态是否有意义 当涉及
  • 使用 vue.js 显示 json 结果

    您好 我尝试使用 vue js 显示 json 文件结果 目标是结果将显示在值上 这是我的代码 data return fetchData function var self this self http get api casetotal
  • React 测试库:当输入表单上的 fireEvent 更改时,给定元素没有值设置器

    我想改变的值材质用户界面 https material ui com components text fields TextField在反应测试库中 我已经设置了 data testid 然后使用getByTestId我拿起了输入元素 th
  • 仅返回 JavaScript 字符串中最后一个下划线之前的文本

    如果我有一个像这样的字符串 var str Arthropoda Arachnida Zodariidae Habronestes hunti 如何获取最后一个下划线之前的字符串的第一部分 在这种情况下我只想 Arthropoda Arac
  • 无法使用 Node.JS 将 null 值发送到 MySQL 数据库

    我正在尝试发送null使用 Node JS 到我的 MySQL 数据库 con query INSERT INTO Routes routeTrigger VALUES null title test function err result
  • 自定义过滤器在 Angular Hybrid 应用程序中不起作用

    我正在尝试将 AngularJS 1 6 应用程序与 Angular 5 一起转换为混合应用程序 我定义了以下简单过滤器 function use strict var filterId colorPicker angular module
  • Internet Explorer 的数组indexOf 实现

    有很多关于如何将 indexOf 实现放入数组原型中以便它可以在 Internet Explorer 下工作的解决方案 但是我偶然发现了一个问题 到目前为止我所看到的任何地方似乎都没有解决这个问题 使用非常一致的MDC 的实施 https
  • 当容器有选择框时 jQuery mouseleave 触发问题

    我有两个容器 一个嵌套在另一个容器内 当我将鼠标悬停在父容器上时 我希望显示子容器 当我鼠标移出时 我希望子容器淡出 我遇到的问题是子容器有一个包含 选择框 的表单 当用户选择选择框时 会意外触发 mouseleave 事件 如何阻止选择框
  • Imperavi Redactor 内容未复制到隐藏文本区域

    我正在尝试使用因佩拉维编辑器 http imperavi com redactor 在这里控制我的富文本编辑 div class control group div class controls div div document ready
  • 将 Cordova console.log 写入文件

    有谁知道是否有可能console log写入文件或类似的东西 我已经记录了我的应用程序 但它仅写在控制台上 出于远程目的debugging我也需要将现有日志写入文件 我想创建一个文件并将日志写入该文件中 但这将使我复制现有的日志代码 因此
  • 解密Javascript源代码[关闭]

    很难说出这里问的是什么 这个问题是含糊的 模糊的 不完整的 过于宽泛的或修辞性的 无法以目前的形式得到合理的回答 如需帮助澄清此问题以便重新打开 访问帮助中心 help reopen questions 我已经编写了一段 JavaScrip
  • 调整发散堆积条形图以使用通用更新模式

    我一直在使用可用的堆积条形图示例here https bl ocks org mbostock b5935342c6d21928111928401e2c8608使用以下代码 var data month Q1 2016 apples 384
  • 按位非运算符

    为什么要按位运算 0 打印 1 在二进制中 不是0应该是1 为什么 你实际上很接近 在二进制中 不是0应该是1 是的 当我们谈论一位时 这是绝对正确的 然而 一个int其值为0的实际上是32位全零 将所有 32 个 0 反转为 32 个 1
  • 需要了解Javascript函数提升示例

    我阅读了 Javascript 提升的概念 它非常令人困惑 但我看到了一些示例并了解了提升的实际作用 所以基本上 提升是 JavaScript 的默认行为 即将所有声明移动到当前作用域的顶部 当前脚本或当前函数的顶部 但我无法理解以下实现
  • 在没有全局变量的情况下对多个事件使用 Promise 回调

    我有一个包含在函数中的承诺 我将使用不同的输入参数多次调用该函数 每次承诺解决时 我都会将解决的值推送到存储数组中 当我所有的调用承诺都得到解决后 我将在其他函数中使用这个存储数组 是否有任何干净的方法可以在不使用 全局 变量的情况下进行设
  • ajax - 检查用户名是否存在+如果存在则返回消息

    我试图检查用户想要的用户名是否已被使用 而无需发送表单 基本上是用户名字段的模糊 我遇到了一些麻烦 有几个问题 我有我的输入字段加上js
  • Rails 6 webpack 抛出“未捕获的引用错误:$未定义”

    大家好 我最近开始使用 ruby 2 6 5 开发 Rails 6 由于 Rails 6 引入了 webpack 所以我尝试使用 webpack 加载我的 js 文件 尽管我已经在 appliation js 中需要了 jquery 但我仍
  • CasperJS:如何单击所有选定的按钮?

    我正在尝试使用 CasperJS 作为网络抓取工具 并且有一个带有按钮的页面 单击该按钮将加载数据 因此 我想先单击所有这些按钮 然后等待 然后再实际进行查询以获取所有必要的数据 问题是对于 Casper casper thenClick

随机推荐

  • Xilinx Vivado 流水灯实验

    流水灯设计时需要考虑哪些因素 流水灯设计流程的基本步骤及各步骤主要功能 各文件的作用 流水灯IPI设计流程的基本步骤及各步骤主要功能 IP集成设计的优点 文件注释 verilog语言 当时这部分花时间自学的
  • python:thread模块

    该包在 Python 2 中属于正常可用状态 但在 Python 3 中处于即将废弃的状态 虽然还可以用 但包名被改为 thread 使用 thread 包首先要引入该包 在 Python 2 中使用下面的语句来引入 import thre
  • 实时音频编解码之十七 Opus解码 SILK解码

    本文谢绝任何形式转载 谢谢 5 2 Silk解码流程 解码器线性预测层主要使用长短时预测合成滤波器对激励信号滤波实现 线性预测层内部的工作带宽为NB MB以及WB 对于SWB以及FB的混合编码工作模式 线性预测层依然工作于WB带宽下 经过区
  • Qt Creator 5.9.9下载与安装图解详细教程

    Qt Creator 5 9 9下载与安装图解详细教程 一 Qt Creator 下载 推荐最新版5 9 9 网上可能推荐4 x x 但实际上不是做专业UI项目的话Qt Creator版本越新越好 其一 安装包给你集合到一个 exe里面 不
  • 期货开户手续费有哪些优惠?

    在网上随便找一位期货公司经纪人 直接说你有帐户但手续费高 现在想换一家手续费低的期货公司 这样通常就能开到最低手续费帐户了 或者直接点问 手续费能不能加一分 简单明了 如果手续费相同的情况下 还得考虑期货公司的保证金 交易软件 服务等因素来
  • php layui post文件上传,layui框架实现文件上传及TP3.2.3(thinkPHP)对上传文件进行后台处理操作示例...

    本文实例讲述了layui框架实现文件上传及TP3 2 3对上传文件进行后台处理操作 分享给大家供大家参考 具体如下 layui框架是1 0 9版本 首先html页面代码如下 js代码如下 layui use upload function
  • UDP网络基础知识简介

    作者简介 CSDN2021博客之星亚军 新星计划导师 博客专家 哪吒多年工作总结 Java学习路线总结 搬砖工逆袭Java架构师 关注公众号 哪吒编程 回复1024 获取Java学习路线思维导图 大厂面试真题 加入万粉计划交流群 一起学习进
  • OpenGL学习笔记(二)-着色器-纹理

    参考网址 LearnOpenGL 中文版 哔哩哔哩教程 第一章 入门 1 3 着色器 1 3 1 基本结构 利用着色器语言编写着色器 以顶点着色器和片段着色器为例 在着在顶点着色器中输出颜色变量vertexColor 在片段着色器中输入变量
  • JDK 17 营销初体验 —— 亚毫秒停顿 ZGC 落地实践

    前言 自 2014 年发布以来 JDK 8 一直都是相当热门的 JDK 版本 其原因就是对底层数据结构 JVM 性能以及开发体验做了重大升级 得到了开发人员的认可 但距离 JDK 8 发布已经过去了 9 年 那么这 9 年的时间 JDK 做
  • 如何理解凸优化中的共轭函数的定义?

    共轭函数的意义主要就是 一个函数即便不是凸函数 但通过共轭法获得一个凸函数 很方便求解全局最优解的问题 另外 共轭函数亦称对偶函数 极化函数 函数的某种对偶变换 过多的东西我就不再赘述了 此处我是想着重讲一讲为什么共轭函数是可以 保凸 的
  • 中国物流,驶入大航海时代

    出海的一体化 不仅仅是物流的一体化 更是产业链 供应链的一体化 在诸多问题下 想要帮助企业更好地出海 就不能只专注于自身的长板 而是需要先补齐短板 作者 斗斗 编辑 皮爷 出品 产业家 出海时代真的要来了 这种感觉从未如此强烈过 在过去两年
  • React项目中使用svg组件

    使用react svg模块 安装依赖 yarn add D react svg 新建index js文件 import React from react import ReactSVG from react svg function get
  • 【笔记】scanf函数:读取参照getchar()

    Reference 浅谈关于空格和回车对于输入函数的影响 程序猿的探索之路的博客 CSDN博客 c语言scanf输入打空格的影响 Note 回车键 依次包含 LF NL line feed new line 十进制 10 和 CR carr
  • css怎么设置div滚动条

    随着网页及移动端应用的发展 滚动条成为了一种不可或缺的用户体验 而 CSS3 提供的一系列滚动条样式设置使得我们可以更加灵活地定制滚动条的样式 今天我们就来一起探讨一下如何利用CSS来设置div滚动条 一 基础设置 我们在HTML中定义一个
  • 阿里云上传图片的使用,AccessKey查看,入门级别

    阿里云上传图片的使用 可能很多人想上传图片到云端 却连阿里云怎么使用都还不会 我这个是入门级别的教程 一步一步来 我这里先附上我自己的前端上传图片教程代码vue前端直传阿里云 首先就是点击阿里云之后进行注册 注册就不贴了啊 阿里云是可以直接
  • css选择同时有两个类名的标签

    这个技巧比较厉害 记录一下 链接
  • Anaconda查看、创建、切换、删除虚拟环境

    Anaconda查看 创建 切换 删除虚拟环境 参考链接 1 查看已有虚拟环境 在命令行输入以下命令 conda info envs 这里的base 带星号的 代表基层或者当前虚拟环境 paddle是我新建的一个虚拟环境 2 创建新的虚拟环
  • 【微服务部署】五、Jenkins+Docker一键打包部署NodeJS(Vue)项目的Docker镜像步骤详解

    NodeJS Vue 项目也可以通过打包成Docker镜像的方式进行部署 原理是先将项目打包成静态页面 然后再将静态页面直接copy到Nginx镜像中运行 一 服务器环境配置 前面说明了服务器Nginx的安装和配置 这里稍微有些不同 但是因
  • Qlib股票数据获取与查看(Qlib学习1)

    文章目录 Qlib基本信息 数据使用方法 1 借助Qlib下载数据 2 查看相关数据 参考链接 Qlib基本信息 Qlib Github主页 https github com microsoft qlib Qlib quickstart h
  • AngularJS中(function(a,b){})(a,b)立即函数理解

    function window angular document 函数体 window window angular document 一 Scope 我们知道 Javascript是函数作用域 因此 这么写创建了一个 私有作用域 例如 f