JavaScript函數模式詳解

2024-05-06 16:10:26

字體：大中小

來源：轉載

供稿：網友

文章對javascript的四種函數模式進行了詳細的解釋，并附上示例，方便小伙伴們理解并應用，希望對大家能有所幫助。

在javascript中，函數是一類對象，這表示他可以作為參數傳遞給其他函數；此外，函數還可以提供作用域。

js函數基礎部分：javascript學習筆記（四）function函數部分

創建函數的語法

命名函數表達式

復制代碼代碼如下:

		
		//命名函數表達式
		var add = function add(a,b){
		    return a+b;
		};

函數表達式

復制代碼代碼如下:

		
		//又名匿名函數
		var add = function(a,b){
		    return a+b;
		};

函數的聲明

復制代碼代碼如下:

		
		function foo(){
		    //code here
		}  //這里可以不需要分號

在尾隨的分號中，函數表達式應總是使用分號，而函數的聲明中并不需要分號結尾.

函數聲明與表達式

函數的提升（hoisting）

函數聲明的行為并不等同于命名函數表達式，其區別在于提升（hoisting）行為，看下面例子：

復制代碼代碼如下:

    function hoist(){
        console.log(typeof foo);//function
        console.log(typeof bar);//undefined

foo();//local foo!
bar();//TypeError: 'undefined' is not a function

        //變量foo以及實現者被提升
        function foo(){
            alert('local foo!?');
        }

        //僅變量bar被提升，函數實現部分并未被提升
        var bar = function(){
            alert('?local bar!');
        };
    }
    hoist();
</script>

對于所有變量，無論在函數體的何處進行聲明，都會在內部被提升到函數頂部。而對于函數通用適用，其原因在于函數只是分配給變量的對象。

提升，顧名思義，就是把下面的東西提到上面。在JS中，就是把定義在后面的東西（變量或函數）提升到前面中定義。從上面的例子可以看出，在函數hoist內部中的foo和bar移動到了頂部，從而覆蓋了全局foo和bar函數。局部函數bar和foo的區別在于，foo被提升到了頂部且能正常運行，而bar()的定義并沒有得到提升，僅有它的聲明被提升，所以，當執行bar()的時候顯示結果為undefined而不是作為函數來使用。

即時函數模式

函數也是對象，因此它們可以作為返回值。使用自執行函數的好處是直接聲明一個匿名函數，立即使用，省得定義一個用一次就不用的函數，而且免了命名沖突的問題，js中沒有命名空間的概念，因此很容易發生函數名字沖突，一旦命名沖突以最后聲明的為準。

模式一：

復制代碼代碼如下:

		
		<script>
		    (function () {
		        var a = 1;
		        return function () {
		            alert(2);
		        };
		    }()());//彈出2，第一個圓括號自執行，第二個圓括號執行內部匿名函數
		</script>

模式二：自執行函數變量的指向

復制代碼代碼如下:

alert(result);//result 指向了由自執行函數的返回值2；如果彈出result()會出錯
</script>

模式三：嵌套函數

復制代碼代碼如下:

alert(result());//alert(result)的時候彈出2；alert(result())的時候彈出function(){return 2}
</script>

模式四：自執行函數把它的返回值賦給變量

復制代碼代碼如下:

		
		    var abc = (function () {
		            var a = 1;
		            return function () {
		                return ++a;
		            }
		        })();//自執行函數把return后面的函數返回給變量
		   alert(abc());//如果是alert(abc)就會彈出return語句后面的代碼；如果是abc(),則會執行return后面的函數

模式五：函數內部執行自身，遞歸

復制代碼代碼如下:

		
		// 這是一個自執行的函數，函數內部執行自身，遞歸
		function abc() { abc(); }

回調模式

回調函數：當你將一個函數write()作為一個參數傳遞給另一個函數call()時，那么在某一時刻call()可能會執行（或者調用）write()。這種情況下，write()就叫做回調函數（callback function）。

異步事件監聽器

回調模式有許多用途，比如，當附加一個事件監聽器到頁面上的一個元素時，實際上是提供了一個回調函數的指針，該函數將會在事件發生時被調用。如：

復制代碼代碼如下:

document.addEventListener("click",console.log,false);

上面代碼示例展示了文檔單擊事件時以冒泡模式傳遞給回調函數console.log()的

javascript特別適用于事件驅動編程，因為回調模式支持程序以異步方式運行。

超時

使用回調模式的另一個例子是，當使用瀏覽器的window對象所提供的超時方法：setTimeout()和setInterval()，如：

復制代碼代碼如下:

		
		<script type="text/javascript">
		    var call = function(){
		        console.log("100ms will be asked…");
		    };
		    setTimeout(call, 100);
		</script>

庫中的回調模式

當設計一個js庫時，回調函數將派上用場，一個庫的代碼應盡可能地使用可復用的代碼，而回調可以幫助實現這種通用化。當我們設計一個龐大的js庫時，事實上，用戶并不會需要其中的大部分功能，而我們可以專注于核心功能并提供“掛鉤形式”的回調函數，這將使我們更容易地構建、擴展，以及自定義庫方法

Curry化

Curry化技術是一種通過把多個參數填充到函數體中，實現將函數轉換為一個新的經過簡化的（使之接受的參數更少）函數的技術。———【精通JavaScript】

簡單來說，Curry化就是一個轉換過程，即我們執行函數轉換的過程。如下例子：

復制代碼代碼如下:

		
		<script type="text/javascript">
		    //curry化的add()函數
		    function add(x,y){
		        var oldx = x, oldy = y;
		        if(typeof oldy == "undefined"){
		            return function(newy){
		                return oldx + newy;
		            };
		        }
		        //完全應用
		        return x+y;
		    }
		    //測試
		    typeof add(5);//輸出"function"
		    add(3)(4);//7
		    //創建并存儲一個新函數
		    var add2000 = add(2000);
		    add2000(10);//輸出2010
		</script>