DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 深入理解javascript函數參數與閉包
深入理解javascript函數參數與閉包
編輯:關於JavaScript     

最近在學習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:參數是什麼

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

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

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

1.2:參數的省略

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

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

上面代碼中,keith函數定義了三個參數,但是在調用時無論傳遞了多少個參數,javascript都不會報錯。被省略的參數的默認值就變為undefined。了解函數定義與函數作用域 的都知道,函數的length屬性會返回參數個數。需要注意的是,length屬性與實際參數的個數無關,只是返回形式參數的個數。

(實際參數:調用時傳遞的參數。     形式參數:定義時傳遞的參數。)

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

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

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

1.3:默認值

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

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

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

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

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

1.4:參數傳遞方式

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

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

 var a = 1;
 function keith(num) {
 num = 5;
 }
 keith(a);
 console.log(a); //1

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

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

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

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

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

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

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

1.5:同名參數

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

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

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

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

1.6 arguments對象

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

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

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

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

arguments對象與數組的關系

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

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

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

2.閉包

2.1:閉包定義

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

var a = 1;
function keith() {
 return a;
 var b = 2;
 }
 console.log(keith()); //1
 console.log(b); //ReferenceError: b is not defined

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

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

 function keith(){
 var a=1;
 function rascal(){
 return a;
 }
 return rascal;
 }
 var result=keith();
 console.log(result()); //1
 function keith(){
 var a=1;
 return function(){
 return a;
 };
 }
 var result=keith();
 console.log(result()) //1

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

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

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

 function keith(num) {
 return function() {
 return num++;
 };
 }
 var result = keith(2);
 console.log(result()) //2
 console.log(result()) //3
 console.log(result()) //4

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

通過以上的例子,總結一下閉包的特點:

1:在一個函數內部定義另外一個函數,並且返回內部函數或者立即執行內部函數。

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

3:讓局部變量始終保存在內存中。也就是說,閉包可以使得它誕生環境一直存在。

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

 function Keith(name) {
 var age;
 function setAge(n) {
 age = n;
 }
 function getAge() {
 return age;
 }
 return {
 name: name,
 setAge: setAge,
 getAge: getAge
 };
 }
 var person = Keith('keith');
 person.setAge(21);
 console.log(person.name); // 'keith'
 console.log(person.getAge()); //21

2.2:立即調用的函數表達式(IIFE)

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

循環中的閉包

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

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

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

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

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

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

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

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved