A detailed introduction to understanding values ​​and references in JavaScript parameter passing

Value and reference are common topics in various programming languages, and js is no exception.

I will analyze the actual running process of an example and share with you my understanding of values ​​and references in js parameter passing.

Refer to the two classifications of data types on the official website. This article refers to these two classifications as basic types (boolean, null, undefined, string, number, symbol) and object types.

First, use an example to demonstrate the application of parameter passing:

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);

It seems that the following two conclusions can be drawn from the results of example 1:

1. The data type passed It is a basic type (number, string boolean, null, undefined, symbol). During the parameter passing process, the operation of the passed value within the function does not affect the original value.

2. The data type passed is object. During the parameter passing process, the operation on the passed value inside the function will cause the original value to change.

However, are there any other special circumstances?

There is a usage that is very hotly discussed on stackoverflow, which goes against conclusion 2. example 2.

 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

In example 2, obj2.item is not changed by the function changeStuff. The values ​​of b and c are also changed internally in changeStuff. Why is obj1 changed (L15) but obj2 not changed?

I use the execution context of js to explain this phenomenon, as shown in the figure.

During the running of js, the editor dynamically generates an execution context (execution context). In example 2, the global execution context and the changeStuff execution context are first generated.

When changeStuff(num, obj1, obj2) is executed, a, b, c point to the parameters num, obj1, obj2, a and num point to 10, b and obj1 point to the same value, and c and obj2 point to same value.

When executing step 1, reassign a to 10 times the value before a was assigned. From now on, a has nothing to do with num.

When executing step 2, reassign the item attribute of the value pointed to by b. This assignment only changes the value of item, while obj1 and b still point to the same value.

When step 3 is executed, c is reassigned. From then on, c has nothing to do with obj2. Therefore, even if c has an attribute called item, it has its own value with the item attribute of obj2, and it does not affect obj2. item.

In other words, during the js function parameter passing process, if the parameters are reassigned inside the function, this assignment process will not affect the value of the original variable.

This also well explains the phenomenon that basic type parameter variables (Conclusion 1) will not be affected. Every change of basic type parameter variables is a new assignment and will not affect the original variables. .

Summary

In js function transfer, when basic type (number, string, boolean, null, undefined, symbol) variables are passed as parameters, the function internal Any operation on the parameters will not change the value of the variable.

When an object type variable is passed as a parameter, the operation on the parameter inside the function will affect the value of the variable, Unless the parameter is reassigned (any type of value) inside the function.

Thank you!

Feel free to contact me if you have any question!

The above is a detailed introduction to the understanding of values ​​and references in JavaScript parameter passing. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!