首頁 > 文章 > web前端 > 在js中函數的傳遞方式是怎麼樣的

在js中函數的傳遞方式是怎麼樣的

不言原創: 2018-07-16 16:02:171842瀏覽

最近學習js的過程中碰到了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(count);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中函數的傳遞方式是怎麼樣的

相關文章