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的函数参数传递是按值传递。

 

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