javascript 객체지향프로그래밍 - apply(), call(), bind() 메소드

윤지수님의 웹 프론트엔드 강의
자바스크립트 OOP와 fucntion 객체가 가진 메소드 apply(), call(), bind()에 대해서 알아본다.

자바스크립트 OOP

• 자바스크립트 자체는 OOP 지향 문법을 갖고 있지 않다.
• 하지만 객체 중심으로 개발이 가능하다.
• oop가 필요한 이유
  • 프로젝트의 대형화로 JS 코드가 많아짐
  • 모듈화, 객체의 필요성
• 비슷한 함수, 배열 등을 묶어서 객체지향으로 개발하는 해보는 것이 도움이 됨

JS function 객체가 갖고 있는 메소드 .apply(), .call()

• .apply() 메소드 - MDN 참고 .call() 메소드 - MDN 참고
• this가 가르키는 context를 변경하여 바로 실행하는 메소드
• 장점 : 유용한 메소드들의 재사용/공유가 가능, 중복을 방지
• 자바스크립트에서 object를 효율적으로 사용하면서 재사용 패턴까지 구현할 수 있는 유용한 방법

  var myMethods = {
    getName : function(){
    	return this.name;
    },
    getAge : function(){
    	return this.age;
    }
  }
  
  var MY_DATA = {
    name : 'monkey',
    age : 25
  }
  
  var MY_CAR = {
    name : 'mini',
    age : 2017,
    height: '120cm'
  }
  
  myMethods.getName.apply(MY_DATA); // 'monkey'
  myMethods.getAge.call(MY_CAR); // 2017
  // getAge 라는 메서드가 실행될 때, MY_CAR라는 컨텍스트 안에서 실행되게 해줘!
  // (즉 너가 실행될 때 this 키워드는 MY_CAR를 가르키면 돼!)
  

JS function 객체가 갖고 있는 메소드 bind

• callback 함수 안에서의 this는 window를 카르킨다.

var o = {
    data : 'dummy',
    time : function(){
            window.setTimeout(function(){ //window. 생략 가능
              console.log('this -->', this); // window 객체
              console.log(this.data);}, 1000) // undefined
              // callback 함수 setTimeout() 안에서의 this는 window 객체를 카르킨다.
     }
}

o.time(); // window 객체, undefined

• callback 함수 내의 this 가 window 객체를 가르키는 문제 해결방법 1 (scope)

var o = {
    data : 'dummy',
    time : function(){
      var that = this;
      window.setTimeout(function(){
      	console.log(that.data);}, 1000)
        // scope로 인하여 that은 외부 변수 that을 가져온다.
    }
}

o.time(); // 'dummy'

• callback 함수 내의 this 가 window 객체를 가르키는 문제 해결방법 2 (.bind())
  • function 객체가 갖고 있는 bind() 메소드 MDN 참고
  • bind() 메소드는 바로 실행되는 것이 아니라 설정을 저장하는 것
  • 주로 callback 함수에서 많이 쓰인다.

var o = {
    data : 'dummy',
    time : function(){
      window.setTimeout(function(){
      console.log(this.data);
      }.bind(this), 1000)}
    // 니가 실행될 때, 니가 가르킬 this는 인자를 가르키도록 실행 해! (저장)
    // bind()는 apply(), call()과는 다르게 바로 실행되지 않는다.
}

o.time(); // 'dummy'