apply()
apply() 메서드는 주어진 this 값과 배열 (또는 유사 배열 객체) 로 제공되는 arguments 로 함수를 호출합니다.
참고: 이 함수의 구문은 거의 call() 구문과 유사합니다. 근본적인 차이점은 call() 은 함수에 전달될 인수 리스트를 받는데 비해, apply() 는 인수들의 단일 배열을 받는다는 점입니다.
func.apply(thisArg, [argsArray])
thisArg : func 를 호출하는데 제공될 this 의 값. this 는 메소드에 의해 실제로 보여지는 값이 아닐 수 있음을 유의합니다. 메소드가 non-strict mode 코드의 함수일 경우, null 과 undefined 가 전역 객체로 대체되며, 기본 값은 제한됩니다.
argsArray : func 이 호출되어야 하는 인수를 지정하는 유사 배열 객체, 함수에 제공된 인수가 없을 경우 null 또는 undefined. ECMAScript 5 의 시작으로 이러한 인수들은 배열 대신 제네릭 유사 배열 객체로 사용될 수 있습니다. 아래의 브라우저 호환성 정보를 보세요.
배열에 배열을 붙이기 위해 apply() 사용하기
<!DOCTYPE html>
<html>
<body>
<script>
var array = ['a', 'b'];
var elements = [0, 1, 2];
array.push.apply(array, elements);
console.info(array); // ["a", "b", 0, 1, 2]
</script>
</body>
</html>
apply와 내장함수 사용
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery.extend demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<script>
// min/max number in an array
var numbers = [5, 6, 2, 3, 7];
// using Math.min/Math.max apply
var max2 = Math.max.apply(null, numbers);
// 이는 Math.max(numbers[0], ...) 또는 Math.max(5, 6, ...)
// 와 거의 같음
var min2 = Math.min.apply(null, numbers);
console.log(max2); //7
console.log(min2); //2
// vs. simple loop based algorithm
max = -Infinity, min = +Infinity;
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] > max) {
max = numbers[i];
}
if (numbers[i] < min) {
min = numbers[i];
}
}
console.log(max); //7
console.log(min); //2
</script>
</body>
</html>
생성자 체이닝을 위한 apply 사용
//
Function.prototype.construct = function(aArgs) {
var oNew = Object.create(this.prototype);
this.apply(oNew, aArgs);
return oNew;
};
//object._proto_ 사용
Function.prototype.construct = function (aArgs) {
var oNew = {};
oNew.__proto__ = this.prototype;
this.apply(oNew, aArgs);
return oNew;
};
//클로져 사용
Function.prototype.construct = function(aArgs) {
var fConstructor = this, fNewConstr = function() {
fConstructor.apply(this, aArgs);
};
fNewConstr.prototype = fConstructor.prototype;
return new fNewConstr();
};
//Function 생성자 사용
Function.prototype.construct = function (aArgs) {
var fNewConstr = new Function("");
fNewConstr.prototype = this.prototype;
var oNew = new fNewConstr();
this.apply(oNew, aArgs);
return oNew;
};
//사용 예제
function MyConstructor() {
for (var nProp = 0; nProp < arguments.length; nProp++) {
this['property' + nProp] = arguments[nProp];
}
}
var myArray = [4, 'Hello world!', false];
var myInstance = MyConstructor.construct(myArray);
console.log(myInstance.property1); // logs 'Hello world!'
console.log(myInstance instanceof MyConstructor); // logs 'true'
console.log(myInstance.constructor); // logs 'MyConstructor'
'Javascript > jQuery' 카테고리의 다른 글
| jQuery 플러그인 (0) | 2020.06.28 |
|---|---|
| Function.prototype.bind() (0) | 2020.06.13 |
| Function.prototype.call() (0) | 2020.06.13 |
| jQuery.fn.extend() (0) | 2020.06.13 |
| jQuery.extend() (0) | 2020.06.13 |