집 > 기사 > 웹 프론트엔드 > js의 인수에 대한 자세한 설명

js의 인수에 대한 자세한 설명

小云云원래의: 2018-03-14 16:52:151525검색

js에서 함수를 호출할 때 우리는 종종 일부 매개변수를 함수에 전달합니다. js는 함수에 전달된 모든 매개변수를 인수라는 항목에 저장합니다.

js의 모든 것은 객체입니다. 심지어 배열과 문자열 함수도 객체입니다. 따라서 인수라는 것도 객체이고, 속성 이름은 전달된 매개 변수의 순서에 따라 결정됩니다. 첫 번째 매개 변수의 속성 이름은 '0'이고 두 번째 매개 변수의 속성 이름은 '0'입니다. 매개변수는 '1' 등이며, 현재 전달된 함수 매개변수의 수를 저장하는 길이 속성도 가지고 있습니다. 우리는 이런 종류의 객체를 배열형 객체라고 부르는 경우가 많습니다. 배열형 객체와 배열은 모두 객체에서 태어나지만 배열은 형이며 배열형 객체보다 더 많은 장난감(메서드)을 가지고 있습니다. 배열형 객체는 배열과 많이 닮은 동생일 뿐입니다.

잠깐만요, 방금 배열도 객체라고 하지 않았나요? 방법이 없습니다. js는 매우 유연합니다. 이 배열형 객체는 함수에 전달된 매개변수를 저장할 뿐만 아니라 나중에 하나씩 설명할 다른 속성도 가지고 있습니다.

배열형 객체와 배열은 공통점이 많기 때문에 배열형 객체도 배열의 일부 메서드를 사용하도록 호출 메서드를 사용할 수 있습니다. 이는 남동생이 형과 놀 수 있도록 하는 것입니다. 형제의 장난감...아직 말도 안되는 내용이 아닙니다. 이 문서에서는 인수에 대해서만 설명합니다. 객체가 배열 메서드를 호출하는 방법에 대해 자세히 알아보려면 이 문서를 참조하세요.

인수 속성

다음으로 노새인지 말인지 인수 객체에 무엇이 들어 있는지 살펴보겠습니다.

function showargs() {
    console.log( arguments );
}

showargs(1,2,3,4,5);

다음으로 console.log 메소드를 사용하여 인수 객체를 콘솔에 출력합니다. 여기서 Chrome의 콘솔 도구는 사용하기 매우 쉽다는 점을 말씀드리고 싶습니다(광고를 하려는 것이 아닙니다).

<br/>

여기서 인수 객체는 내가 전달한 5개의 매개변수를 배열 형식으로 저장하고, 함수에 전달한 실제 매개변수의 개수(길이)도 저장하는 것을 볼 수 있습니다. 그리고 object 인수의 ==_ proto _==가 object를 가리키는 것을 볼 수 있으며, 이는 또한 배열이 아닌 배열 유사 개체임을 보여줍니다.

이 객체를 사용하면 나중에 함수를 작성할 때 모든 형식 매개변수에 대해 매개변수 이름을 지정할 필요가 없으며 매개변수 이름을 통해 매개변수를 직접 사용할 수 있습니다. 많이 편리하지 않나요?
일부 언어에서는 함수에 대한 매개변수 이름을 지정한 후 함수가 호출될 때 현재 전달된 매개변수가 함수에 정의된 매개변수 수와 동일한지 여부를 판단합니다. 오류가 보고되지만 유연한 js(js가 정말 유연하다는 말은 아닙니다)는 함수에 전달된 매개변수 수가 함수에서 정의한 매개변수 수와 같은지 여부를 확인하지 않습니다. 따라서 코드의 단순성을 과시하기 위해 인수를 사용하여 매개변수를 호출하여 서로 다른 함수 간에 매개변수 이름을 혼동하지 않도록 합니다. 또한 코드의 엄격함을 보여주기 위해 인수를 사용하여 현재 전달된 매개변수 수가 필요한 수와 일치하는지 확인할 수도 있습니다.

예는 다음과 같습니다.

function add() {
    if( arguments.length == 2 ){        return arguments[0] + arguments[1];
    }else{        return &#39;传入参数不合法&#39;;
    }
}

console.log( add(2,3) );
console.log( add(1,2,3) );

결과를 살펴보세요.

js의 인수에 대한 자세한 설명

마지막으로 인수에도 callee라는 속성이 있음을 알 수 있습니다. 간단히 말해서 이 속성은 현재 함수에 대한 참조를 나타냅니다. 이 속성에 저장된 우리가 호출한 함수의 코드는 정말 이해하기 어렵습니다. 이제 console.log가 그 재능을 다시 보여줄 때입니다.

function showcallee() {
    var a = &#39;这里是代码&#39;;    var b = &#39;这是另一段代码&#39;;    var c = a + b;

    console.log(arguments.callee);    return c;
}
showcallee();

js의 인수에 대한 자세한 설명

결과를 보고 저만큼 충격을 받으셨나요? Arguments.callee는 이 함수의 코드를 완전히 반환하는 코드가 아닌가요?

인수의 멋진 용도

1. 인수를 사용하여 메서드 오버로드 구현

아래에서는 인수 개체를 사용하여 매개변수 추가 기능을 구현합니다. 추가 후 돌아갑니다.

function add() {
    var len = arguments.length,       
     sum = 0;    
     for(;len--;)
     {        sum += arguments[len];
    }    return sum;
}console.log( add(1,2,3) );  
 //6console.log( add(1,3) );     
 //4console.log( add(1,2,3,5,6,2,7) );   
 //26

js는 약한 유형의 언어이고 오버로딩 메커니즘이 없기 때문에 함수를 다시 작성할 때 원래 함수를 직접 덮어쓰게 됩니다. 여기서 인수를 사용하여 전달된 실제 매개변수의 유형과 수량을 결정할 수 있습니다. 다른 작업을 수행한 후 다른 값을 반환합니다.

2.args.callee를 사용하여 재귀 구현

먼저 앞에서 재귀를 어떻게 구현했는지 살펴보겠습니다. 이것은 계승을 해결하는 함수입니다

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * factorial(num-1); 
    } 
}

하지만 이 함수가 익명 함수가 되면 사용할 수 있습니다. 호출 수신자는 이 함수를 반복합니다.

function factorial(num) { 
    if(num<=1) { 
        return 1; 
    }else { 
        return num * arguments.callee(num-1); 
    } 
}

这个方法虽然好用，但是有一点值得注意，ECMAScript4中为了限制js的灵活度，让js变得严格，新增了严格模式，在严格模式中我们被禁止不使用var来直接声明一个全局变量，当然这不是重点，重点是arguments.callee这个属性也被禁止了。不过这都不是事儿，ES6为我们新增了很多好用的变量声明方式和新的语法糖，作为一个时髦的前端，我们赶紧学习一些ES6的新语法吧。

js의 인수에 대한 자세한 설명

인수 속성

인수의 멋진 용도

관련 기사