先看一道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中函數(shù)參數(shù)默認(rèn)為引用類(lèi)型。

一.函數(shù)傳遞值類(lèi)型:

代碼實(shí)例如下:

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

以上代碼的彈出值分別為:10和20，下面進(jìn)行一下分析:

聲明變量num并復(fù)制為10，這個(gè)是num是一個(gè)值類(lèi)型，當(dāng)為函數(shù)傳遞參數(shù)的時(shí)候，是將此值復(fù)制一份傳遞給函數(shù)，所以在函數(shù)執(zhí)行之后，num本身的值并沒(méi)有被改變，函數(shù)中被改變的值僅僅是一個(gè)副本而已。

二.函數(shù)傳遞引用類(lèi)型:

 function setName(obj){ 
obj.name="青島新銳"; 
} 
var web=new Object(); 
web.name="螞蟻部落";
 setName(web); 
console.log(web.name);

以上代碼的彈出值是:“青島新銳”，下面進(jìn)行一下分析:

聲明一個(gè)對(duì)象web，它是一個(gè)引用類(lèi)型，當(dāng)為函數(shù)傳遞參數(shù)的時(shí)候，是傳遞的web對(duì)象的引用，也就是此對(duì)象的內(nèi)存地址，所以在函數(shù)中修改屬性的對(duì)象就是函數(shù)外面創(chuàng)建的對(duì)象本身。

三.加深理解:

function setName(obj){ 
 obj.name="青島新銳"; 
 obj=new Object(); 
 obj.name="螞蟻部落"; 
 } 
 var web=new Object(); 
setName(web); 
console.log(web.name);

以上代碼的彈出值是:青島新銳，很多人可能會(huì)以為將會(huì)彈出“螞蟻部落”，下面進(jìn)行一下簡(jiǎn)單的分析:

在函數(shù)外面創(chuàng)建一個(gè)對(duì)象，并將對(duì)象的引用賦值給變量web，web中存儲(chǔ)的是對(duì)象在內(nèi)存中的存儲(chǔ)地址，當(dāng)為函數(shù)傳遞參數(shù)的，就是傳遞的在函數(shù)外面創(chuàng)建的對(duì)象的地址。在函數(shù)中，為外面創(chuàng)建的對(duì)象創(chuàng)建一個(gè)自定義屬性name并賦值為“青島新銳”，然后又創(chuàng)建一個(gè)新的對(duì)象，并將新對(duì)象的地址賦值給obj，這個(gè)時(shí)候obj指向的并不是函數(shù)外面創(chuàng)建的對(duì)象，所以外面對(duì)象name屬性不會(huì)被改變。

這樣寫(xiě)對(duì)于其他語(yǔ)言的程序員來(lái)說(shuō)是很難接受的，我們?cè)趯?shí)際的開(kāi)發(fā)中避免這樣的寫(xiě)法，因?yàn)檫@樣會(huì)造成全局作用域污染。最近在讀《javascript高級(jí)程序設(shè)計(jì)》時(shí)碰到了js傳遞方式的問(wèn)題，花費(fèi)了些時(shí)間，不過(guò)總算明白了。

數(shù)據(jù)類(lèi)型

在 javascript 中數(shù)據(jù)類(lèi)型可以分為兩類(lèi)：

• 基本類(lèi)型值 primitive type，比如Undefined,Null,Boolean,Number,String。
• 引用類(lèi)型值，也就是對(duì)象類(lèi)型 Object type,比如Object,Array,Function,Date等。

變量的復(fù)制

眾所周知，js中變量的基本類(lèi)型和引用類(lèi)型保存方式是不同的，這也就導(dǎo)致變量復(fù)制時(shí)也就不同了。如果從一個(gè)變量向另一個(gè)變量復(fù)制基本類(lèi)型的值時(shí)，會(huì)將前者的值克隆一個(gè)，然后將克隆的值賦值到后者，因此這兩個(gè)值是完全獨(dú)立的，只是他們的value相同而已。

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

上面的num1中被保存的值為10，當(dāng)把num1的值賦值給num2時(shí)，num2的值也為10。但是這兩個(gè)10是完全獨(dú)立的，num2中的10只是被克隆出來(lái)的，相當(dāng)于我寫(xiě)了一個(gè)word文檔，把它放到了num1的文件夾中，然后我再?gòu)?fù)制這個(gè)word文檔，就叫word副本吧，然后把這個(gè)副本放到num2的文件夾下，這兩個(gè)word文檔是完全一樣的，修改任何一個(gè)都不會(huì)影響兩一個(gè)。

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

從上面可以看出修改num2的值，num1的值未發(fā)生變化。再來(lái)看下引用類(lèi)型的復(fù)制。當(dāng)從一個(gè)變量向另一個(gè)變量復(fù)制引用類(lèi)型的值時(shí)，同樣也會(huì)將存儲(chǔ)在變量對(duì)象中的值復(fù)制一份放到為新變量分配的空間中。

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

第一次打印出的結(jié)果為“111”，這個(gè)我們很容易理解，但是第二次打印出來(lái)的是“222”，有點(diǎn)莫名其妙了。這就是引用類(lèi)型和基本類(lèi)型的不同之處了。復(fù)制對(duì)象時(shí)并不會(huì)在堆內(nèi)存中新生成一個(gè)一模一樣的對(duì)象，只是多了一個(gè)保存指向這個(gè)對(duì)象指針的變量罷了。將obj1的值復(fù)制給obj2，而這個(gè)值的副本實(shí)際上是一個(gè)指針，這個(gè)指針指向存儲(chǔ)在堆中的一個(gè)對(duì)象，也就是說(shuō)創(chuàng)建了一個(gè)新的內(nèi)存地址傳給了obj2，obj1和obj2兩個(gè)變量同時(shí)指向了同一個(gè)Object，當(dāng)去改變這個(gè)對(duì)象時(shí)，他們的值都會(huì)改變，也就是說(shuō)他們中任何一個(gè)作出的改變都會(huì)反映在另一個(gè)身上。下面的簡(jiǎn)易圖可能更明了些。

函數(shù)參數(shù)的傳遞

《js高級(jí)程序設(shè)計(jì)》上是這樣敘述參數(shù)傳遞的：所有函數(shù)的參數(shù)都是按值傳遞的,也就是說(shuō)把函數(shù)外部的值復(fù)制給函數(shù)內(nèi)部的參數(shù)，就和把值從一個(gè)變量復(fù)制到另一個(gè)變量一樣。所以如果能理解變量的復(fù)制，那么參數(shù)的傳遞也就很簡(jiǎn)單了。還是先從基本類(lèi)型舉例說(shuō)明吧。

var count = 10;
function num(num1){
num1 = 1;
return num1;
}
var result = num(count1);
console.log(result);//1
console.log(count);//10，并未變成1

這個(gè)例子很容易理解，實(shí)際就是創(chuàng)建了一個(gè)count的副本，然后把count的值傳入?yún)?shù)中，因?yàn)楹瘮?shù)中定義了參數(shù)的值，所以1就將10覆蓋了，最后的result返回1，而count并未發(fā)生變化?？匆粋€(gè)有關(guān)傳遞對(duì)象的例子。

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復(fù)制傳入obj()中，peo和person指向了同一個(gè)對(duì)象，而在peo中修改了name屬性，其實(shí)修改了它們共同指向的對(duì)象的name屬性，相對(duì)應(yīng)的外部person所引用的name屬性也就改變了，所以打印出來(lái)的為Jerry。其實(shí)這個(gè)乍一看，感覺(jué)引用類(lèi)型的參數(shù)是按照引用傳遞的，這就是我最初犯得錯(cuò)誤。再來(lái)看一個(gè)例子。

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

上面的例子中，在函數(shù)中重新定義了一個(gè)對(duì)象，也就是現(xiàn)在堆內(nèi)存中有兩個(gè)對(duì)象，外部的person指向的是老的對(duì)象，被傳入?yún)?shù)后指向的是新定義的對(duì)象，所以調(diào)用后返回的值是新定義的對(duì)象的值。如果是參數(shù)是按引用傳遞的，那么person.name打印出來(lái)的結(jié)果為Jerry，從這點(diǎn)可以得出參數(shù)是按值傳遞的（有的地方叫做按共享傳遞）。

我們拿老羅推薦的《人類(lèi)簡(jiǎn)史》把它形象化，描述的不太好。簡(jiǎn)史的第一章標(biāo)題是“認(rèn)知革命”，我們把它名字改為“person”根據(jù)后面的頁(yè)碼數(shù)可以直接找到“認(rèn)知革命”的內(nèi)容“也就是peoson所指向的對(duì)象”，第二章是“農(nóng)業(yè)革命”，我們把它為“result”，其分目錄有一節(jié)“記憶過(guò)載”（改名為“peo”），同樣可以直接根據(jù)頁(yè)碼找到這一節(jié)內(nèi)容。

現(xiàn)在我們把“person”復(fù)制到“peo”中，第二章中的“peo”這一節(jié)就變成了“person”，而我們根據(jù)第一章中的“peoson”找到的還是第一章的內(nèi)容，這是因?yàn)樗鼈冎赶蛄瞬煌膬?nèi)容板塊，互不干擾。在這里，堆內(nèi)存就是每章的內(nèi)容，而第一章和第二章內(nèi)容是2個(gè)不同的對(duì)象，而這兩者互不相干，因此打印外部person.name時(shí)，結(jié)果仍是以前的對(duì)象的屬性值。

結(jié)論

總而言之，在js中參數(shù)都是按值傳遞的。我寫(xiě)例子粗糙了些，《javascript高級(jí)程序設(shè)計(jì)》中的例子描述的更清晰一些，更易理解。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論