JS this 바인딩

 

 

 

오늘은 Javascript의 객체 지향에 대해 공부 했다. 

 

객체 지향을 공부하면서 본격적으로 'this'를 사용하기 시작했는데, 

 

금일 설명중에 아래와 같은 설명이 있었다. 

 

메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않습니다.

 

왜 메소드 호출 방식을 이용할 때에는 화살표 함수를 쓰지 않는 것일까?

 

이유는 바로 this의 바인딩 이슈 때문이다. 

 

 

This

 

this에 대한 설명은 아래와 같다.

Technically, JavaScript this refers to the object that the function belongs to. And the value of this depends on how the function is called, something known as runtime binding.

 

 

기본적으로, 자바스크립트에서 this란 함수가 소속된 객체를 의미한다. this의 값은 함수가 어떻게 불려졌는냐에 따라 결정되고, 이를 런타임 바인딩이라 한다. 

 

즉, 어떤 환경에서 this의 값이 호출되었는냐에 따라 값이 달라지기 때문에 사용에 유의해야 한다. 

 

호출환경에 따라 어디에 this가 바인딩 되는지는 아래를 참고하자. 

 

• 객체의 메서드를 호출할 때 : this는 해당 메서드를 호출한 객체에 바인딩
• 함수를 호출할 때 : 함수 내부에서 사용된 this는 전역객체에 바인딩
• 생성자 함수를 호출할 때 : this는 일반 함수를 호출할 때와 다르게 새로 생성되는 빈 객체에 바인딩
• call과 apply메서드의 사용을 통한 this 바인딩 : 명시적으로 특정 객체(지정한 객체)에 바인딩

출처: https://bkdevlog.netlify.app/posts/arrow-function

[ES6] 3. 화살표 함수(Arrow Function) - DEVLOG

 

 

요약하자면, 

 

함수안에서 this는 전역객체에 바인딩(화살표 함수일 경우 상위스코프의 this에 바인딩)

객체의 메서드를 호출할 때는 this는 메서드를 호출한 객체에 바인딩

--> 따라서 매서드 호출방식에는 화살표 함수를 쓰지 않는다.