首页 / JAVASCRIPT / JavaScript参数传递中值和引用的一种理解的代码实例

JavaScript参数传递中值和引用的一种理解的代码实例

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript参数传递中值和引用的一种理解的代码实例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3810字，纯文字阅读大概需要6分钟。

内容图文

值（value）和引用(reference)是各种编程语言老生常谈的话题，js也不例外。

我将剖析一个例子的实际运行过程，跟大家分享我对js参数传递中的值和引用的理解。

参考官网数据类型的两种分类，本文将这两种分类简称为基本类型（boolean, null, undefined, string, number, symbol）和object类型。

首先，用一个example 演示参数传递的应用：

var obj = {};
obj.inner = 10;

var num = 10;
var str = 'Hello';
var boo = true;
var oth = null;
var und = undefined;
var sym = Symbol('foo');

function passingobject(myobj){
    myobj.inner  = 1 + myobj.inner ; 
}

function passingvalue(myvalue){
  switch(typeof myvalue){
    case 'number':
        myvalue = myvalue + 1;
        break;
      case 'string':
        myvalue = 'I am a new string now!';
        break;
      case 'boolean':
        myvalue= false;
        break;
      default:
        myvalue = 'Null, Undefined, or Symbol';
     }
  }

  console.log("before num = " + num);  // before num = 10
  passingvalue(num);
  console.log("after num = " + num);  // after num = 10
  console.log("before str = " + str); // before str = Hello
  passingvalue(str);
  console.log("after str = " + str);  // after str = Hello
  console.log("before boo = " + boo); // before boo = true
  passingvalue(boo);
  console.log("after boo = " + boo);  // after boo = false
  console.log("before oth = " + oth); // before oth = null
  passingvalue(oth);
  console.log("after oth = " + oth);  // after oth = null
  console.log("before und = " + und); // before und = undefined
  passingvalue(und);
  console.log("after und = " + und);  // after und = undefined
  console.log(sym); // Symbol(foo)
  passingvalue(sym);
  console.log(sym); // Symbol(foo)
  console.log("before obj.inner = " + obj.inner); // before obj.inner = 10
  passingobject(obj); // after obj.inner = 11
  console.log("after obj.inner = " + obj.inner);

从example 1 的结果似乎可以总结出以下两条结论：

1. 传递的数据类型为基本类型（number, string boolean, null, undefined, symbol），在参数传递过程中，函数内部对传递值的操作并不影响原始值。

2. 传递的数据类型为object， 在参数传递过程中，函数内部对传递值的操作会导致原始值的改变。

然而， 有没有其他特殊情况呢？

有一种在stackoverflow讨论很火热的用法，跟结论二背道而行。example 2。

例子引自：http://www.gxlcms.com/

 1 function changeStuff(a, b, c)
 2 {
 3   a = a * 10;
 4   b.item = "changed";
 5   c = {item: "changed"};
 6 }
 7 
 8 var num = 10;
 9 var obj1 = {item: "unchanged"};
10 var obj2 = {item: "unchanged"};
11 
12 console.log(obj1.item); // unchanged
13 console.log(obj2.item); // unchanged
14 changeStuff(num, obj1, obj2);
15 console.log(obj1.item); // changed
16 console.log(obj2.item); // unchanged

example 2中， obj2.item并没有被函数changeStuff改变。changeStuff内部同样改变了b、c的值，为什么obj1被改变了(L15)而obj2没有被改变呢？

我用js的执行上下文对这种现象进行解释，如图。

JavaScript参数传递中值和引用的一种理解的代码实例 - 文章图片

在js运行过程中，编辑器动态生成执行上下文（execution context），example 2中，首先生成global的执行上下文和changeStuff的执行上下文。

执行到changeStuff(num, obj1, obj2)的时候， a, b, c指向参数num, obj1, obj2，a和num指向10， b跟obj1指向同一个值，c跟obj2指向同一个值。

执行step 1的时候，对a重新赋值，为a赋值前的10倍，从此a与num毫无关系。

执行step 2的时候，对b所指向的值的item属性进行重新赋值，这个赋值只改变了item的值， 而obj1和b仍然指向同一个值。

执行step 3的时候，对c重新赋值，从此c与obj2再无瓜葛，因此即使c有一个叫item的属性，与obj2的item属性有着各自的值，并没有影响obj2.item。

也就是说，js函数参数传递过程中，若函数内部对参数重新赋值，这个赋值过程不会影响原始变量的值。

这也很好地解释了基本类型的参数变量（结论1）不会受影响的现象，基本类型的参数变量每一次改变都是一次全新赋值，对原始变量不会造成影响。

总结

在js函数传递中，当基本类型（number, string, boolean, null, undefined, symbol）变量作为参数传递时，函数内部对参数的任何操作都不会改变变量的值。

当object类型变量作为参数传递时，函数内部对参数的操作会影响变量的值，除非函数内部对参数重新赋值（任何类型的值）。

Thank you!

Feel free to contact me if you have any question!

以上就是JavaScript参数传递中值和引用的一种理解的代码实例的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

内容总结

以上是互联网集市为您收集整理的JavaScript参数传递中值和引用的一种理解的代码实例全部内容，希望文章能够帮你解决JavaScript参数传递中值和引用的一种理解的代码实例所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/302372.html

来源：【匿名】