[JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로?

[JavaScript] 자바스크립트 함수 호출 방법2 :내가 원하는 객체를 this로?

 

 

자바스크립트에서 가장 자주 쓰이는 함수 호출 방법에 관한 게시물을 먼저 보고 오자

[JavaScript] 자바스크립트 this , 이해 쏙쏙~!

 

 

이번 게시물에서는 Function의 prototype인 call, apply 메소드를 이용한 함수 호출 방법에 대해 알아보도록 하자.

 

 

 

Function.prototype.call 함수

 

call 메소드는 다른 객체 대신 메소드를 호출하는데 사용된다. 이 메소드를 사용하여 함수의 this 객체를 원래 컨텍스트에서 내가 지정한 새 객체로 변경할 수 있다.

 

 

예제1.

 

window.a = 1;
window.b = 2;

var obj = {
	a : 3,
	b : 1
};

function sum(){
	return this.a + this.b;
}

sum();
sum.call(obj);

 

일반적으로 자주 쓰는 함수 호출 방법, 함수명() 인 sum() 했을 경우 

 

sum메소드 내의 this는 window객체를 가리키므로 전역변수 a와 b의 합인 3이 리턴된다.

 

하지만 내가 원하는 객체가 obj라면 call메소드를 사용해서 sum.call(obj) 호출하면 sum 메소드 내의 this는 obj 객체를 가리키기 때문에 obj.a와 obj.b의 합인 4를 리턴하게 된다.

 

 

 

예제2.

 

var name = 'global';

function returnName(){
	return this.name;
}

var kim = new Object();
kim.name = '김철수';
kim.age = 30;
kim.getName = returnName;

var lee = {
	name : '이영희',
	age : 35,
	getName : returnName
};

 

 

위 예제2를 바탕으로 다음 콘솔이 어떻게 찍히는지 생각해보자.

 

console.log(returnName());
console.log(kim.getName());
console.log(lee.getName());

 

returnName 함수의 this는 window객체를 가리키고 있으므로 window.name이 return되어 'global'이 찍히게 되고, 

kim.getName에서 this는 kim객체를 가리키고 있으므로 kim.name인 '김철수',

마찬가지로 lee.getName은 '이영희'가 찍히게 된다.

 

이 내용이 이해가 안가고 어렵다면 위 게시물을 다시 복습하자!

 

 

자. 그렇다면 같은 함수를 호출하지만 call 함수를 사용하여 원하는 객체를 보낸다면 어떻게 콘솔이 찍힐까?

 

console.log(returnName.call(kim));	// returnName 함수 내의 this가 kim객체를 바라보도록
console.log(kim.getName.call(lee));	// kim.getName 함수 내의 this가 lee객체를 바라보도록
console.log(lee.getName.call(window));	// lee.getName 함수 내의 this가 window객체를 바라보도록

 

순서대로 '김철수' , '이영희', 'global' 이 찍히게 된다.

 

 

 

 

 

 

Function.prototype.apply 함수

 

call 메소드와 동일하지만  call 메소드는 this객체와 하나 하나의 매개변수를 전달하고 apply 메소드는 this객체와 매개변수 리스트를 전달한다는 차이점이 있다.

 

 

예제

 

function findMin(nums){
	return Math.min(nums[0], nums[1]);
}

console.log(findMin([10, 100]));	// 10

 

위 예제는 배열을 매개변수로 넘길 때 배열 값들의 최소값을 return 해주는 예제이다.

 

배열을 [10, 100]을 넘겨서 10을 최소값인 10을 반환받았지만 만약 배열의 크기가 3인 [100, 200, 300]을 매개변수로 넘기고 싶다면 다음과 같이 수정해주어야한다.

 

function findMin(nums){
	return Math.min(nums[0], nums[1], num[2]);
}

console.log(findMin([100, 200, 300]));	// 100

 

 

그럼 내가 매개변수 리스트를 넘길 때 그 크기가 고정이 아니라면 매번 이렇게 바꿔줘야된다는게 말이 되는가?

 

 

이럴 때 바로 apply 함수를 사용하는 것이다 !

 

function findMin(nums){
	return Math.min.apply(this, nums);
}

console.log(findMin([10, 100]));			// 10
console.log(findMin([20, 200, 300]));			// 20
console.log(findMin([10, 15, 100, 200]));		// 10
console.log(findMin([100, 200, 400, 500, 600]));	// 100

 

call 함수와 마찬가지로 this 객체를 지정해주고, 그 뒤의 인자를 배열로 넘겨주는 것 !!