js函數中參數的傳遞

先看一道JS的筆試題：

var setObj=function(o){
  o.name="xiaoming";
  o={};
  o.name="xiaohong";
}
var p={name:"xixi",age:24};
setObj(p);
console.log(p);

答案是{name:xiaoming,age24}；

在JavaScript中函數參數默認爲引用類型。

 

在閱讀本章節以前建議參閱一下兩章節:
1.值類型能夠參閱javascript的值類型一章節。
2.引用類型能夠參閱javascript的引用類型一章節。
一.函數傳遞值類型:
代碼實例以下:

function addNum(num){ 
　num+=10; 
　return num; 
} 
var num=10; 
var result=addNum(num); 
console.log(num);
console.log(result);

 

以上代碼的彈出值分別爲:10和20，下面進行一下分析:
聲明變量num並複製爲10，這個是num是一個值類型，當爲函數傳遞參數的時候，是將此值複製一份傳遞給函數，因此在函數執行以後，num自己的值並無被改變，函數中被改變的值僅僅是一個副本而已。
二.函數傳遞引用類型:

1 function setName(obj){ 
2   obj.name="青島新銳"; 
3 } 
4 var web=new Object(); 
5 web.name="螞蟻部落";
6 setName(web); 
7 console.log(web.name);

以上代碼的彈出值是:「青島新銳」，下面進行一下分析:
聲明一個對象web，它是一個引用類型，當爲函數傳遞參數的時候，是傳遞的web對象的引用，也就是此對象的內存地址，因此在函數中修改屬性的對象就是函數外面建立的對象自己。
三.加深理解:

1 function setName(obj){ 
2   obj.name="青島新銳"; 
3   obj=new Object(); 
4   obj.name="螞蟻部落"; 
5 } 
6 var web=new Object(); 
7 setName(web); 
8 console.log(web.name);

以上代碼的彈出值是:青島新銳，不少人可能會覺得將會彈出「螞蟻部落」，下面進行一下簡單的分析:
在函數外面建立一個對象，並將對象的引用賦值給變量web，web中存儲的是對象在內存中的存儲地址，當爲函數傳遞參數的，就是傳遞的在函數外面建立的對象的地址。在函數中，爲外面建立的對象建立一個自定義屬性name並賦值爲「青島新銳」，而後又建立一個新的對象，並將新對象的地址賦值給obj，這個時候obj指向的並非函數外面建立的對象，因此外面對象name屬性不會被改變。

這樣寫對於其餘語言的程序員來講是很難接受的，咱們在實際的開發中避免這樣的寫法，由於這樣會形成全局做用域污染。最近在讀《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高級程序設計》中的例子描述的更清晰一些，更易理解。