1. 程式人生 > >js 參數傳遞

js 參數傳遞

定義 值傳遞 div 2個 con boolean 函數參數 描述 console

最近在讀《javascript高級程序設計》時碰到了js傳遞方式的問題,花費了些時間,不過總算明白了。

數據類型

在 javascript 中數據類型可以分為兩類:

  • 基本類型值 primitive type,比如Undefined,Null,Boolean,Number,String。
  • 引用類型值,也就是對象類型 Object type,比如Object,Array,Function,Date等。

變量的復制

眾所周知,js中變量的基本類型和引用類型保存方式是不同的,這也就導致變量復制時也就不同了。如果從一個變量向另一個變量復制基本類型的值時,會將前者的值克隆一個,然後將克隆的值賦值到後者,因此這兩個值是完全獨立的,只是他們的value相同而已。

var num1 = 10;
var num2 = num1;
console.log(num2);//10

上面的num1中被保存的值為10,當把num1的值賦值給num2時,num2的值也為10。但是這兩個10是完全獨立的,num2中的10只是被克隆出來的,相當於我寫了一個word文檔,把它放到了num1的文件夾中,然後我再復制這個word文檔,就叫word副本吧,然後把這個副本放到num2的文件夾下,這兩個word文檔是完全一樣的,修改任何一個都不會影響兩一個。

num2 += 1;
console.log(num1); //10
console.log(num2); //11

從上面可以看出修改num2的值,num1的值未發生變化。再來看下引用類型的復制。當從一個變量向另一個變量復制引用類型的值時,同樣也會將存儲在變量對象中的值復制一份放到為新變量分配的空間中。

技術分享
var obj1 = {
  name : "111"
};
var obj2 = obj1;
console.log(obj2.name); //111
obj2.name = "222";
console.log(obj1.name); //222
技術分享

第一次打印出的結果為“111”,這個我們很容易理解,但是第二次打印出來的是“222”,有點莫名其妙了。這就是引用類型和基本類型的不同之處了。復制對象時並不會在堆內存中新生成一個一模一樣的對象,只是多了一個保存指向這個對象指針的變量罷了。將obj1的值復制給obj2,而這個值的副本實際上是一個指針,這個指針指向存儲在堆中的一個對象,也就是說創建了一個新的內存地址傳給了obj2,obj1和obj2兩個變量同時指向了同一個Object,當去改變這個對象時,他們的值都會改變,也就是說他們中任何一個作出的改變都會反映在另一個身上。下面的簡易圖可能更明了些。

技術分享

函數參數的傳遞

《js高級程序設計》上是這樣敘述參數傳遞的:所有函數的參數都是按值傳遞的,也就是說把函數外部的值復制給函數內部的參數,就和把值從一個變量復制到另一個變量一樣。所以如果能理解變量的復制,那麽參數的傳遞也就很簡單了。還是先從基本類型舉例說明吧。

技術分享
var count = 10;
function num(num1){
   num1 = 1;
return num1; } var result = num(count1); console.log(result);//1
console.log(count);//10,並未變成1
 
技術分享

這個例子很容易理解,實際就是創建了一個count的副本,然後把count的值傳入參數中,因為函數中定義了參數的值,所以1就將10覆蓋了,最後的result返回1,而count並未發生變化。看一個有關傳遞對象的例子。

技術分享
var person  = {
    name : "Tom"
};
function obj(peo){
    peo.name = "Jerry";
return peo; } var result = obj(person);
console.log(result.name);// Jerry console.log(person.name);// Jerry
技術分享

在上面的例子中,把person復制傳入obj()中,peo和person指向了同一個對象,而在peo中修改了name屬性,其實修改了它們共同指向的對象的name屬性,相對應的外部person所引用的name屬性也就改變了,所以打印出來的為Jerry。其實這個乍一看,感覺引用類型的參數是按照引用傳遞的,這就是我最初犯得錯誤。再來看一個例子。

技術分享
var person = {
    name : "Tom"
}; 
function obj(peo){
    peo = {
       name : "Jerry"
    };
    return peo;
}
var result = obj(person);
console.log(result.name);// Jerry
console.log(person.name);// Tom
 
技術分享

上面的例子中,在函數中重新定義了一個對象,也就是現在堆內存中有兩個對象,外部的person指向的是老的對象,被傳入參數後指向的是新定義的對象,所以調用後返回的值是新定義的對象的值。如果是參數是按引用傳遞的,那麽person.name打印出來的結果為Jerry,從這點可以得出參數是按值傳遞的(有的地方叫做按共享傳遞)。

我們拿老羅推薦的《人類簡史》把它形象化,描述的不太好。簡史的第一章標題是“認知革命”,我們把它名字改為“person”根據後面的頁碼數可以直接找到“認知革命”的內容“也就是peoson所指向的對象”,第二章是“農業革命”,我們把它為“result”,其分目錄有一節“記憶過載”(改名為“peo”),同樣可以直接根據頁碼找到這一節內容。現在我們把“person”復制到“peo”中,第二章中的“peo”這一節就變成了“person”,而我們根據第一章中的“peoson”找到的還是第一章的內容,這是因為它們指向了不同的內容板塊,互不幹擾。在這裏,堆內存就是每章的內容,而第一章和第二章內容是2個不同的對象,而這兩者互不相幹,因此打印外部person.name時,結果仍是以前的對象的屬性值。

結論

總而言之,在js中參數都是按值傳遞的。我寫例子粗糙了些,《javascript高級程序設計》中的例子描述的更清晰一些,更易理解。

js 參數傳遞