JavaScript this

사내 스터디 this

자바스크립트의 함수는 호출될 때, 매개변수 이외에 arguments 객체와 this를 암묵적으로 전달 받는다.

  • Java의 this 는 인스턴스 자신을 가르키는 참조변수
  • this가 객체 자신에 대한 참조 값을 가지고 있다.

하지만 자바스크립트의 this 는 함수 호출 방식에 따라 this 에 바인딩 되는 객체가 달라진다


일반 함수 호출

post image
  • this → 전역 (window) 객체에 바인딩 됨
  • 기본적으로 this 는 전역객체에 바인딩 되고, 내부 함수의 경우에도 전역객체에 바인딩 됨
post image
  • 내부함수는 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다.

객체 메소드 호출

post image
  • 해당 메소드의 객체에 바인딩 됨
post image
  • 프로토타입 객체도 메소드를 가질 수 있다.

프로토 타입 방식이란 자바스크립트에서 객체를 상속하기 위해 사용된다 (템플릿 같은 것)


생성자 함수 호출

  • 생성자 함수란 객체를 생성하는 역할을 함
  • 기존 함수에 new 연산자를 붙여서 호출하면 해당 함수는 생성자 함수로 동작
post image
  1. 빈 객체 생성 및 this 바인딩 → 2. this를 통한 프로퍼티 생성 → 3. 생성된 객체 반환

apply/call/bind 호출

  • this 객체에 명시적으로 바인딩 하는 방법

일반 함수

  • 일반 함수 → 화살표 함수
  • 생성자 함수 → class
  • 객체 메서드 → 객체 메서드 축약형