Function.prototype.apply()
apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.
구문
func.apply(thisArg, [argsArray])매개변수
˙thisArg옵션 : func 를 호출하는데 제공될 this 의 값. this 는 메소드에 의해 실제로 보여지는 값이 아닐 수 있음을 유의합니다. 메소드가 non-strict mode 코드의 함수일 경우, null 과 undefined 가 전역 객체로 대체되며, 기본 값은 제한됩니다.
˙argsArray옵션 : func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 null 또는 undefined. ECMAScript 5 의 시작으로 이러한 인수들은 배열 대신 제네릭 유사 배열 객체로 사용될 수 있습니다.
반환값
지정한 this 값과 인수들로 호출한 함수의 결과.
설명
이미 존재하는 함수를 호출할 때 다른 this 객체를 할당할 수 있습니다. this 는 현재 객체, 호출하는 객체를 참조합니다. apply 를 사용해, 새로운 객체마다 메소드를 재작성할 필요없이 한 번만 작성해 다른 객체에 상속시킬 수 있습니다.
apply 는 지원되는 인수의 타입만 제외하면 call() 과 매우 유사합니다. 인수(파라미터)의 리스트 대신 인수들의 배열을 사용할 수 있습니다. 또한 apply 를 사용해, 배열 리터럴이나 (예, func.apply(this, ['eat', 'bananas']), Array 객체 (예, func.apply(this, new Array('eat', 'bananas'))) 를 사용할 수 있습니다.
argsArray 파라미터를 위한 arguments 를 사용할 수도 있습니다. arguments 는 함수의 지역 변수입니다. 이는 호출된 객체의 지정되지 않은 모든 인수에 대해 사용할 수 있습니다. 따라서, apply 메소드를 사용할 때 호출된 객체의 인수를 알 필요가 없습니다. arguments 를 사용해 모든 인수들을 호출된 객체로 전달할 수 있습니다. 그럼 호출된 객체는 그 인수들을 처리할 수 있게 됩니다.
ECMAScript 5번 째 판의 시작으로, 모든 유사 배열 객체 타입을 사용할 수 있으며, 실제로 이는 프로퍼티 length 와 범위 (0..length-1) 내의 정수 프로퍼티를 갖는 다는 것을 의미합니다. 예를 들면, 이제 NodeList 또는 { 'length': 2, '0': 'eat', '1': 'bananas' } 와 같은 커스텀 객체를 사용할 수 있습니다.
※ 참고 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
예제
두 배열을 붙여라.
<body>
<script>
let array = ['Spring', 'Summer', 'Fall']
let element = [1, 2, 3]
array.push.apply(array, element)
console.info(array)
//(6) ['Spring', 'Summer', 'Fall', 1, 2, 3]
</script>
</body>
생성자 chaining을 위한 apply
<body>
<script>
const o = {}
const p = {}
function func()
{
switch(this)
{
case o :
console.log('o ojb');
break;
case p :
console.log('p ojb');
break;
case window :
console.log('window');
break;
}
}
func();
func.apply(o);
func.apply(p);
//windwo
//o ojb
//p ojb
//Function은 this를 변경할 수 있다.
</script>
</body>'JavaScript' 카테고리의 다른 글
| [JavaScript] Closure(클로저) 예제 (0) | 2022.04.18 |
|---|---|
| [JavaScript] 객체지향, Constructor(생성자), new (0) | 2022.04.18 |
| [JavaScript] 소숫점 자리수 정하기 toFixed() (0) | 2022.04.18 |
| [JavaScript] 문자열 정렬하기 (+예제, sort()이해) (0) | 2022.04.16 |
| [JavaScript] Scope(스코프), Closure(클로저), var (0) | 2022.04.16 |