javascript--函數參數與閉包--詳解

来源:http://www.cnblogs.com/Uncle-Keith/archive/2016/08/21/5792485.html
-Advertisement-
Play Games

在看此課程的讀者，希望先閱讀關於函數基礎內容 函數定義與函數作用域 的章節，因為此課程或多或少會涉及函數基礎的內容，而基礎內容，本人放在 函數定義函數作用域 章節。 本文直接贅述函數參數與閉包，若涉及相關知識，為了節省篇章，會以相關字眼帶過。 最近在學習javascript的函數，函數是javasc ...


 

在看此課程的讀者，希望先閱讀關於函數基礎內容 函數定義與函數作用域 的章節，因為此課程或多或少會涉及函數基礎的內容，而基礎內容，本人放在 函數定義函數作用域 章節。

本文直接贅述函數參數與閉包，若涉及相關知識，為了節省篇章，會以相關字眼帶過。

 

最近在學習javascript的函數，函數是javascript的一等對象，想要學好javascript，就必須深刻理解函數。本人把學習的過程整理成文章，一是為了加深自己函數的理解，二是給讀者提供學習的途徑，避免走彎路。內容有些多，但都是筆者對於函數的總結。

 

1.函數參數

　　1.1：參數是什麼

　　1.2：參數的省略

　　1.3：參數預設值

　　1.4：參數傳遞方式

　　1.5：同名參數

　　1.6：arguments對象

2.閉包

　　2.1：閉包定義

　　2.2：立即調用的函數表達式（IIFE, Immediately invoked function expression）

 

 

 

1.函數參數

　　1.1：參數是什麼

　　在定義一個函數時，有時候需要為函數傳遞額外的數據，不同的外部數據會得到不同的結果，這種外部數據就叫做參數。

1     function keith(a){
2         return a+a;
3     }
4     console.log(keith(3));  //6

　　上面代碼中，給keith函數傳遞了參數a，並且返回了a+a表達式。

　　

　　1.2：參數的省略

　　函數參數不是必須的，javascript規範允許省略調用時傳遞的實際參數。

1     function keith(a, b, c) {
2         return a;
3     }
4     console.log(keith(1, 2, 3)); //1
5     console.log(keith(1)); //1
6     console.log(keith()); // 'undefined'

　　上面代碼中，keith函數定義了三個參數，但是在調用時無論傳遞了多少個參數，javascript都不會報錯。被省略的參數的預設值就變為undefined。在 函數定義與函數作用域 的博文中提到，函數的length屬性會返回參數個數。需要註意的是，length屬性與實際參數的個數無關，只是返回形式參數的個數。

　　（實際參數：調用時傳遞的參數。     形式參數：定義時傳遞的參數。）

　　但是沒有辦法省略只靠前的元素，而保留靠後的元素。如果一定要省略靠前的元素，只有顯示傳入undefined。

1     function keith(a, b) {
2         return a;
3     }
4     console.log(keith(, 1)); //SyntaxError: expected expression, got ','
5     console.log(keith(undefined, 2)); //'undefined'

　　上面代碼中，如果省略了第一個參數，瀏覽器就會報錯。如果給第一個參數傳遞undefined，則不會報錯。

 

　　1.3：預設值

　　在JavaScript中，函數參數的預設值是undefined。然而，在某些情況下設置不同的預設值是有用的。一般策略是在函數的主體測試參數值是否為undefined，如果是則賦予一個值，如果不是，則返回實際參數傳遞的值。

1     function keith(a, b) {
2         (typeof b !== 'undefined') ? b = b: b = 1;
3         return a * b;
4     }
5     console.log(keith(15)); //15
6     console.log(keith(15, 2)) //30

　　上面代碼中，做了個判斷。當在調用時沒有傳入b參數，則預設為1。

　　從ECMAScript 6開始，定義了預設參數(default parameters)。使用預設參數，在函數體的檢查就不再需要了。

1     function keith(a, b = 1) {
2         return a * b;
3     }
4     console.log(keith(15)); //15
5     console.log(keith(15, 2)) //30

　　

　　1.4：參數傳遞方式

　　函數參數的傳遞方式有兩種，一個是傳值傳遞，一個是傳址傳遞。

　　當函數參數是原始數據類型時（字元串，數值，布爾值），參數的傳遞方式為傳值傳遞。也就是說，在函數體內修改參數值，不會影響到函數外部。

1     var a = 1;
2 
3     function keith(num) {
4         num = 5;
5     }
6     keith(a);
7     console.log(a); //1

　　上面代碼中，全局變數a是一個原始類型的值，傳入函數keith的方式是傳值傳遞。因此，在函數內部，a的值是原始值的拷貝，無論怎麼修改，都不會影響到原始值。

　　但是，如果函數參數是複合類型的值（數組、對象、其他函數），傳遞方式是傳址傳遞（pass by reference）。也就是說，傳入函數的是原始值的地址，因此在函數內部修改參數，將會影響到原始值。

1     var arr = [2, 5];
2 
3     function keith(Arr) {
4         Arr[0] = 3;
5     }
6     keith(arr);
7     console.log(arr[0]); //3

　　上面代碼中，傳入函數keith的是參數對象arr的地址。因此，在函數內部修改arr第一個值，會影響到原始值。

　　註意，如果函數內部修改的，不是參數對象的某個屬性，而是替換掉整個參數，這時不會影響到原始值。

1     var arr = [2, 3, 5];
2 
3     function keith(Arr) {
4         Arr = [1, 2, 3];
5     }
6     keith(arr);
7     console.log(arr); // [2,3,5]

　　上面代碼中，在函數keith內部，參數對象arr被整個替換成另一個值。這時不會影響到原始值。這是因為，形式參數（Arr）與實際參數arr存在一個賦值關係。

　　參數的傳遞方式在 Javascript的重要數據類型-對象 也有談及。

 

　　1.5：同名參數

　　如果有同名參數，則去最後面出現的那個值，如果未提供最後一個參數的值，則取值變成undefined。

1     function keith(a, a) {
2         return a;
3     }
4 
5     console.log(keith(1, 3)); //3
6     console.log(keith(1)); //undefined

　　如果想訪問同名參數中的第一個參數，則使用arguments對象。

1     function keith(a, a) {
2         return arguments[0];
3     }
4 
5     console.log(keith(2));　　//2

 

　　1.6 arguments對象

　　JavaScript 中每個函數內都能訪問一個特別變數 arguments。這個變數維護著所有傳遞到這個函數中的參數列表。

　　arguments 對象包含了函數運行時的所有參數，arguments[0]就是第一個參數，arguments[1]就是第二個參數，以此類推。這個對象只有在函數體內部，才可以使用。

　　可以訪問arguments對象的length屬性，判斷函數調用時到底帶幾個參數。

1     function keith(a, b, c) {
2         console.log(arguments[0]); //1
3         console.log(arguments[2]); //3
4         console.log(arguments.length); //4
5     }
6 
7     keith(1, 2, 3, 4);

 

　　arguments對象與數組的關係

　　arguments 對象不是一個數組（Array）。 儘管在語法上它有數組相關的屬性 length，但它不從 Array.prototype 繼承，實際上它是一個類數組對象。因此，無法對 arguments 變數使用標準的數組方法，比如 push, pop 或者 slice。但是可以使用數組中的length屬性。

　　通常使用如下方法把arguments對象轉換為數組。

1     var arr = Array.prototype.slice.call(arguments);

 

2.閉包

　　2.1：閉包定義

　　要理解閉包，需要先理解 全局作用域和局部作用域 的區別。函數內部可以訪問全局作用域下定義的全局變數，而函數外部卻無法訪問到函數內部定義(局部作用域)的局部變數。

1     var a = 1;
2 
3     function keith() {
4         return a;
5         var b = 2;
6     }
7     console.log(keith()); //1
8     console.log(b); //ReferenceError: b is not defined

　　上面代碼中，全局變數a可以在函數keith內部訪問。可是局部變數b卻無法在函數外部訪問。

　　如果需要得到函數內部的局部變數，只有通過在函數的內部，再定義一個函數。

 1     function keith(){
 2         var a=1;
 3         function rascal(){
 4             return a;
 5         }
 6         return rascal;
 7     }
 8     var result=keith();
 9     console.log(result());    //1
10 
11     function keith(){
12         var a=1;
13         return function(){
14             return a;
15         };
16     }
17     var result=keith();
18     console.log(result())    //1

　　上面代碼中，兩種寫法相同，唯一的區別是內部函數是否是匿名函數。函數rascal就在函數keith內部，這時keith內部的所有局部變數，對rascal都是可見的。但是反過來就不行，rascal內部的局部變數，對keith就是不可見的。這就是JavaScript語言特有的”鏈式作用域”結構（chain scope），子對象會一級一級地向上尋找所有父對象的變數。所以，父對象的所有變數，對子對象都是可見的，反之則不成立。函數keith的返回值就是函數rascal，由於rascal可以讀取keith的內部變數，所以就可以在外部獲得keith的內部變數了。

　　閉包就是函數rascal，即能夠讀取其他函數內部變數的函數。由於在JavaScript語言中，只有函數內部的子函數才能讀取內部變數，因此可以把閉包簡單理解成“定義在一個函數內部的函數”。閉包最大的特點，就是它可以“記住”誕生的環境，比如rascal記住了它誕生的環境keith，所以從rascal可以得到keith的內部變數。

　　閉包可以使得它誕生環境一直存在。看下麵一個例子，閉包使得內部變數記住上一次調用時的運算結果。

1     function keith(num) {
2         return function() {
3             return num++;
4         };
5     }
6     var result = keith(2);
7     console.log(result()) //2
8     console.log(result()) //3
9     console.log(result()) //4

　　上面代碼中，參數num其實就相當於函數keith內部定義的局部變數。通過閉包，num的狀態被保留了，每一次調用都是在上一次調用的基礎上進行計算。從中可以看到，閉包result使得函數keith的內部環境，一直存在。

　　通過以上的例子，總結一下閉包的特點：

　　1：在一個函數內部定義另外一個函數，並且返回這個內部函數。

　　2：內部函數可以讀取外部函數定義的局部變數

　　3：讓局部變數始終保存在記憶體中。也就是說，閉包可以使得它誕生環境一直存在。

　　閉包的另一個用處，是封裝對象的私有屬性和私有方法。

 1     function Keith(name) {
 2         var age;
 3         function setAge(n) {
 4             age = n;
 5         }
 6         function getAge() {
 7             return age;
 8         }
 9         return {
10             name: name,
11             setAge: setAge,
12             getAge: getAge
13         };
14     }
15     var person = Keith('keith');
16     person.setAge(21);
17     console.log(person.name); // 'keith'
18     console.log(person.getAge()); //21

　　

　　2.2：立即調用的函數表達式（IIFE）

　　通常情況下，只對匿名函數使用這種“立即執行的函數表達式”。它的目的有兩個：一是不必為函數命名，避免了污染全局變數；二是IIFE內部形成了一個單獨的作用域，可以封裝一些外部無法讀取的私有變數。

　　迴圈中的閉包

　　一個常見的錯誤出現在迴圈中使用閉包，假設我們需要在每次迴圈中調用迴圈序號

1     for(var i=0;i<10;i++){
2         setTimeout(function(){
3             console.log(i);    //10
4         }, 1000)
5     }

　　上面代碼中，不會符合我們的預期，輸出數字0-9。而是會輸出數字10十次。

　　當匿名函數被調用的時候，匿名函數保持著對全局變數 i 的引用，也就是說會記住i迴圈時執行的結果。此時for迴圈結束，i 的值被修改成了10。

　　為了得到想要的效果，避免引用錯誤，我們應該使用IIFE來在每次迴圈中創建全局變數 i 的拷貝。

1 for(var i = 0; i < 10; i++) {
2     (function(e) {
3         setTimeout(function() {
4             console.log(e);      //1,2,3,....,10
5         }, 1000);
6     })(i);
7 }

　　外部的匿名函數會立即執行，並把 i 作為它的參數，此時函數內 e 變數就擁有了 i 的一個拷貝。當傳遞給 setTimeout 的匿名函數執行時，它就擁有了對 e 的引用，而這個值是不會被迴圈改變的。

 

 

 

 

 

完。

 

感謝大家的閱讀。

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery fsBanner 手風琴
    fsbanner是一款自定義功能豐富的響應式網站Banner手風琴特效jQuery插件。該手風琴特效相容性很好，支持點擊和滑鼠滑過等觸發事件，並且可添加標題或描述。 線上實例 使用方法 複製 複製 參數詳解 下載 ...
  • node.js xtemplate的使用實例
    工程下安裝XTemplate並使用它的方法實例說明： 1.安裝xtpl npm install xtpl xtemplate --save 2.在views目錄添加test.xtpl文件，其內容為 this is {{title}}! 4.集成到Express中，只需要在app.js中，設置模板引擎 ...
  • 針對JS經典題型對全局變數及局部變數的理解淺談
    第一次寫博，還蠻激動。。。 看到了三題經典題型，經老師講解後，對此類題目有了更深刻的認識 就我目前的認識對此題進行總結。如有錯誤，敬請指正 首先，我們先明確一下JS引擎的工作步驟： js引擎工作分為兩步： 1.將這個js中的變數和函數聲明保存到當前（註意，是當前）執行環境的變數對象中 2.再逐行解析 ...
  • JavaScript學習筆記5 之 計時器 & scroll、offset、client系列屬性 & 圖片無縫滾動
    一、計時器 setInterval ( 函數/名稱 , 毫秒數 )表示每經過一定的毫秒後，執行一次相應的函數(重覆) setTimeout ( 函數/名稱 , 毫秒數 ) 表示經過一定的毫秒後，只執行一次相應的函數(不重覆) 清除計時器： clearInterval( ); clearTimeout ...
  • Google地圖開發總結
    我們經常使用地圖查位置、看公交、看街景，同時地圖還開放第三方的API給開發者。利用這些API進行地圖的個性化的展示和控制，例如北京被水淹了，開發一個網頁顯示北京被淹的地圖，地圖上面標誌被水淹的位置、嚴重程度，或者我是交警，想要在地圖上標誌發生車禍、被交通管制的路段，甚至是利用地圖的街景，控制街景的位 ...
  • js類型轉換
    1、js中有六種基本類型，分別是object、number、string、Boolean、null、undefined，其中number、string、Boolean為基本類型，有時使用會強制轉換成對象，如：var s="cc";s.length;強制轉換成對象是臨時對象，設置後，會被銷毀掉，比如： ...
  • JavaScript學習筆記4之 ByClass&json
    一、通過class獲取標簽 var out=document.getElementsByClassName(‘out’);IE 6 7 8 不支持 getElementsName 是否有辦法既能通過class獲取標簽又沒有相容問題 ？ 首先獲取全部的標簽， 用for迴圈遍歷到所有類名相同的標簽， 遍 ...
  • node.js express安裝及示例網站搭建
    1.首先肯定是要安裝Node.JS windows cmd依次輸入如下命令： cd C:\Program Files\nodejs\ npm install -g expressnpm install -g express-generator 2.創建一個示例工程 windows cmd依次輸入如下 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類