this

this란?

• this란 JavaScript 예약어다.
• this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다.
• this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다.
• this는 자바스크립트 엔진에 의해 암묵적으로 생성된다.
• this는 코드 어디서든 참조할 수 있다.
• 하지만 this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로
  일반적으로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
• 함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달된다.
• 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다.
• 단, this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다.
• 크게 전역에서 사용할 때와 함수안에서 사용할 때로 나눌 수 있다.

 바인딩이란?

• 식별자와 값을 연결하는 과정을 말한다.
• 변수선언은 변수 이름과 확보된 메모리 공간의 주소를 바인딩하는 것이다.
• this 바인딩은 this(키워드로 분류되지만 식별자의 역할을 한다.)와 this가 가리킬 객체를 바인딩하는 것이다.

this를 전역에서 사용한 경우

• 브라우저라는 자바스크립트 런타임의 경우에 this는 항상 window라는 전역 객체를 참조한다.
• 전역 객체란 전역 범위에 항상 존재하는 객체를 의미한다. (Node.js에서 전역 객체는 global 이다.)
• 브라우저라는 자바스크립트 런타임에서 모든 변수, 함수는 window라는 객체의 프로퍼티와 메소드이다.

 

this를 함수 내부에서 사용한 경우

• 함수는 전역에 선언된 일반 함수와 객체 안에 메소드로 크게 구분할 수 있다.
• 객체안에 선언된 함수를 전역에 선언된 함수와 구분하기 위해 메소드라고 한다.
• 그런데 전역에 선언된 일반 함수도 결국 window 전역 객체의 메소드다.
• 즉, 모든 함수는 객체 내부에 있다.
• 이때 this는 현재 함수를 실행하고 있는 그 객체를 참조한다.
• 정리하면 함수 내부에서 this의 값은 함수를 호출하는 방법에 의해 바뀐다.
• 그리고 또한 엄격모드 여부에 따라 참조 값이 달라진다.
• 엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다
• function 키워드로 생성한 일반함수와 화살표 함수의 가장 큰 차이점이 바로 this이다.
• 이를 Lexical this (렉시컬 this)라고 한다.
• 화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리킨다.
• 일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고, 함수를 호출 할 때 함수가 어떻게 호출 되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.
• 화살표 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정된다.
• 화살표 함수의 this 바인딩 객체 결정 방식은 함수의 상위 스코프를 결정하는 방식인 렉시컬 스코프와 유사하다.
• 화살표 함수는 call, apply, bind 메소드를 사용하여 this를 변경할 수 없다.

 

정리:
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수(self-reference variable)이다

함수를 호출하면 인자와 this가 암묵적으로 함수 내부에 전달되며 함수 내부에서 인자를 지역 변수처럼 사용할 수 있는 것처럼, this도 지역 변수처럼 사용할 수 있다. 주의할점으로  this 바인딩은 함수 호출 방식에 의해 동적으로 결정됩니다.

자바스크립트 런타임의 경우에 this는 항상 window라는 전역 객체를 참조하며.
엄격 모드에서 일반 함수 내부의 this는 undefinded 가 바인딩 된다

일반함수와 화살표 함수에서의 this의 차이점이 생기는데요 

화살표 함수 안에서 this는 언제나 상위 스코프의 this를 가리키며

이것을 렉시컬 this부릅니다.

일반 함수는 함수를 선언할 때 this에 바인딩할 객체가 정적으로 결정되지 않고, 함수를 호출 할 때 함수가 어떻게 호출 되는지에 따라 this에 바인딩할 객체가 동적으로 결정된다.

 

 

출처:https://hanamon.kr/javascript-this%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C/