[JS] this란? 바인딩 및 일반 함수 vs 화살표 함수 알아보기

this

this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 식별자이다. 

 

바인딩이란

바인딩이란 식별자와 값을 연결하는 과정

 

동적으로 결정되는 this

this는 호출하는 주체에 따라서 달라진다.

 

console.log(this); // (1) window

const a = {
  name: "realzu",
  getName() {
    console.log(this);
  }
}

a.getName(); // (2) { name: 'realzu', getName: ƒ getName() }

const b = a.getName;
b(); // (3) window

 

(1)의 경우, 전역이기 때문에 전역 객체 window를 가리킨다.

(2)의 경우, 호출한 객체인 a를 가리킨다. 이는 메서드 호출이라고도 부른다.

(3)의 경우, 일반 함수 호출로써 기본적으로 this에는 전역 객체가 바인딩된다.

 

getName 메서드는 a 객체에 포함된 것이 아니라, 독립적인 별도의 객체다. 메서드 내부의 this는 호출한 객체에 바인딩된다. 따라서 (3)처럼 일반 변수에 할당하여 일반 함수로 호출될 수도 있는 것이다.

 

일반 함수 vs 화살표 함수

this를 다루는 부분에 있어서 큰 차이가 있다. 화살표 함수는 콜백 함수 내부와 외부의 this 문제를 해결하기 위해 의도적으로 설계된 만큼, 콜백 함수로 사용되는 경우가 많다.

 

일반 함수는 호출 시점, 화살표 함수는 선언 시점이다.

화살표 함수는 예외적으로 this 바인딩이 존재하지 않는다. 내부의 this를 참조하면서 스코프체인을 통해 상위 스코프의 this를 그대로 참조한다. 즉 화살표 함수의 this는 정의된 위치에 따라 결정된다. 중첩 함수라면 스코프 체인 상에서 가장 가까운 상위 함수 중, 화살표 함수가 아닌 함수의 this를 참조하게 된다. 없다면 최상위 스코프는 전역이기 때문에 window 전역 객체를 가리킨다.

 

일반 함수는 동적으로, 화살표 함수는 정적으로 this 객체가 결정된다. 정적인 화살표 함수는 바인딩으로도 this 값을 변경할 수 없다.

 

---

 

아래의 글은 일반 함수를 Binding 해서 사용하는 방법이다.

 

https://realzzu.tistory.com/154

React에서 메서드 바인딩하기 (feat. 이벤트 핸들러, 클래스형 컴포넌트)