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(){});
(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
版權聲明:本文爲博主原創文章,轉載請附上博文鏈接!