原文地址:What (function (window, document, undefined) {})(window, document); really means

按原文翻译

在这篇文章中,我们将探讨标题所暗示的内容,并解释自调用函数设置给我们带来了什么。

有趣的是,我被问到关于IIFE(即时调用的函数表达式)的很多,它采用以下设置:

(function (window, document, undefined) {
//
})(window, document);

那么为什么不写一篇关于它的文章呢? :-)

首先,这是一系列不同的事情。从顶部:

JavaScript具有函数作用域,因此首先创建了一些需要的“私有范围”。例如:

(function (window, document, undefined) {
var name = 'Todd';
})(window, document); console.log(name); //name is not defined,它在一个不同的范围内

Simple.

一个正常函数是这样的:

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

我们可以选择调用它,在任何我们需要/想的位置。

“IIFE”之所以被创造出来是因为它们是直接调用的函数表达式。

这意味着它们在运行时被立即调用,

我们也不能再调用它们了,它们只运行一次:

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

这里的秘诀是,(我在前面的例子中给一个变量赋值):

(function () {

})();

多余的一对括号是必要的,因为这样不起作用:

function () {

}();

虽然可以通过一些技巧来欺骗JavaScript“使其工作”。
这样强制JavaScript解析器处理 ! 后面的代码:

!function () {

}();

还有其他的变体:

+function () {

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

但我不会用它们。

请参阅@ mariusschulz分解JavaScript的IIFE语法,详细解释IIFE语法及其变体。

https://blog.mariusschulz.com/2016/01/13/disassembling-javascripts-iife-syntax

现在我们知道了它是如何运作的,我们可以将论证传递给我们的 IIFE:

(function (window) {

})(window);

它是如何工作的呢?
记住, (window); 是调用函数的地方,
我们通过窗口对象。
然后这个函数被传递到函数中,我也把它命名为window。
你可以认为这是毫无意义的,因为我们应该给它命名不同的东西,但是现在我们也将使用窗口。

我们还能做什么呢?把所有的东西都传过去!让我们通过文档对象:

(function (window, document) {
// 我们通常需要 window 和 document
})(window, document);

那么关于 undefined 呢?

在ECMAScript 3中,未定义的是可变的。

这意味着它的值可以被重新分配,比如undefined = true;

oh my! 幸运的是,在 ECMAScript 5 中的 ('use strict';)语法将会抛出一个错误告诉你你是一个白痴。

在此之前,我们开始保护自己的 IIFE:

(function (window, document, undefined) {

})(window, document);

也就是说,如果有人来做这件事,我们会没事的:

undefined = true;
(function (window, document, undefined) {
// undefined 是一个局部未定义的变量
})(window, document);

缩小局部变量是IIFE模式的神奇之处。
如果传入的是局部变量名,
所以我们可以随意的命名。

(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();
或者任何东西作为$被分配到模块的本地。
了解范围和全局/局部变量如何工作将进一步帮助您。

还剩下一小段,不想看了,饿了。感觉好像被塞了一把JS的知识。

原因只是我想知道这样一段代码什么意思。

(function (angular) {
'use strict'; //do something })(window.angular);

JS (function (window, document, undefined) {})(window, document)的真正含义的更多相关文章

  1. (译)(function (window, document, undefined) {})(window, document); 真正的意思

    由于非常感兴趣, 我查询了很多关于IIFE (immediately-invoked function expression)的东西, 如下: (function (window, document, ...

  2. javascript匿名函数自执行 (function(window,document,undefined){})(window,document);

    使用匿名自执行函数的作用: (function(window,document,undefined){})(window,document); 1.首先匿名函数 (function(){}) (); ...

  3. (function (window, document, undefined) {})(window, document)什么意思?

    1.IIFE(即时调用的函数表达式),它采取以下表达式: (function (window, document, undefined) { // })(window, document); Java ...

  4. 详解jquery插件中(function ( $, window, document, undefined )的作用。

    1.(function(window,undefined){})(window); Q:(function(window,undefined){})(window);中为什么要将window和unde ...

  5. js实现跨域(jsonp, iframe+window.name, iframe+window.domain, iframe+window.postMessage)

    一.浏览器同源策略 首先我们需要了解一下浏览器的同源策略,关于同源策略可以仔细看看知乎上的一个解释.传送门 总之:同协议,domain(或ip),同端口视为同一个域,一个域内的脚本仅仅具有本域内的权限 ...

  6. window.showModalDialog与window.open()使用

    window.showModalDialog 有些浏览器不兼容,尝试用window.open() 封装替代,需要打开子窗口后向父窗口传递数据. <html> <script src= ...

  7. 详解jquery插件中;(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 1 2 3 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, wi ...

  8. jquery插件中(function ( $, window, document, undefined )的作用

    在jquery插件中我们经常看到以下这段代码 ;(function ( $, window, document, undefined ){ //函数体内具体代码 })(jQuery, window,d ...

  9. ;(function($,window,document,undefined){})(jQuery,window,document)

    ;(function($,window,document,undefined){})(jQuery,window,doucment) 1.自调函数(function(){})() 2.好处是不会产生任 ...

随机推荐

  1. Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again错误解决

    rpm -ivh http://dl.fedoraproject.org/pub/epel/6/i386/epel-release-6-8.noarch.rpm  安装了epel源 但  yum -y ...

  2. post请求远程url 报错“基础连接已经关闭...Authentication.AuthenticationException...远程证书无效”解决方案

    当我们有时用代码编写post请求url远程地址会报“基础连接已经关闭: 未能为 SSL/TLS 安全通道建立信任关系. ---> System.Security.Authentication.A ...

  3. 一个简单的java jdbc案例

    有些时候,配置一个spring+mybatis框架,然后写xml,dao ,service显得特别繁琐. 如果我们只是想查一下数据库,不考虑连接复用也不考虑动态sql,可以用原生的jdbc来实现,方便 ...

  4. 30 C? Go? Cgo!

    C? Go? Cgo! 17 March 2011 Introduction Cgo lets Go packages call C code. Given a Go source file writ ...

  5. wiki confluence安装

    注意:安装前请先确认内存 至少2G 1.上传 atlassian-confluence-5.9.3-x64.bin 文件,修改权限 chmod 777 atlassian-confluence-5.9 ...

  6. Python 安装requests模块

    window下安装: 注:不要使用 easy_install requests 命令 这种方式安装后不能卸载,建议使用pip 方法 1.自动安装 输入cmd命令进入命令行窗口,执行 pip insta ...

  7. Trie树子节点快速获取法

    今天做了一道leetcode上关于字典树的题:https://leetcode.com/problems/word-search-ii/#/description 一开始坚持不看别人的思路,完全自己写 ...

  8. B树 B+树 红黑树

    B-Tree(B树) 具体讲解之前,有一点,再次强调下:B-树,即为B树.因为B树的原英文名称为B-tree,而国内很多人喜欢把B-tree译作B-树,其实,这是个非常不好的直译,很容易让人产生误解. ...

  9. 20165203 实验一 Java开发环境的熟悉

    实验内容及步骤 实验一 Java开发环境的熟悉-1 建立有自己学号的实验目录. 通过vim Hello.java编辑代码. 编译.运行Hello.java代码. 实验一 Java开发环境的熟悉-2 新 ...

  10. 20155225 2006-2007-2 《Java程序设计》第四周学习总结

    20155225 2006-2007-2 <Java程序设计>第四周学习总结 教材学习内容总结 对"是一种"语法测试几次之后,总结一句:满足"是一种" ...