js中函數聲明與函數表達式的區別以及立即執行函數

madthumb 發布于2019-08-23 10:26 / 2910人閱讀

摘要：最近在寫代碼時遇到了閉包，其中閉包又和立即執行函數有點關系，于是牽扯除了函數聲明以及函數表達式，我感覺中文的很多文章寫的不太好，查閱了的指南和這篇關于的文章，覺得寫的很好，整合一下。函數聲明和函數表達式。

最近在寫代碼時遇到了閉包，其中閉包又和立即執行函數（immediately invoked function expression, aka IIFE)有點關系，于是牽扯除了函數聲明以及函數表達式，我感覺中文的很多文章寫的不太好，查閱了mdn的function指南和這篇關于IIFE的文章，覺得寫的很好，整合一下。

Firstly, in JS there are two ways of defining functions: function declarations and function expressions, aka 函數聲明和函數表達式。

function declaration (function definition or function statement)

This is always followed by the name of the function (which is very important cauz function declaration requires a name, if not, it may encounter some SyntaxError, we can see from the following examples), a list of parameters and the JavaScript statements that define the function, enclosed in curly braces{}.

function expression

This can be anonymous; it doesn"t have to have a name;

var ab = function(){}; //anonymous function expression
var ac = function ad() {};// function expression with a name

.
.
SyntaxError will happen in the following case when lack of a name:

var foo = function(){}; //this is a anonymous function expression we will see in the future
foo(); //we can invoke the function by adding parens after foo
// then some people might think of the following, since foo equals to function(){} and foo() can be used, why don"t we use function{}()?
function(){}(); // However, there will be a SyntaxError: "unexpected ("

1.1 What leads to this SyntaxError?
The reason is that the parser treats it as a function declaration without a name rather than a function expression.
Now that, what about we give it a name by using

function foo(){}();// there will also be a SyntaxError: "unexpected )"

1.2 What leads to the other SyntaxError?
This is because parens placed after the stataments are view as a grouping operator which needs to contain an expression;
OK, here I finally got the idea and there must be no error! Why don"t we use this:

function foo(){}(1); //no error

1.3 In this case, however, the function is not executed either despite there is no error. Here is the reason, the parser treated this as two separate unrelated expression

function foo(){}; 
(1);

.
.
Is there any way to solve the problem????
Yep! The solution is IIFE（立即執行函數）！！！！！！

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

Unlike in 1.1, the parser encounters function keyword and knows that now I need to treat it like function expression rather than a function declaration! Such parens indicate that the function expression will be immediately invoked and the variable will contain the result of the function.
也就是說，只要不讓function這個關鍵詞出現在行首就行，所以下面的情況都可以。

~function(){}();
!function(){}();

One application of IIFE -- Closure(閉包）

IIFE is used to lockin values and effectively save state.
The advantage is that since the function is invoked immediately without an identifier, a closure can be used without polluting the current scope.

GPU云服務器云服務器 js中函數的調用、 js中函數參數的作用執行js函數怎么執行js函數

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96342.html

Javascript 函數、作用域鏈與閉包

摘要：而外層的函數不能訪問內層的變量或函數，這樣的層層嵌套就形成了作用域鏈。閉包閉包是指有權訪問另一個函數作用域中的變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量。閉包是js中一個極為NB的武器，但也不折不扣的成了初學者的難點。因為學好閉包就要學好作用域，正確理解作用域鏈，然而想做到這一點就要深入的理解函數，所以我們從函數說起。函數...

ssshooter 2019-08-23 11:47 評論0 收藏0
js立即執行函數: (function ( ){...})( ) 與 (function ( ){.

摘要：你需要明白的原理，我簡單說一下這是定義，定義只是讓解釋器知道其存在，但是不會運行。這是語句，解釋器遇到語句是會運行它的。在SF上看到這樣一個問題，我覺得問得很好，所以弄成文章收集了。沒有區別。你需要明白 IIFE 的原理，我簡單說一下： function foo() {...} // 這是定義，Declaration；定義只是讓解釋器知道其存在，但是不會運行。 foo(...

xbynet 2019-08-21 10:41 評論0 收藏0
前端基礎問題整理-JavaScript相關

摘要：請解釋事件代理事件代理也稱為事件委托，利用了事件冒泡。同源指的是協議域名端口相同，同源策略是一種安全協議。目的同源策略保證了用戶的信息安全，瀏覽器打開多個站點時，互相之間不能利用獲取對方站點的敏感信息。請解釋事件代理(event delegation) 事件代理也稱為事件委托，利用了事件冒泡。例如： item1 item2 item3 當頁面li增多時單...

劉東 2019-08-21 14:03 評論0 收藏0
ES5和ES6作用域詳解

摘要：允許在塊級作用域內聲明函數。上面代碼中，存在全局變量，但是塊級作用域內又聲明了一個局部變量，導致后者綁定這個塊級作用域，所以在聲明變量前，對賦值會報錯。 ES5的作用域變量起作用的范圍，js中能創建作用域的只能是函數 { let a = 1; var b = 2; } console.log(a); // a is not defined console.log(b); //...

Dr_Noooo 2019-08-21 17:30 評論0 收藏0
詳解JavaScript函數模式

摘要：函數表達式又名匿名函數為變量賦的值是函數定義本身。在語言里任何匿名函數都是屬于對象。這種情況下，就叫做回調函數。如上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調函數的特別適用于事件驅動編程，因為回調模式支持程序以異步方式運行。 JavaScript設計模式的作用是提高代碼的重用性，可讀性，使代碼更容易的維護和擴展在javascript中，函數是一類對象，這表示他可以作為參數傳遞...

wwolf 2019-08-21 10:20 評論0 收藏0