프론트엔드 개발자가 되기위한 여정 -50

이정우·2022년 10월 25일
0

frontend-bootcamp

목록 보기
53/60

밸! 하~

밸로그 여러분 안녕하세요!

오늘의 주제는

this, binding입니다!

저희가 개발을 할때 자주 듣는것이 binding해라! 라는 말과 함수내부에서 this를 사용하는 말이 아닐까 싶습니다!

그럼 정확히 이것들이 어떻게 사용되고 언제 사용되는지 알아보는 시간을 가져볼까요?!!

그럼 시작하겠습니다!

1. 자바스크립트의 this 란?

interpreter에 의해 현재 실행되는 자바스크립트 코드를 실행 컨텍스트라고 부릅니다!
자바스크립트 내부에서는 이런 실행컨텍스트들을 stack으로 관리하고있는데요!

이때 실행되는 시점에 자주 변경되는 실행컨텍스트를 this가 가리키고 있습니다!

즉 this는 현재 실행되고있는 코드의 실행 컨텍스트라고 할수있습니다

또한 함수의 this는 다른언어와는 약간 다르게 작동합니다!
대부분의 경우 this의 값은 함수를 호출한 방법에 의해 결정됩니다.
실행중에는 할당으로 설정할 수 없고 함수를 호출할 때 마다 다를 수 있습니다.
그렇기때문에
이 this가 어떤것을 가리키고있는지 정확히 사람이 알기 어려운 경우가 존재합니다!

그래서
이 this를 고정시키기 위해서 나온 방법이 있습니다
바로
binding입니다!

2. binding

자 그럼 이 바인딩
이 바인딩을 통해서 this를 정확이 어떤것을 가지고오는지 알수있게 되고 이를 통해서 확정된 결과를 가져올수있게 됩니다!

정말 좋지않나요?!

이러한 바인딩을 통해서 결과를 예측할수있게되고 코드를 조금더 구조적으로 설계를 할수가 있게 되었습니다!

그럼 바인딩의 종류에 대해서 알아볼까요??

바인딩은 5가지 규칙이있습니다

-기본 바인딩
-암시적 바인딩
-명시적 바인딩
-new 바인딩
-화살표 함수(ES6)

먼저
기본 바인딩입니다!

앞으로 설명할 4가지 자바스크립트의 this 바인딩 규칙 중 해당하는 것이 없을 때 적용이 되는 기본 규칙입니다!
바로 기본 바인딩이 적용될 경우 this는 전역 객체에 바인딩된다는 것입니다!

그다음은 암시적 바인딩인데요
암시적 바인딩이란, 함수가 객체의 메서드로서 호출되는 상황에서 this가 바인딩되는 것을 말합니다!

그다음으로는

명시적 바인딩입니다!
자바스크립트의 모든 Function 은 call(), apply(), bind()라는 프로토타입 메소드를 가지고있습니다. 이 3가지 메서드 중 하나를 호출함으로써 this 바인딩을 코드에서 명시하는 것을 명시적 바인딩이라고 합니다!

그다음은 new 바인딩입니다!

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

그리고 생성자 함수에서는 this키워드를 해당 생성자를 이용해 생성할 객체에 대한 참조로 사용합니다!

자 오늘은 this와 바인딩에 대해서 알아보았는데요!

오늘도 지식한개 쌓아갔습니다!

자 다들 그럼

밸~바!

profile
주니어 프론트엔드 개발자

0개의 댓글