티스토리 뷰

//기본 함수 호출방법 
function func(){
}
func();

//apply()를 사용하여 호출하기
funcion sum(arg1, arg2){
return arg1 + arg2};
alert(sum.apply(null, [1,2]) // output: 3
// 이 예제처럼 단순한 코드일 경우에는 apply()를 사용하는 것은 바람직하지 않다. 그냥 sum(1,2)로 하는 것이 맞다.
//하지만 우리가 apply()메소드를 사용하는 이유는 앞의 null을 다른 값을 넣어서 사용할 수 있기 때문이다.
  • 객체에 값이 들어가 있다면 속성(property)라고 하고 함수가 들어가 있다면 메소드(method)라고 합니다.
  • JS에서 함수는 객체입니다. -> 함수에는 JS가 기본적으로 제공하는 내장된 메소드,객체를 가지고 있습니다. *내장된 메소드일 경우 console에서 "{ native code }" 라고 내용물을 보여주지 않는 형태로 코드를 가려둡니다.
  • 그래서 위의 코드에서 func.apply() 혹은 func.call()이라는 메소드를 사용할 수 있게 됩니다.  
  • apply()와 call()은 우리가 정의한 함수 func()를 호출하는 역할을 합니다. 두 메소드는 같은 취지이며 사용방법이 다른 차이점을 가지고 있습니다. 
  • apply의 첫번째 인자로 null을 전달 의미: apply가 실행된 함수 인스턴스는 전역객체(브라우저에서는 window)를 맥락으로 실행되게 된다. 

apply()를 사용하여 함수호출하기

      //아래 생성한 o1,o2객체는 각각 다르 속성의 이름과 속성의 수를 가지고 있다. 
      const o1 = { val1: 1, val2: 2, val3: 3 };
      const o2 = { v1: 10, v2: 50, v3: 100, v4: 25 };
      
      /*함수 sum()은 객체의 속성을 열거할 때 사용하는 for in문을 이용하여 
      객체 자신(this)의 값을 열거한 후에 각 속성의 값을 지역변수 _sum에 저장한 후 리턴*/
      function sum() {
        let _sum = 0;
        for (name in this) {
          _sum += this[name];
        }
        return _sum;
      }
      alert(sum.apply(o1)); // output:6 , sum을 객체 o1의 메소드로 만들고 sum을 호출한 후에 sum을 삭제
      alert(sum.apply(o2)); // 185
      
      
      /*아래는 기존 함수 호출법을 사용하는 방법*/
      
      const o1 = { val1: 1, val2: 2, val3: 3, sum:sum };
      const o2 = { v1: 10, v2: 50, v3: 100, v4: 25, sum:sum };
      
      function sum() {
        let _sum = 0;
        for (name in this) {
        //더하려고 하는 값의 타입이 함수와 같지 않을 경우에만 더하라
        if(typeof this[name] !== "function")
          _sum += this[name];
        }
        return _sum;
      }
      alert(o1.sum()); //결과는 같지만 sum function의 내부코드도 같이 출력된다.
      					// 이를방지하기 위해 if문을 넣어줘야한다.
      alert(o2.sum());

 

  • apply()메소드는 두개의 인자를 가질 수 있으며, 첫번째 인자는 함수(sum)이 실행될 맥락이고 두번째 인자는 배열이다. 이 배열에 담긴 원소가 함수(sum)의 인자로 순차적으로 대입된다. 
  • apply()를 사용하게 되면 이 메소드가 실행되는 시점에서 apply메소드를 적용하는 함수의 this값을 프로그래밍적으로 변경하여 sum()이라는 함수가 o1의 속성인 것처럼 활용할 수 있다는 장점이 있습니다. 
  • sum의 o1소속의 메소드가 된다는 것은 함수 sum에서 this의 값이 전역객체가 아니라 o1이 된다는 의미
  • 일반적인 객체지향 언어에서는 하나의 객체에 소속된 함수는 그 객체의 소유물이되지만 JS에서 함수는 독립적인 객체로서 존재하고, apply나 call메소드를 통해 다른 객체의 소유물인 것처럼 실행될 수 있다!
댓글