[Javascript] This 와 call(), apply()

This 와 call(), apply()

1. 정의

1)  call()

- The call() method calls a function with a given this value and arguments provided individually.

(call()는 지정된 this(현재객체)와 파라미터들을 이용하여 함수를 호출한다) 

a. 문법

fun.call(thisArg[,arg1[.arg2[,....]]])

2) apply()

- The apply() method calls a function with a given this value and arguments provided as an array (or an array-like object).

(apply()는 call()과 비슷하지만 파라미터의 형태가  배열의 형태로 넘어간다)

a. 문법

fun.apply(thisArg, [argArray])

3) 비교와 설명

    - call()과 apply()는 Function.prototype의 객체에 속해 있다

    - 결과적으로 function()을 이용하여 함수를 생성하면 모두 call(), apply()를 사용 할 수 있다

- call()이 살짝 빠르다는 결과가 있다.

- 고정적인 인자일 경우 call()이 좋고 유동적으로 변하는 값은 apply()가 좋다고 한다

2. 사용

1) call()

function sum(num1, num2){ return num1 + num2; } function minusCall(num3){ return sum.call(this,3,3) - num3; } function minus(num3){ return sum(3,3) - num3; } console.log(minusCall(2)); //4 console.log(minus(2)); //4

- minusCall() 과 minus()의 결과값은 4로 같다

2) apply()

function sum(num1, num2){ return num1 + num2; } function minusApply(num3,num4){ return sum.apply(this,[num3,num4]) - num3; } function minusArg(num3,num4){ return sum.apply(this,arguments) - num3; } function minus(num3, num4){ return sum(num3, num4) - num3; } console.log(minusApply(4,5)); //5 console.log(minusArg(4,5)); //5 console.log(minus(4,5)); //5  

- 세 함수 호출시 결과는 모두 5로 같다

3) 문제 : 결과가 같은데 번거롭게 call()/ apply()를 써서 함수를 호출할 필요가 있을까?

4) This의 변환

- call()/apply()의 주 목적은 함수 안의 this를 변환하는데 있다.

3. 호출에 따른 this의 변환

window.name = 'Hee'; var local = { name : 'Kyle' }; //전역 함수 function global(){ return this.name; } console.log(global()); //Hee console.log(global.call(this)); //Hee console.log(global.call(window)); //Hee console.log(global.call(local)); //Kyle

- 위 결과 call()의  this에 어떤 값을 넘기느냐에 따라 함수안의 this의 내용이 변하는 것을 확인 할 수 있다