"JavaScript Advanced Programming" - function parameters are passed by value

Confuse

In "Javascript Advanced Programming", I saw the section 4.1.3 Passing parameters in Chapter 4. After reading it, I have some doubts. There is a sentence in the original book that says:

All function parameters in ECMAScript are passed by value.

This sentence made me think for a few days. What is this value? Because we know there are 按值传递and 按引用传递these two ways.

review knowledge

There are 5 basic data types in JavaScript: Undefined, Null, String, Boolean, Number.

When we assign these five basic types to variables, we actually open up a memory space in the stack memory for storing variables, such as the following code:

var a = 5;

In fact, as shown in the figure below:

When copying the value of a basic type from one variable to another variable, it actually re-opens a memory space in the stack memory, and copies the value of the original variable to the stack memory location allocated by the new variable.

If you copy a value of a primitive type from one variable to another, a new value is created on the variable object and then copied to the location allocated for the new variable.
—— "JavaScript Advanced Programming"

When you change the value of the copied variable, it will not affect the value of the copied variable. Not much to say, I still come to a piece of code and draw a picture to make it clearer~~~~

var a = 5;
var b = a;
b = 886;
console.log(a);      // a还是5

Not much to say, here is the picture again:

So he will not change the value of the copied variable a.

But what about reference types Object?

First of all, let's take a look at what will happen when assigning a variable as an object type.

var a = {
    
    
	name: "小可爱"
};

It actually does the following:

Values ​​of reference types are objects held in memory. Values ​​of referenced types are accessed by reference.
—— "JavaScript Advanced Programming"

In other words, what does it mean? That is to say, our reference type actually opens up a piece of memory space in the heap memory, and the size of this piece of memory is uncertain. When we declare a variable, we actually open up a memory space in the stack memory. The size of this memory is determined. When we assign the value of the reference type to the variable, we actually use one (that is, 引用the An arrow), pointing the variable in the stack memory to the memory space of the opened object in the heap memory.

When we assign a variable whose value is a reference type to another variable and change the value of another variable, what happens to the original variable?

The answer is that both will change! ! ! Not much to say, the code:

var obj = new Object();
var newObj = obj;
obj.name = "不可爱";
console.log(newObj.name);     // 当然是不可爱啦！！！！

As shown below:

As can be seen from the figure above, the two variables in the stack memory point to the same memory space in the heap memory, so when we change the attribute value of the object stored in one variable, it will also be reflected in the other object.

Function parameters are passed by value

First mentioned in the Red Book:

When passing a value of a primitive type to a parameter, the passed value is copied to a local variable (named parameter, or in ECMAScript terms, an element of the arguments object). When passing a value of reference type to a parameter, the address of this value in memory is copied to a local variable, so changes in this local variable will be reflected outside the function.

? ? ? ? I read this sentence several times before I understood its meaning.
It is important to understand this sentence understand this sentence understand this sentence:

Think of ECMAScript function parameters as local variables! ! ! ! ! !

Code to explain:

This is the case when passing a value of a primitive type to a parameter :

function add(num) {
    
    
	num = num + 10;
	return num;
}
var a = 10;
var result = add(a);
console.log('a没进函数add之前的值为:' + a); // 10
console.log('a进了函数add之前的值为:' + result)；// 20

Here, according to the above basic knowledge, we can understand that the parameter num of the add() function here is actually a local variable of this function (!!!! Highlight!!!), when calling this function, it actually uses a as a parameter passed to the function add(). Because the value of the variable a is 10, the value 10 is assigned to the parameter num of the add() function (in fact, it is equivalent to opening up a new memory in the stack memory to store the local variable num and its value 20 , has nothing to do with the original variable a). Inside the function add(), the value of the parameter num + 10 has nothing to do with the global variable a outside.

This is easy to understand, but what about the case of replacing it with a reference type ?

Above code:

function reset(obj) {
    
    
	obj.name = "超级可爱";
}
var person = new Object();
reset(person);
console.log(person.name); // 超级可爱

In this code, we create an object and save it in the variable person. This variable is passed to the reset() function and copied to the formal parameter obj (equivalent to copying the reference, yes, it is the arrow), so obj and person refer to the same object in the heap memory inside the function!

Not much to say, here is the picture again:

Seeing this, isn't it a bit blind again? Wouldn't it be better to interpret it as passing by reference?

Look at another piece of code:

function reset(obj) {
    
    
	obj.name = "超级可爱";
	obj = new Object();
	obj.name = "不可爱";
} 
var person = new Object();
reset(person);
conosle.log(person.name); // 超级可爱

See here, if person is passed by reference, then changing the attribute name of the formal parameter obj will also be reflected in the person variable, but in fact there is no, why? Above:

In the figure above, inside the function, the formal parameter obj actually points the reference to a new heap memory, so when we change the value of the name attribute of the new obj, there is no reference to the heap memory object pointed to by the person variable. affected.
If the parameters of the function are passed by reference, then the pointing of the person variable will also point to the object whose property name is uncute, but in fact there is none, so the function parameters are passed by value.
One more thing, this newly opened heap memory object inside the function is actually a local object, and this local object will be destroyed immediately after the function is executed.

Add a new piece of code to understand this state:

var a = {
    
    name: "aaa"};
var b = a;
b = {
    
    name: "bbb"};
console.log(a.name); // 'aaa'

This code is similar to what happens in the function, except that the function is a local variable, and here is a global variable.

Summarize

1. The parameters of the function can be regarded as local variables.
2. Function parameters are passed by value. When the parameter passes the value of the basic type, passing by value is no problem; when the parameter passes the value of the reference type, I think it is the reference value (that is, the arrow) that is actually passed.
3. I also saw a saying on the Internet that the essence of parameter passing is value passing. Because value types and reference types have different access methods, they can be divided into value passing and reference passing.
4. Be sure to remember the five basic data types: Undefined, Null, String, Number, Boolean.

Everyone is welcome to point out the problem to the younger brother.