首頁 > web前端 > js教程 > JavaScript函數進階學習與進階函數實例程式碼詳解

JavaScript函數進階學習與進階函數實例程式碼詳解

伊谢尔伦
發布: 2017-07-25 13:35:05
原創
1683 人瀏覽過

匿名函數與巢狀函數
 
在JavaScript可以宣告一個沒有名稱的函數,稱為匿名函數(Anonymouse Function)。同時JavaScript也允許在函數內部宣告函數,稱為巢狀函數(Nested Function),巢狀函數的作用域為整個父函數。
 
在前函數宣告的部分看到了匿名函數和巢狀函數的一種用法,由於匿名函數沒有名稱,不會引入新的變數污染情境環境,而且會帶來新的變數作用域,因此匿名函數常被用來防止全域環境污染。
 
JavaScript運行時中有一個特殊的全域環境(global object),這個物件上面存放全域的函數和變量,實際開發中常會使用若干第三方的函式庫或多個js文件,若不小心在全域物件引入重複的變數或函數聲明,則會造成程式碼執行混亂。例如先後引入兩個js文件,分別定義了自己的函數log作為內部使用,則第二引入的函數會覆蓋第一個的定義且不會拋出任何錯誤,在後續的執行中調用log函數可能會造成錯誤。這時候使用一個匿名函數將整個js內的邏輯包裝起來,就可以避免這種錯誤,這種方法已經被絕大多數開源js庫使用。

(function() { // 匿名函数 
   
 function log(msg) { 
     console.log(msg); 
 } 
   
 // 其他代码 
   
 }()); // 立即执行
登入後複製

以上程式碼就是一個簡單的範例,log函數的作用域被限制在這個匿名函數之內,而匿名函數則因為被外面一對小括號()包括起來,形成一個函數表達式,表達式的值是一個函數,緊接著一對小括號表示立即執行這個函數,讓原有的程式碼正常執行一次。不過,這種方式宣告的函數、透過var宣告的變數等等都是內部的,不能被任何匿名函數以外的程式碼存取。如果你需要對外暴露一些函數作為介面的話有以下幾種方法:

 var mylib = (function(global) { 
   
 function log(msg) { 
   console.log(msg); 
 } 
   
 log1 = log;  // 法一:利用没有var的变量声明的默认行为,在log1成为全局变量(不推荐) 
   
 global.log2 = log;  // 法二:直接在全局对象上添加log2属性,赋值为log函数(推荐) 
   
 return {  // 法三:通过匿名函数返回值得到一系列接口函数集合对象,赋值给全局变量mylib(推荐) 
    log: log
 }; 
   
 }(window));
登入後複製

高階函數(High-order Function)

如果函數作為參數或傳回值使用時,就稱為高階函數,JavaScript中的函數都可以當作高階函數來使用,這也是第一類函數的特徵。下面我們就分別分析一下這兩種使用方法。

 function negative(n) { 
   return -n; // 取n的相反值 
 } 
   
 function square(n) { 
   return n*n; // n的平方 
 } 
   
 function process(nums, callback) { 
   var result = []; 
   
   for(var i = 0, length = nums.length; i < length; i++) { 
     result[i] = callback(nums[i]); // 对数组nums中的所有元素传递给callback进行处理,将返回值作为结果保存 
   } 
   
   return result; 
 } 
   
 var nums = [-3, -2, -1, 0, 1, 2, 3, 4]; 
 var n_neg = process(nums, negative); 
 // n_neg = [3, 2, 1, 0, -1, -2, -3, -4]; 
 var n_square = process(nums, square); 
 // n_square = [9, 4, 1, 0, 1, 4, 9, 16];
登入後複製

以上程式碼展示了把函數作為參數傳入另一個函數process呼叫的範例,在process函數的實作中,把callback當作一個黑盒子看待,負責把參數傳給它,然後取得返回值,在呼叫之前並不清楚callback的具體實作。只有當執行到20行和22行時,callback才分別代表negative或square,分別對每個元素進行相反值或平方值的運算。

 function generator() { 
   var i = 0; 
   return function() { 
     return i++; 
   }; 
 } 
   
 var gen1 = generator(); // 得到一个自然数生成器 
 var gen2 = generator(); // 得到另一个自然数生成器 
 var r1 = gen1(); // r1 = 0 
 var r2 = gen1(); // r2 = 1 
 var r3 = gen2(); // r3 = 0 
 var r4 = gen2(); // r4 = 1
登入後複製

上面的程式碼展示了把函數當作傳回值的範例,generator是一個自然數產生器函數,而回傳值是一個自然數產生函數。每次呼叫generator時都會把一個匿名函數當作結果傳回,這個匿名函數在被實際呼叫時依序傳回每個自然數。

以上是JavaScript函數進階學習與進階函數實例程式碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板