(function(){}())與(function(){})()的區別

1. (function(){}())與(function(){})()

這兩種寫法,都是一種 立即執行函數 的寫法,即IIFE (Immediately Invoked Function Expression)。這種函數在函數定義的地方就直接執行了。

通常的函數聲明和調用分開的寫法如下:

function foo() {/*...*/}     // 這是定義,Declaration;定義只是讓解釋器知道其存在,但是不會運行。

foo();                   // 這是語句,Statement;解釋器遇到語句是會運行它的。

普通的函數聲明function foo(){}是不會執行的。這裏如果直接這樣寫function foo(){}()解釋器會報錯的,因爲是錯誤的語法。
IIFE函數的調用方式通常是將函數表達式、它的調用操作符、分組操作符放到一個括號內,來告訴解釋器這裏有一個需要立即執行的函數。否則通常情況下,解析器遇到一個function關鍵字,都會把它當做是一個函數聲明,而不是函數表達式。
如下幾種寫法都是可以的:

(function foo(){/*...*/}());

(function foo(){/*...*/})();

!function foo() {/*...*/}();

+function foo() {/*...*/}();

-function foo() {/*...*/}();

~function foo() {/*...*/}();

在需要表達式的場景下,就不需要用括號括起來了:

void function(){/*...*/}();

var foo = function(){/*...*/}(); 

true && function () { /*...*/ }();

0, function () { /*...*/ }();

void聲明瞭不需要返回值,第二個則將IIFE函數的返回值賦給了foo。第三、第四個都是明確需要表達式的場景,所以解析器會認識這種寫法。

對於IIFE函數,也可以給它們傳入參數,例如:

(function foo(arg1,arg2,...){...}(param1,param2,...));

對於常見的

(function( $ ){...})(jQuery);

即是將實參jQuery傳入函數function( $ ){},通過形參 $ 接收。
上述函數中,最開始的那個括號,可能會由於js中自動分號插入機制而引發問題。例如:

a  =  b  +  c 
;(function  () { 
  // code 
})();

如果沒有第二行的分號,那麼該處有可能被解析爲c()而開始執行。所以有的時候,可能會看到這樣的寫法:;(function foo(){//}()),前邊的分號可以認爲是防禦型分號。

2. 第二類是$(function(){});

(function()/.../);(function(){/*...*/});是(document).ready(function(){//})的簡寫形式,是在DOM加載完成後執行的回調函數,並且只會執行一次。

$( document ).ready(function() {
   console.log( "ready!" );
});   

和

$(function() {
   console.log( "ready!" );
});

起到的效果完全一樣。

在一個頁面中不同的js中寫的$(function(){//});函數,會根據js的排列順序依次執行。
例如:
test.html

<!DOCTYPE html> 
<html> 
<head></head> 
<body> 
    <span>This page is shown to understand '$(document).ready()' in jQuery. <br /><span> 
    <p> 
        If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...<br /><br /> 
    </p> 
    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script src="test1.js"></script>
    <script src="test2.js"></script>
</body> 
</html>

test1.js

$(function(){
    $(document.body).append("$(document).ready()1 is now been executed!!!<br /><br />"); 
});

test2.js

$(function(){
    $(document.body).append("$(document).ready()2 is now been executed!!!<br /><br />"); 
});

最後可以看到頁面輸出如下:

This page is shown to understand '$(document).ready()' in jQuery. 
If you see this line, it means DOM hierarchy has been loaded. NOW loading jQuery from server and execute JS...
$(document).ready()1 is now been executed!!!
$ (document).ready()2 is now been executed!!!

原文:https://blog.csdn.net/stpice/article/details/80586444
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章