자바스크립트의 표범 엿보기: 형식 매개변수와 실제 매개변수에 대한 간략한 분석

소개:
오늘 다른 사람의 질문을 봤습니다.

코드 복사 코드는 다음과 같습니다.

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

제가 이 부분에 대해 아는 바가 거의 없고 한번 해보고 싶은 생각이 들어서 구체적으로 분석해보겠습니다.
원래는 언어적인 관점에서 분석하고 싶었지만 아쉽게도 실력이 부족해서 대충 해볼 수 밖에 없어서 표범의 모습이라고 부르는데, 전문가분들이 해주셨으면 좋겠습니다. 정정해줘.
어제 글을 쓰다가 오늘 밥먹으면서 다시 생각해보니, 아직 신뢰성이 없는 질문들이 있어서 다시 수정해 봤습니다.
모든 JS 소개 책에서는 JS 함수 내부에 Arguments 개체 인수가 있다고 언급합니다. 이 인수는 함수가 호출될 때 함수의 매개 변수를 실제로 전달하는 데 사용되며 형식 매개 변수의 길이를 저장합니다.
이것은 분석에 약간 유용하지만 형식 매개변수에 대한 더 많은 정보를 얻고 싶습니다. 현재로서는 더 나은 방법이 있는지 모르겠습니다.
그래서 우리는 시뮬레이션만 할 수 있습니다.
지금은 시뮬레이션을 무시하고 실제 문제부터 시작하세요.

코드 복사 코드는 다음과 같습니다.

 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1- Transitional.dtd"> 
 
 ;

(임의의 문장: 개인적으로 인수를 배열로 정의하지 않은 이유 중 하나는 실제 매개변수의 개수를 확인할 수 없기 때문이라고 생각합니다. [런타임에 동적으로 결정되는] 함수 정의에서 배열이 무한히 크거나 배열이 값을 취하자마자 범위를 초과합니다.
주제로 돌아가서:
fn_2의 경우 초기화 매개변수는 var x와 동일합니다(x에는 현재 값이 할당되지 않으며 기본값은 정의되지 않습니다. 할당은 문이 실행될 때 할당됩니다).
다음과 같이 작성할 수 있다면 fn_2는 다음과 같아야 합니다.

코드를 복사하세요.

코드는 다음과 같습니다. 다음: function fn_2(var x){ x = 3 console.log(x,arguments[0])

arguments[0] = 2;

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

 
2. 함수 구문 테스트를 통과하면 함수 내부의 인수 객체가 처음부터 할당됩니다. . 할당이 완료되면 함수 본문의 명령문이 실행되기 시작합니다. 
다음 진술은 제가 작성한 것으로, 맞는지 아닌지 모르겠습니다(특히 관련 진술): 

코드 복사

코드는 다음과 같습니다. 형식 매개변수(해당 변수)에 값이 할당된 것을 확인하면 인수에 해당하는 항목을 찾습니다. 인수가 발견되면 형식 매개변수를 해당 인수 연관 항목으로 설정합니다. 해당 항목(정의되지 않음)이 인수에 없으면 형식 매개변수와 인수는 독립적으로 유지됩니다. 여기서 우리가 찾고 있는 것은 함수 실행 시작 시 인수의 스냅샷입니다. 인수 할당의 경우에도 마찬가지입니다.

위 삭제된 부분은 어제의 내용이고, 빨간색으로 표시된 부분은 글을 쓰다가 뭔가 잘못된 부분을 발견해서 추가한 것입니다. 오늘 정신을 차려보니 어제는 왜 이렇게 멍청하게 스냅샷을 생각했을까? 이것은 단지 기능이 시작될 때 협회의 직접적인

판단이 아닐까? 그래서 표현을 이렇게 바꿨습니다.

코드 복사

코드는 다음과 같습니다.

 
함수 실행이 시작되면 형식 매개변수의 관련 정보를 설정합니다. 도형의 해당 인수에서 해당 항목(둘 다 정의되지 않음)을 찾을 수 있으면 두 항목이 서로 관련되어 있는 것입니다. 나중에 어떻게 처리되더라도 전체 기능 본문의 관련 정보는 변경되지 않습니다. 

따라서 다음 예제도 변경됩니다.
예제로 돌아가서 fn_2 함수 구문 테스트를 통과하고 두 번째 단계부터 실행이 시작됩니다.
매개변수 없이

코드 복사 코드는 다음과 같습니다.

 
fn_2() 
function fn_2(x); //인수 할당이 완료되었습니다. 실제 매개변수가 없으므로 인수 매개변수 목록이 비어 있습니다. 동시에 연관된 정보가 판단됩니다. 분명히 형식 매개변수가 존재하고 인수는 서로 독립적이며 향후에는 연관되지 않습니다. 값 3이 할당되고, x와 인수[0]은 서로 독립적이며, 인수[ 0]은 아직 정의되지 않습니다. 
console.log(x, 인수[0]);//print x=3, 인수[ 0]은 정의되지 않음 
arguments[0] = 2;//arguments가 할당됨, x 인수[0]와 무관. 따라서 x=3은 변경되지 않습니다. 
console.log(x, 인수[0]);//Print x = 3, 인수[0]=2 
} 

 

매개변수 포함 Case

코드 복사 코드는 다음과 같습니다.

Case fn_2(1) withparameter; 
function fn_2(x){//인수 할당이 완료되었습니다. 인수[0]=1입니다. 동시에, 형식 매개변수 x는 값을 가지며, 이 둘은 서로 관련되어 있으며 항상 동심원입니다. 
var x = 3; //x에는 값 3이 할당되고, x에는 인수[0]이 할당되므로 인수[0]에는 값 3이 할당됩니다. 
console.log(x,arguments[0]);//Print x=3, 인수[0] = 3 
arguments[0] = 2;//arguments[0]에는 값 2가 할당됩니다. x는 이미 인수[0]과 연결되어 있으므로 x도 동시에 변경됩니다. 
console.log(x, 인수[0]);//Print x = 2, 인수[0]=2 
} 

 

대화는 동일해야 합니다.
매개변수 없음

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

fn_2(); 
function fn_2(x){//관련 없음
arguments[0] = 2;//해당 x를 찾을 수 없습니다(정의되지 않음), 서로 독립적
 console.log(x,arguments[0]);//정의되지 않음, 2 
x = 3;//서로 독립적, 스냅샷. 인수는 동적으로 추가되지만 분리할 수 없으므로 
console.log(x,arguments[0]);//3,2 
} 

 

매개변수 사용 시 여전히 실패합니다.

코드 복사 코드는 다음과 같습니다.

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 
} 

 

공식 매개변수가 하나뿐이므로 설득력이 충분하지 않을 수 있으므로 이제 값을 늘립니다. 2개로요.
실제 매개변수가 하나만 있는 경우:

코드 복사 코드는 다음과 같습니다.

 fn_2( 1); 
function fn_2(x,y){ //인수 할당이 완료되었습니다. 인수[0]=1, 인수[1]=정의되지 않았으므로 x만 인수[0]와 연결되고 y 인수[1] 
console.log(x,y,arguments[0],arguments[1]); //1,undefine,1,undefine 
var x = 3; 값 3이 할당되었습니다. x는 인수[0]과 연관되어 있으므로 인수[0]에는 값 3이 할당됩니다. 
console.log(x,y,arguments[0],arguments[1]); //3, 정의되지 않음, 3, 정의되지 않음 
var y = 4 //y에 3, y 값이 할당됨 및 인수[ 1] 서로 독립적인 인수[1]은 여전히 ​​정의되지 않았습니다. 
console.log(x,y,arguments[0],arguments[1]) //3,4,3,undefine 
arguments[0] = 2; //arguments[0]에는 값 2가 할당됩니다. x와 인수[0]은 이미 연결되어 있으므로 x가 동시에 변경됩니다. 
console.log(x,y,arguments[ 0],arguments[1]) ; //2,4,2, 정의되지 않음 
arguments[1] = 5; //arguments[1]에는 값 5가 할당되고, y 및 인수[1]은 각각 독립적입니다. 그렇지 않으면 y는 4개로 유지됩니다. 
console.log(x,y,arguments[0],arguments[1]) //x=2,y=4,arguments[0]=2,arguments[1]= 5 
} 

 

두 개의 실제 매개변수 사용:

코드 복사 코드는 다음과 같습니다. :

 
fn_3(1,6); 
function fn_3(x,y){ //인수 할당 완료, 인수[0]=1, 인수[1]=6, x 및 인수[0] ,y 및 인수[1]은 서로 관련되어 있습니다
console.log(x,y,arguments[0],arguments[1]) //1,6,1,6 
var x = 3 ; / /x에는 값 3이 할당되고, x에는 인수[0]이 할당되므로 인수[0]에는 값 3이 할당됩니다. 
console.log(x,y,arguments[0],arguments[1]); //3, 6, 3, 6 
var y = 4 //y에는 3, y 값이 할당됩니다. 인수[ 1]은 연관되어 있으므로 인수[1]에는 값 4가 할당됩니다. 
console.log(x,y,arguments[0],arguments[1]); //3,4,3,4 
arguments[0] = 2 //arguments[0]에 할당됨 값 2, x와 인수[0]이 이미 연결되어 있으므로 x가 동시에 변경됩니다. 
console.log(x,y,arguments[0],arguments[1]) //2,4,2 ,4 
arguments[1] = 5; //arguments[1]에 값 5가 할당됩니다. y와 인수[1]이 이미 연결되어 있으므로 y가 동시에 변경됩니다. 
console.log(x, y,arguments[0], 인수[1]); //x=2,y=5,arguments[0]=2,arguments[1]=5 
} 

모두 위의 내용은 추측입니다. 실제로 메소드 매개변수 정보가 없으므로 추측을 바탕으로 작은 테스트를 작성했습니다.
다음도 변경되었습니다.

코드 복사 코드는 다음과 같습니다.

 
function _Function(){//얻은 형식 매개변수 목록은 배열입니다. _args 
var _args = [ ]; 
for(var i = 0; i var obj = {} 
obj['key'] = 
obj[arguments[i]] = 정의되지 않음; 
_args.push(obj); 
} 
//this._argu = 
var fn_body = 인수[arguments.length - 1] ; 
//다음 메소드는 실제 매개변수인 인수를 가져옵니다. 여기서 _인수는 인수 객체 대신 배열로 구현됩니다. 
this.exec = function(){ 
//함수가 실행 중일 때 실제 매개변수 _arguments에는 값이 할당됩니다
var _arguments = [] 
for(var i = 0; i _arguments[i] =args[i]; 🎜>} 
//다음은 함수 본문 
eval( fn_body) 
} 
} 

 

을 실행합니다.

코드 복사 코드는 다음과 같습니다.

함수 _Function(){//얻은 형식 매개변수 목록은 배열입니다. _args 
var _args = []; 
for(var i = 0; i < 인수 .length - 1; i ){ 
var obj = 
obj['key'] = 인수[ i]; 
obj[arguments[i]] = 정의되지 않음; 
} 
//this._args; var fn_body = 인수 .length - 1]; 
//다음 메소드는 실제 매개변수 _arguments를 가져옵니다. 여기서 _arguments는 인수 객체가 아닌 배열로 구현됩니다.
this.exec = function(){ 
// 함수가 실행 중이면 실제 매개변수 _arguments에 값이 할당됩니다
var _arguments = [] 
for (var i = 0; i < 인수.길이; i ){ 
_arguments[i] = 인수 [i]; 
} 
//실행 시작 시 관련 정보를 판단합니다
for( var j = 0; j _args[j]["link"] = true; 
} 
//함수 본문 아래 실행 
eval(fn_body); 
} 

 
 논리적으로 말하면 연관은 둘 다 같은 객체를 가리켜야 하는데 예제만 분석하면 되고 그렇게 자세하게 만들 생각은 없었기 때문에 함수 본문에 if 문을 사용하여 판단했습니다. . 
예제의 fn_2를 해당 형식으로 바꾸세요. 

코드 복사

코드는 다음과 같습니다. // function fn_2(x){ // var x = 3

// console.log(x,arguments[0])// 인수[0] = 2;

// console.log(x,arguments[0]); 
// } 
// fn_2(1) 
//fn_2body에서 _args[i]["link " ] = true; 형식 매개변수가 실제 매개변수와 연관되어 있음을 나타냅니다. 
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] ["키"]],_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) 




인스턴스와 다시 작성된 함수의 관계를 보여주기 위해 그림을 그리고 변경했습니다. 

기사 시작 부분의 예시로 돌아가기:

코드 복사

코드는 다음과 같습니다. 다음과 같습니다: function fn(x){ x = 10; arguments[0] = 20;console.log(x,arguments[0]) }

fn( )

분명히 둘은 서로 독립적입니다:
x = 10, 인수[0] = 20
추측:

코드 복사 코드는 다음과 같습니다.

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

 

은 모두 20,20을 출력해야 합니다.

코드 복사 코드는 다음과 같습니다:

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

 
도 20,20을 출력해야 합니다. 

코드 복사 코드는 다음과 같습니다.

function fn(x){

arguments[0] = 
console.log(x,arguments) [0]) 
} 
fn() 

 
은 정의되지 않아야 하며 20 

cnblogs Xiaoxi Shanzi의 원본 텍스트

자바스크립트의 표범 엿보기: 형식 매개변수와 실제 매개변수에 대한 간략한 분석_자바스크립트 기술