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

  (嗯,重要的事情要说三遍)

原文地址:https://www.cnblogs.com/souvenir/p/4969092.html