js的函数的按值传递参数(实例讲解)

  更新时间：2017年11月16日 10:07:30 作者：参与商

  下面小编就为大家分享一篇js的函数的按值传递参数的实例，具有很好的参考价值，一起跟随小编过来看看吧，希望对大家有所帮助

  js的函数传参的方式是按值传递，正常情况下，改变函数参数的值，并不会对函数外部的变量造成影响。例如：

  <pre class="brush:xhtml;">
'use strict';
var list = [1, 2, 3];
list.forEach(function(item) {
item ++;
});
console.log(list); // [ 1, 2, 3 ]</pre>

  这是因为js的函数在接收参数时js的函数，会生成一个副本变量，该副本变量等于参数的值js的函数，可以分析js这样运行的：

  <pre class="brush:xhtml;">
'use strict';
var list = [1, 2, 3];
list.forEach(function(item, i) {
// 第一个item是副本，第二个item是数组元素list[i]
var item = item;
// 副本item++
item ++;
// 打印的是副本的值
console.log(item); // 2, 3, 4
});
// 原数组不会改变
console.log(list); // [ 1, 2, 3 ]</pre>

  但是当函数的参数传递的是一个对象呢？

  <pre class="brush:xhtml;">
'use strict';var list = [{a: 1, b: 2}];
list.forEach(function(item) {
item.a ++;
});
console.log(list); // [ { a: 2, b: 2 } ]
</pre>

  发现函数内部居然改变了函数外部变量的值，那这又是为什么呢？

  我们来分析js是如何运行这段代码的

  <pre class="brush:xhtml;">
'use strict';
var list = [{a: 1, b: 2}];
list.forEach(function(item, i) {
// 第一个item是副本，第二个item是数组元素list[i]
var item = item;
// 此时item和list[i]指向的是同一地址，故两者完全一样
console.log(item === list[i]); // true
// 此时item.a++ 亦即 list[i].a++
item.a ++;
// list[i]的值已经改变
console.log(list[i]); // { a: 2, b: 2 }
});
console.log(list); // [ { a: 2, b: 2 } ]</pre>

  那么为什么会产生这种情况呢？

  由于js中对象属于引用类型，var item = item 这一步相当于把 list[i] 的地址赋值给了item，他们两个指向的都是原对象的地址，所以通过其中的一个去修改值时其实是修改他们指向的那个对象。例子中通过 item.a++ 方法改变了原对象的值，因此最后应该输出 [ { a: 2, b: 2 } ]。

  以上这篇js的函数的按值传递参数(实例讲解)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。