javaScript中按值传递与按引用传递(传递参数如果是object的话，是按值传递还是按引用传递？)

红太狼 2022-10-23 08:09 160阅读 0赞

[javascript传递参数如果是object的话，是按值传递还是按引用传递？][javascript_object]

[Java和Javascript中的值传递与引用传递][Java_Javascript]

[JavaScript函数传参原理详解——值传递还是引用传递][JavaScript]

**javaScript中按值传递与按引用传递(传递参数如果是object的话，是按值传递还是按引用传递？)**

在javaScript中**数据类型**可以分为两类：

**原始数据类型值** primitive type，比如Undefined,Null,Boolean,Number,String。

**引用类型值**，也就是对象类型 Object type,比如Object,Array,Function,Date等。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>javaScript中按值传递与按引用传递</title>
    <script type="text/javascript">
    //javascript传递参数如果是object的话，是按值传递还是按引用传递？
    function setName(obj){
    	obj.name = '令狐冲';
    }
    var person = new Object();
    setName(person);
    console.log(person.name);//令狐冲
    
    //再看下面的代码，有意思的来了(参考这篇文章https://www.zhihu.com/question/27114726)
    function setName2(obj){
    	obj.name = '杨幂';
    	obj = new Object();
    	obj.name = '刘亦菲';
    }
    var person2 = new Object();
    setName2(person2);
    console.log(person2.name); //杨幂
    
    console.log('***********************');
    
    //整数类型
    var a = 666;
    console.log('a=' + a); //a=666
    function fn1(parameter){
    	parameter = 888;
    }
    fn1(a);
    console.log('a=' + a);//a=666
    console.log('***********************');
    
    //浮点类型
    var b = 77.86;
    console.log('b=' + b);//b=77.86
    function fn2(parameter){
    	parameter = 55.42;
    }
    fn2(b);
    console.log('b=' + b);//b=77.86
    console.log('***********************');
    
    //boolean类型
    var c = true;
    console.log('c=' + c);//c=true
    function fn3(parameter){
    	parameter = false;
    }
    fn3(c);
    console.log('c=' + c);//c=true
    console.log('***********************');
    
    //数组类型
    var d = ['韦小宝', '阿珂', '建宁公主', '双儿', '苏荃', '曾柔', '方怡', '沐剑屏'];
    console.log('d=' + d);//d=韦小宝,阿珂,建宁公主,双儿,苏荃,曾柔,方怡,沐剑屏
    function fn4(parameter){
    	parameter.splice(1, 0, '康熙', '鳌拜', '吴三桂');
    }
    fn4(d);
    console.log('d=' + d);//d=韦小宝,康熙,鳌拜,吴三桂,阿珂,建宁公主,双儿,苏荃,曾柔,方怡,沐剑屏
    console.log('***********************');
    
    //Date类型
    var myDate = new Date();
    console.log('myDate=' + myDate);//myDate=Tue Mar 09 2021 16:22:54 GMT+0800 (中国标准时间)
    function fn5(parameter){
    	parameter.setFullYear(2088, 9, 15);
    }
    fn5(myDate);
    console.log('myDate=' + myDate);//myDate=Fri Oct 15 2088 16:22:54 GMT+0800 (中国标准时间)
    console.log('***********************');
    </script>
    </head>
    <body>
    <h2>javaScript中值传递与引用传递</h2>
    </body>
    </html>

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

**落了字符串类型的，补上**

//字符串类型
    var homeTown = '江西省赣州市于都县';
    console.log('homeTown=' + homeTown);//homeTown=江西省赣州市于都县
    function fn6(parameter){
    	parameter = '于都县';
    }
    fn6(homeTown);
    console.log('homeTown=' + homeTown);//homeTown=江西省赣州市于都县
    console.log('***********************');

**运行结果如下：**

![20210309164158652.png][]

**再补充一些其它的案例**

**运行结果如下：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

**其它案例**

var citys = ['于都县', '兴国县', '赣县'];
    var t = citys.slice();
    console.log(t);//Array(3) [ "于都县", "兴国县", "赣县" ]
    var t2 = citys.slice(1);
    console.log(t2);//Array [ "兴国县", "赣县" ]
    var t3 = citys.slice(1, 2);
    console.log(t3);//Array [ "兴国县" ]

**运行结果如下：**

![20210309193621601.png][]

[Java和Javascript中的值传递与引用传递][Java_Javascript]

**按值传递和按引用传递,其它案例**

//值传递
    var a = 2;
    var b = a; // b是a的值的一个副本
    console.log(a);// 2
    console.log(b);// 2
    b++;
    console.log(a);// 2
    console.log(b);// 3

运行结果如下：

![20210309194036828.png][]

//引用传递
    var c = [1,2,3];
    var d = c; // d是[1,2,3]的一个引用,同指一块内存区域
    console.log(c);//Array(3) [ 1, 2, 3 ]
    console.log(d);//Array(3) [ 1, 2, 3 ]
    d.push(4);
    
    console.log(d); // Array(4) [ 1, 2, 3, 4 ]
    console.log(c); // Array(4) [ 1, 2, 3, 4 ] 修改同指的那片内存区域，因此c也跟着变化了
    
    d = [4,5,6];
    console.log(d);//Array(3) [ 4, 5, 6 ]
    //d指向一片新的内存区域[4,5,6],不会改变c的指向,因此c还是[1,2,3,4]
    console.log(c);//Array(4) [ 1, 2, 3, 4 ]

运行结果如下：

![20210309194829904.png][]

//引用副本传递
    	function foo(x) {
    		x.push(4);
    		console.log(x, "******");
    		//然后
    		x.length = 0; // 清空数组
    		x.push(4, 5, 6, 7);
    		console.log(x, "######");
    	}
    
    	var a = [ 1, 2, 3 ];
    	foo(a);
    	console.log(a); // 是[4,5,6,7]，不是[1,2,3,4]
    	a = [ 1, 2, 3, 4 ];
    	foo(a.slice());//a.slice()传入的是a的浅复制副本,因此不会改变a的那块内存区域
    	console.log(a);//还是[1,2,3,4]
    	foo(a);
    	console.log(a);//[4,5,6,7]

运行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

[javascript_object]: https://www.zhihu.com/question/27114726
[Java_Javascript]: https://blog.csdn.net/u010344410/article/details/90746846
[JavaScript]: https://blog.csdn.net/handsomexiaominge/article/details/97306301
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221023/63315a4678bc436389afa884c49a7d07.png
[20210309164158652.png]: /images/20221023/66e5b17a59884bafa085ab0da7306d8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221023/023f18584f714027bb47843f8f4c6de2.png
[20210309193621601.png]: /images/20221023/3a5d0283095e4f59a2ef2052b4c8b3b0.png
[20210309194036828.png]: /images/20221023/763113f1746e4dd5bbc69b1228d91a27.png
[20210309194829904.png]: /images/20221023/e0124fff04064f5b99924bfdfc2b4baa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221023/cd582e52a1354fc5b65d6eb0af611359.png