오늘의 공부 👍

오늘은 this와 바인딩에 대해서 알아보겠습니다.

📝 this 바인딩

• 자바스크립트에서 this가 참조하는 것은 함수가 호출되는 방식에 따라 결정되는데, 이것을 "this binding"이라고 한다.
• this 바인딩은 5가지 규칙이 있다.
  1. 기본 바인딩
  2. 암시적 바인딩
  3. 명시적 바인딩
  4. new 바인딩
  5. 화살표 함수(ES6)

▷ 기본 바인딩 (Default Binding)

• 기본 바인딩이 적용될 경우 this는 전역 객체에 바인딩된다.
• 브라우저 환경인 경우에는 window, Node.js 환경인 경우에는 global에 바인딩 된다.

▷ 암시적 바인딩 (Implicit Binding)

• 함수가 객체의 메서드로서 호출되는 상황에서 this가 바인딩되는 것을 말한다.
• this는 해당 함수를 호출한 객체, 즉 콘텍스트 객체에 바인딩된다.

▷ 명시적 바인딩 (Explicit Binding)

• 자바스크립트의 모든 Function 은 call(), apply(), bind()라는 프로토타입 메소드를 가지고있다.
• 위의 메서드 중 하나를 호출해서 바인딩을 코드에서 명시하는 것이다.

▷ new 바인딩 (new Binding)

• 자바스크립트의 new 키워드는 함수를 호출할 때 앞에 new 키워드를 사용하는 것으로 객체를 초기화할 때 사용하는데, 이때 사용되는 함수를 생성자 함수라고 한다.
• 생성자 함수는 대문자로 시작한다.

▷ 화살표 함수

• this를 바인딩할 때 앞서 설명한 규칙들이 적용되지 않는다.
• this에 어휘적 스코프(Lexical scope)가 적용된다.즉, 화살표 함수를 정의하는 시점의 컨텍스트 객체가 this에 바인딩된다.

마무리 👍

출처 및 참고
this 와 this 바인딩
[JS] 알쏭달쏭 자바스크립트 this 바인딩