原文地址：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)的真正含義