JS (function (window, document, undefined) {})(window, docum

时间:2021-07-14 06:21:28

原文地点: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);