A glimpse of the leopard in javascript: a brief analysis of formal parameters and actual parameters_javascript skills

Introduction:
I saw a question from someone else today:

Copy the code The code is as follows:

function fn(x){
x = 10;
arguments[0] = 20;
console.log(x,arguments[0])
}
fn()

I feel like I know very little about this and I might as well give it a try, so I analyze it specifically.
I originally wanted to analyze it from a language perspective, but unfortunately I don’t have enough skills, so I can only give it a rough try, so I call it a glimpse of the leopard, and I hope the experts can correct me.
I wrote this yesterday. I thought about it again while eating today. After much deliberation, I felt that some of the questions were still unreliable, so I tried to revise it again.
Every JS introductory book will mention that there is an Arguments object arguments inside the JS function, which is used to actually pass in the parameters of the function when the function is called. fn.length saves the length of the formal parameter.
These are slightly useful for analysis, but I want to get more information about the formal parameters. I don’t know if anyone has a better way. I have no solution for the time being.
So we can only simulate it.
Ignore the simulation for now and start from the actual problem:

Copy the code The code is as follows:

BR>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Focus on the last two functions ( fn_1, fn_2), here, we directly re-declare the x corresponding to the formal parameter. I saw some people on the Internet saying that this is a local variable x declared.
Same, but this local variable is not a general local variable. . When the function is defined, formal parameters are declared. If there are local variables with the same name in the function body, this declaration is ignored. At the same time, there will be an object arguments in the function body;
(A random sentence: I personally think that one of the reasons why arguments was not defined as an array was because the number of actual parameters cannot be determined in the function definition [dynamically determined at runtime], then Either the array is infinitely large, or the array exceeds the bounds as soon as it takes a value).
Back to the topic:
For fn_2, the initialization parameter is equivalent to var x; (x is not assigned a value at this time, and the default is undefined. The assignment is assigned when the statement is executed)
So if you can write like this If so, fn_2 should look like this:

Copy the code The code is as follows:

function fn_2(var x){

x = 3;
console.log(x,arguments[0]);
arguments[0] = 2;
console.log(x,arguments[0]);
}


2. The function syntax test passes. When executed, the arguments object inside the function is assigned from the beginning. After the assignment is completed, the statements in the function body begin to execute.

The following statement is my own, I don’t know whether it is correct or not (especially the related statement):

Copy code The code is as follows:

Once it is found that the formal parameter (corresponding variable) is assigned a value, it will look for the item corresponding to arguments. If the item corresponding to arguments is found, then set the formal parameter to the corresponding item of arguments. association. If the corresponding item (undefined) is not found in arguments, then the formal parameters and arguments remain independent. What we are looking for here is a snapshot of arguments at the beginning of function execution. In turn, the same is true for arguments assignment.

The deleted part above was from yesterday, and the part in red was added when I found something wrong in the middle of writing. When I come back to my senses today, why did I think of snapshots so stupidly yesterday? Isn’t this just a direct

judgment of the association when the function starts running? So I changed the expression:

Copy the code The code is as follows:

When the function starts executing, set the associated information of the formal parameters. If the corresponding items (both undefined) can be found in the corresponding arguments of the shape, then the two are related. No matter how it is processed later, the associated information in the entire function body will not be changed.

So the following examples will also be changed:
Back to the example, the fn_2 function syntax test passes, and execution starts from the second step:
Without parameters

Copy code The code is as follows:

fn_2();
function fn_2(x){/ /arguments assignment is completed. Since there are no actual parameters, the arguments parameter list is empty. At the same time, the associated information is judged. Obviously, the formal parameters are present and arguments are empty. The two are independent of each other and will not be associated in the future.
var x = 3;//x is assigned a value of 3, x and arguments[0] are independent of each other, arguments[ 0] is still undefined
console.log(x, arguments[0]);//print x=3, arguments[0] is undefined
arguments[0] = 2;//arguments is assigned, x Independent of arguments[0]. Therefore x=3 does not change
console.log(x, arguments[0]);//Print x = 3, arguments[0]=2
}

With parameters Case

Copy code The code is as follows:

Case fn_2(1) with parameters;
function fn_2(x){//arguments assignment completed, arguments[0]=1. At the same time, the formal parameter x has a value, and the two are related and always concentric.
var x = 3; //x is assigned the value 3, x is associated with arguments[0], so arguments[0] is assigned the value 3.
console.log(x,arguments[0]);//Print x=3, arguments[0] = 3
arguments[0] = 2;//arguments[0] is assigned the value 2, because x Already associated with arguments[0], so x changes at the same time
console.log(x, arguments[0]);//Print x = 2, arguments[0]=2
}

The converse should be the same:
Without parameters

Copy the code The code is as follows:

fn_2();
function fn_2(x){//Not related
arguments[0] = 2;//Cannot find the corresponding x(undefined), independent of each other
console.log(x,arguments[0]);//undefined, 2
x = 3;//Independent of each other, snapshot. Although the arguments are dynamically added, they are inseparable, so it still fails
console.log(x,arguments[0]);//3,2
}

with parameters

Copy code The code is as follows:

fn_2(1);
function fn_2(x) {
arguments[0] = 2;//Association
console.log(x,arguments[0]);//2, 2
x = 3;//Association
console.log (x,arguments[0]);//3,3
}

Since we only have one formal parameter, it may not be convincing enough, so now we increase it to two.
With only one actual parameter:

Copy code The code is as follows:

fn_2( 1);
function fn_2(x,y){ //arguments assignment is completed, arguments[0]=1, arguments[1]=undefined, so only x is associated with arguments[0], and y is associated with arguments[1]
console.log(x,y,arguments[0],arguments[1]); //1,undefined,1,undefined
var x = 3; //x is assigned a value of 3, x Associated with arguments[0], so arguments[0] is assigned the value 3.
console.log(x,y,arguments[0],arguments[1]); //3, undefined, 3, undefined
var y = 4; //y is assigned a value of 3, y and arguments[ 1] Independent of each other, arguments[1] is still undefined
console.log(x,y,arguments[0],arguments[1]); //3,4,3,undefined
arguments[0] = 2; //arguments[0] is assigned the value 2. Since x and arguments[0] are already associated, x changes at the same time
console.log(x,y,arguments[0],arguments[1]) ; //2,4,2, undefined
arguments[1] = 5; //arguments[1] is assigned the value 5, y and arguments[1] are independent of each other, so y remains 4
console. log(x,y,arguments[0],arguments[1]); //x=2,y=4,arguments[0]=2,arguments[1]=5
}

With two actual parameters:

Copy code The code is as follows:

fn_3(1,6);
function fn_3(x,y){ //arguments assignment completed, arguments[0]=1, arguments[1]=6, x and arguments[0] ,y and arguments[1] are related to each other
console.log(x,y,arguments[0],arguments[1]); //1,6,1,6
var x = 3; / /x is assigned a value of 3, x is associated with arguments[0], so arguments[0] is assigned a value of 3.
console.log(x,y,arguments[0],arguments[1]); //3, 6, 3, 6
var y = 4; //y is assigned a value of 3, y and arguments[ 1] is associated, so arguments[1] is assigned a value of 4.
console.log(x,y,arguments[0],arguments[1]); //3,4,3,4
arguments[0] = 2; //arguments[0] is assigned the value 2 , since x and arguments[0] are already associated, so x changes at the same time
console.log(x,y,arguments[0],arguments[1]); //2,4,2,4
arguments[1] = 5; //arguments[1] is assigned the value 5. Since y and arguments[1] are already associated, y changes at the same time
console.log(x,y,arguments[0], arguments[1]); //x=2,y=5,arguments[0]=2,arguments[1]=5
}

All the above are speculations, because in practice There is no method parameter information, so I wrote a small test based on speculation:
The following has also been changed:

Copy code The code is as follows:

function _Function(){//The obtained formal parameter list is an array: _args
var _args = [];
for(var i = 0; i var obj = {};
obj['key'] = arguments[i];
obj[arguments[i]] = undefined;
_args.push(obj);
}
//this._argu = _args;
var fn_body = arguments[arguments.length - 1];
//The following method gets the actual parameters_ arguments, here _arguments is implemented as an array instead of an arguments object
this.exec = function(){
//When the function is running, the actual parameter _arguments is assigned a value
var _arguments = [];
for(var i = 0; i _arguments[i] = arguments[i];
}
//The following executes the function body
eval( fn_body);
}
}

replaced with:

Copy code Code As follows:

function _Function(){//The obtained formal parameter list is an array: _args
var _args = [];
for(var i = 0; i var obj = {};
obj['key'] = arguments[i];
obj[arguments[i]] = undefined;
_args. push(obj);
}
//this._argu = _args;
var fn_body = arguments[arguments.length - 1];
//The following method gets the actual parameter _arguments, here _arguments is implemented as an array, not an arguments object
this.exec = function(){
//When the function is running, the actual parameter _arguments is assigned a value
var _arguments = [];
for (var i = 0; i _arguments[i] = arguments[i];
}
//Judge the associated information at the beginning of the run
for( var j = 0; j _args[j]["link"] = true;
}
//Execute below Function body
eval(fn_body);
}
}

Logically speaking, the association should point both to the same object, but I only need to analyze the example, I didn't plan to make it so detailed, so I used an if statement in the function body to judge.
Replace fn_2 in the example into the corresponding form:

Copy the code The code is as follows:

// function fn_2(x){
// var x = 3;
// console.log(x,arguments[0]);
// arguments[0] = 2;
// console.log(x,arguments[0]);
// }
// fn_2(1)
//In fn_2body, use _args[i]["link" ] = true; to indicate that formal parameters are associated with actual parameters
var fn_2body = ''
'_args[0][_args[0]["key"]] = 3;'
'if(_args [0]["link"]){ _arguments[0] = _args[0][_args[0]["key"]];}'
'console.log(_args[0][_args[0] ["key"]],_arguments[0]);'
'_arguments[0] = 2;'
'if(_args[0]["link"]){ _args[0][_args[ 0]["key"]] = _arguments[0]}'
'console.log(_args[0][_args[0]["key"]],_arguments[0]);';
var fn_2 = new _Function('x',fn_2body);
fn_2.exec(1);

I drew a picture to show the relationship between the instance and the rewritten function, and also changed it:

Back to the example at the beginning of the article:

Copy the code The code is as follows:

function fn(x){
x = 10;
arguments[0] = 20;
console.log(x,arguments[0])
}
fn( )

Obviously, the two are independent of each other:
x = 10, arguments[0] = 20;
Conjecture:

Copy code The code is as follows:

function fn(x){
x = 10;
arguments[0] = 20;
console.log(x, arguments[0])
}
fn(1)

should all output 20,20

Copy code The code is as follows:

function fn(x){
arguments[0] = 20;
console.log(x,arguments[0])
}
fn(1)

should also output 20,20

Copy code The code is as follows:

function fn(x){
arguments[0] = 20;
console.log(x,arguments[0])
}
fn()

should be undefined and 20
Original text from cnblogs Xiaoxi Shanzi