this

• this는 객체를 가리키는 참조 변수
• 호출되는 위치에 따라 다른 값을 출력

호출되는 위치에 따른 this

• 전역 컨텍스트
  • 전역 객체(브라우저에서는 window)
• 함수 호출
  • 일반 함수 내부에서 this는 전역 객체.
• 메서드 호출
  • 메서드를 호출한 객체.
• 이벤트 핸들러
  • 이벤트가 발생한 DOM 요소.

this를 사용자 의도대로 값 조작하기

call()

• call메서드의 인수에 this로 사용할 값을 전달.

  var peter = {
    name : 'Peter Parker',
    sayName : function(){    
  		console.log(this.name);
  	}
  }
  var bruce = {
  
  name : 'Bruce Wayne',
  
  }
  peter.sayName.call(bruce);
  // Bruce Wayne

apply()

• apply() 메서드의 인수에 this 로 사용할 값을 전달.
• 배열의 형태로 전달할 수 있음.

  var peter = {
    name : 'Peter Parker',
    sayName : function(is, is2){    
  		console.log(this.name+ ' is '+ is + ' or ' + is2);
  	}
  }
  var bruce = {
  
  name : 'Bruce Wayne',
  
  }
  peter.sayName.apply(bruce, ['batman', 'richman']);
  / peter.sayName.apply(bruce, ['batman', 'richman']) 의 결과가 무엇이 될지 생각해보고
  
  apply 를 call로 바꾸어 호출했을 때와 비교해 봅시다. /

bind()

• bind()는 this가 고정된 새로운 함수를 반환.

  function sayName(){
    console.log(this.name);
  }
  var bruce = {
  
  name: 'bruce',
  
  sayName : sayName
  
  }
  var peter = {
  
  name : 'peter',
  
  sayName : sayName.bind(bruce)
  
  }
  peter.sayName();
  
  bruce.sayName();
  / peter.sayName() 과 bruce.sayName() 의 결과 값이 무엇이 될지 생각해봅시다. /

요약

• this는 어디에나 있다.
• 전역 this는 window다.
• 호출된 함수는 호출된 곳을 this로 바인딩한다.
• 실행되는 함수의 this를 임의로 bind할 수 있다.
• 화살표함수는 선언된 곳의 this를 바인딩한다.