Parameter transfer of the function of JS learning

We all know that in ECMAScript, data types are divided into primitive types (also known as value types/basic types) and reference types (also known as Object types); Here I'll pass the function by the two types to see what happens.

Understanding of parameters

First, let's have a look at the parameters of the function:

A formal parameter is a local variable defined inside a function;

When an argument passes a value to a parameter, it is an assignment operation that copies the value of the argument directly to the parameter.

Raw type parameter passing Example 1

  var a = 1;  function f(b) { a = 3; } f(a); console.info(a); // 3

The code in Example 1 is relatively simple and resolves as follows:

1. First, we define a variable a , assign it a value, 1 and define a function f f whose formal parameter is b (at this point, the equivalent of defining a variable in the function f var b ; its value is now undefined );
2. The calling f(a) function a passes in as an argument. It can be understood here that an b assignment was performed b = 1 ;
3. Then continue executing the code a = 3 ; Note: In the function body, there is a variable a , but it is not defined by the var keyword, so it is a global scope of the variable, not the function of the local variables, and at the outset, we define such a variable a , so here is another assignment to the previous a one, which a turns from the previous 1 3 ;
4. After execution f(a) , the value of the global variable is a changed, so when we output to a see its value, we get it 3 , and for the function's formal parameter b there is no action at all.

Example 2

  var a = 1;  function f(a) { a = 3; } f(a); console.info(a); // 1

Analytical:

The difference between example 2 and Example 1 is that, on the surface, the formal parameter b becomes a . However, the result of this change is that, for a function, the f parameters play a role, and when we pass the arguments to the function f , our incoming arguments are referenced inside the function.

Comparing the first step of example 1, the function f internally defines a variable a whose value is undefined , note: When the function is not executed, it is only pre-parsed, the code is not executed, the code will start executing when the function is called.

After execution, the argument is passed in, the f(a) 1 variable inside the function is a assigned to, and 1 then a = 3 the operation, at this time, in the function's local scope of the stack memory has a variable a its value is 3 , and in the global scope of the stack memory, also There is a variable whose a value is 1 that the two variables are two different variables, except that their names are all a .

Process

Example 3

  var a = 1;  function f(b) { a = 3; b = 10; } f(a); console.info(a); // 3 console.info(b); // 报错

Analytical:

Here we look at example 3, first look at the variable a , exactly as in Example 1, here is no longer described in detail, and then look at the variable b , in fact, and Example 2 is not the same place, but here the name of the formal parameter changed a bit, at the end of our output a , There is no problem, the result is 3 , however, when the variable is accessed, the b output will error, here is the scope of the problem: variables defined inside the function can be accessed inside the function, but outside the function is inaccessible.

The specific process can be seen:

Example 4

  var a = 1;  function f(a) { a = 3; b = 10; } f(a); console.info(a); // 1 console.info(b); // 10

Analytical:

Combining the first three examples, example 4 I think we should all have no problem, let's take a direct look at the chart:

Reference type parameter passing

Let's take a second example of the two reference type arguments; The following example only describes the assignment changes within the function after the reference type argument, so a simple array is used to illustrate it.

In fact, the transfer of a reference type parameter requires consideration of the difference between the reference type and the original type:

1. Reference types in the pre-parsing time, as the original type will be allocated to space in the stack, generate variables, but the assignment of the original type is still stored in the stack memory, and the reference type will occupy a certain amount of space in the heap memory to hold its data, and in the stack area to generate a point to the heap area address.
2. When copying a variable, the original type of copy is generated in the stack memory of the same data, it can be understood as "full copy", while the reference type of replication, only in the stack memory copy, the address of the two variable is also pointed to the data in the heap memory.

Example 5

var a = [1];function f(a){ a[100] = 3;}f(a);console.info(a); // [1,100:3]

Analytical:

The first step: generating variables in the global stack a , assigning values, generating arrays in the global heap [1] ;

The second step: pass the parameter, call f(a) , first generate the variable in the function stack area, the a value is undefined , then a assign the value of the global variable to the variable in the local function, a because it is an array of reference type, so the function in the a stack area also generates a point to the global heap In the same way 地址1 ;

The third step: Execute the code in the function, a[100] = 3 find the function stack a , then assign the value to it, change the global heap [1] , and get a new array [1,100:3] ;

Fourth step: Access the variables in the global scope a to get an array that points to the heap memory [1,100:3] .

Example 6

var a = [1];function f(b){ b[100] = 3; b = [1,2,3]; console.info(b); // [1,2,3]}f(a);console.info(a); // [1,100:3]

Analytical:

The key point of the example in the fourth step, the execution of the code, the b = [1,2,3] variables inside the function will be b re-assigned, so that the function in the heap memory to generate a new array, the global and function in the direction of the a b address is not the same, so, The output of the two will be different.

Summarize

In JS, the original type is passed by value, and the reference type is passed by share.

Pass-by-value

When an external variable is passed to a function, the function argument gets actually a copy of the external variable, and the changes we make to the argument inside the function do not reflect the external variable.

Pass by reference-call by reference

When an external variable is passed to a function, the function argument is actually a reference to the external variable, and any modification to the argument within the function will be reflected in the external variable.

By share delivery-call by sharing

Reproduced

Parameter transfer of the function of JS learning