JavaScript函數參數傳遞

Hello,今天和你們分享下JS中的一個基本概念：函數參數傳遞！

 

先來看看一個DEMO

 

 1 var str="hello world";
 2 
 3 function func(s){
 4     s="hello javascript";
 5 }
 6 
 7 
 8 func(str);
 9 
10 console.log(str);

 

請問這裏控制檯最終將輸出什麼？

答案是：hello world.

也就是說func函數並無修改全局做用域中的str值。這個例子比較好理解，JS的函數參數傳遞是按值傳遞，只不過這裏的值是指棧區的值。

這裏函數將str的值傳遞給函數內部變量s，而後修改了內部變量s的值，顯然這和所有做用域中的str並無什麼關係，因此str仍然是初始值。

除非這裏咱們顯示調用並修改全局做用域下的變量：

function func(s){
     window.str="hello javascript";  
}

 這樣全局做用域下的str變量纔會被修改。

 

 

好了，再來看第二個DEMO：

 1 var obj={
 2     attr:'obj attr value'
 3 };
 4 
 5 function func(o){
 6     o.attr="new attr value!";
 7 }
 8 
 9 func(obj);
10 
11 console.log(obj.attr);

這一次咱們將函數傳遞的參數換成了一個對象，輸出結果又是什麼呢？

答案是：new attr value! 也就是說咱們的obj這個所有做用域的對象被修改了，爲何？

緣由仍是第一個DEMO加粗標註的那句話：JS的函數參數傳遞是按值傳遞，只不過這裏的值是指棧區的值。

對於對象來講，傳遞的值是對象在堆區的地址。（關於JS變量存儲原理歡迎查看：http://www.cnblogs.com/souvenir/p/4969399.html）

回到DEMO2，第9行調用func函數傳遞過去就是obj對象的堆區地址，而後這個地址又複製給了func內部做用域的o對象，

也就是說，o與obj都指向了同一個對象，因此修改o屬性的之後，再次訪問obj，固然也發生了變化！

 

 

OK，這個沒有問題之後，咱們再來看另外一個DEMO：

 1 var obj={
 2     attr:'obj attr value'
 3 };
 4 
 5 function func(obj){
 6     obj={attr:'new attr value!'};
 7 }
 8 
 9 func(obj);
10 
11 console.log(obj.attr);

這個DEMO是在第二個DEMO的基礎上進行修改獲得的，在函數內部咱們不是修改obj對象的屬性，而是修改obj整個對象。

可能你們會受到上面第二個DEMO的影響，認爲這裏的所有變量obj仍然被修改了。

答案是，obj並未被修改，輸出的值仍然是：obj attr value。

眼尖的同窗會發現這個DEMO其實和第一個DEMO並無什麼不一樣，只不過一個傳遞的是普通類型，一個傳遞的對象。

對。這裏只是將一個新的對象的引用地址賦值給了obj，可是千萬別忘了，obj這是func的局部變量，和所有變量obj也沒有半毛錢關係。

固然，除非咱們這麼修改的話,狀況就不同了。

function func(obj){
    window.obj={attr:'new attr value!'};
}

 總結：

　　JS的函數參數傳遞是按值傳遞。

　　JS的函數參數傳遞是按值傳遞。

　　JS的函數參數傳遞是按值傳遞。

 

　　（嗯，重要的事情要說三遍）