[Study] this keyword | call, apply, bind

this 키워드는 실행 컨텍스트를 참조합니다.
실행 컨텍스트는 각 상황별로 나뉩니다. 각 상황별 this 키워드가 어떤 객체를 참조하는지 정리 하였습니다.

 

전역 컨텍스트

global 객체(window) 참조

전역 컨텍스트 에서는 global객체인 window 객체를 참조합니다.

console.log('this', this) // window object

console.log('this === window', this === window) // true

this.a = 13

console.log('window.a: ', window.a)

 

함수 컨텍스트

전역 컨텍스트의 함수 에서는 global 객체를 참조합니다.

객체의 함수에서는 현재 이 함수(메서드)가 속한 객체를 실행 컨텍스트로 잡고 참조합니다.

함수 컨텍스트 에서는 call, apply, bind 메서드를 사용하여 외부에서 해당 함수에 실행 컨텍스트를 설정할 수 있습니다. 

 

function a(b, c) {
  console.log('this.a: ', this.a)
  return this.a + b + c
}

const result_by_call = a.call({
  a: 3
}, 5, 7)
console.log('result_by_call: ', result_by_call)

const result_by_apply = a.apply({
  a: 10
}, [5, 7])
console.log('result_by_apply: ', result_by_apply)

const result_by_bind = a.bind({
  a: 100
}, [5, 7])
console.log('result_by_bind(): ', result_by_bind())

각 메소드별로 파라미터 형태가 다른 것과, bind 메소드는 실행 형태가 다릅니다. (실행 컨텍스트가 바인딩 된 객체가 반환됨, apply/call은 binding과 동시에 실행)

 

그리고 bind 메소드는 한 번만 작동합니다. 재 바인딩하여 사용할 수 없습니다.(이전 실행 컨텍스트가 적용된 함수가 반환됩니다)

 

화살표 함수

ES6에 도입된 화살표 함수도 함수 컨텍스트와 실행 컨텍스트는 같습니다.

하지만 앞서 설명한 call, apply, bind 메소드를 사용하여 실행 컨텍스트를 바인딩할 수 없습니다.

 

함수 생성자

생성될 객체를 실행 컨텍스트로 잡습니다.

function TestObject() {
  constructor(a, b) {
    this.a = a
    this.b = b
    this.c = 49
  }
}

 

이벤트 처리 함수

이벤트를 발생시킨 요소를 실행 컨텍스트로 잡습니다.

const nameInputed = (e) => {
    console.log('this === e.currentTarget', this === e.currentTarget) // True, currentTarget과 target이 같은 요소일 시
}

 

출처

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/this