javascript_기본 지식의 인수, 피호출자, 호출자에 대한 자세한 설명
- WBOY원래의
- 2016-05-16 15:10:401291검색
인수란 무엇인가요?
인수는 함수가 호출될 때 생성되는 배열형 객체이지만 배열 객체는 아니며 실제로 함수에 전달된 매개변수를 저장하며 함수가 선언한 매개변수 목록에 국한되지 않습니다.
니마, 무슨 말이야?
데모를 작성하고 아래 코드를 확인하세요
<!DOCTYPE html>
<head>
<title>arguments</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function obj(){
//利用instanceof判断arguments
console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );
console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );
console.log(arguments);
}
obj();
</script>
</body>
</html>
이 코드를 실행하고 크롬 디버거를 사용하면 다음 그림을 얻을 수 있습니다
instanceof를 사용하여 인수를 결정합니다. 인쇄 효과에서 인수는 객체입니다.
그런 다음 인쇄된 인수를 확장합니다. 위 그림에서 볼 수 있듯이 피호출자를 포함한 많은 속성이 포함되어 있습니다.
다음으로, obj 함수를 호출할 때 위의 코드를 수정하고 여기에 매개변수를 전달하지만, obj 함수에는 매개변수가 없습니다.
아래의 구체적인 코드를 확인하세요
<!DOCTYPE html>
<head>
<title>arguments</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function obj(){
console.log( 'arguments instanceof Array? ' + (arguments instanceof Array) );
console.log( 'arguments instanceof Object? ' + (arguments instanceof Object) );
console.log(arguments);
}
//向obj传递参数
obj('monkey','love',24);
</script>
</body>
</html>
크롬 디버거를 통해 아래 사진을 보실 수 있습니다
보시다시피 인수에는 "monkey", "love"라는 세 가지 매개 변수와 우리가 전달한 24개의 매개 변수가 포함되어 있습니다.
그렇다면 인수가 함수에 의해 선언된 매개변수가 아니라 실제로 함수에 전달되는 저장된 매개변수인 이유는 무엇입니까?
수신자란 무엇인가요?
호출자는 인수 개체의 구성원이고 해당 값은 "실행 중인 함수 개체"입니다.
무슨 뜻인가요?
데모를 작성하고 결과를 살펴보겠습니다.
아래 코드와 결과 도표를 참고하세요
<!DOCTYPE html>
<head>
<title>callee</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
function obj(){
//利用callee
console.log(arguments.callee);
}
obj();
</script>
</body>
</html>
위 그림에서 볼 수 있듯이 Argument.callee는 Argument 개체(이 경우 obj)를 가리키는 함수입니다.
발신자란?
caller는 현재 함수를 호출하는 함수를 저장하는 함수 객체의 속성입니다.
참고로 통화입니다. 클로저만 포함되는 것은 아닙니다. 상위 함수가 없으면 null입니다.
아직은 예전과 똑같으니, 데모를 쭉 쓰자.
코드는 다음과 같습니다.
<!DOCTYPE html>
<head>
<title>caller</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<script>
//child是parent内的函数，并在parent内执行child
function parent(){
function child(){
//这里child的父函数就是parent
console.log( child.caller );
}
child();
}
//parent1没有被别人调用
function parent1(){
//这里parent1没有父函数
console.log(parent1.caller);
}
//parent2调用了child2
function parent2(){
child2();
}
function child2(){
console.log(child2.caller);
}
/*执行
parent里嵌套了child函数
parent1没有嵌套函数
parent2调用了child2，child2不是嵌套在parent2里的函数
*/
parent();
parent1();
parent2();
</script>
</body>
</html>
크롬 디버거를 열면 렌더링을 볼 수 있습니다
코드와 위의 그림을 바탕으로 이제 발신자를 이해하셨나요?