일반 함수 내부의 this의 동작방식
const object = {
name: '테스트',
main: function() {
console.log(this);
},
};
일반함수의 경우
this는 함수를 호출한 객체가 된다.
즉, 함수를 어떤 객체가 호출햇냐에 따라 this값이 달라진다.
예시
object.main() 의 결과는 object객체를 반환
object2.main() 의 결과는 object2객체를 반환
이러한것을 다이나믹 바인딩, 혹은 런타임 바인딩이라고 한다.
일반함수의 this값은 함수가 호출되는 시점에 결정되기 때문이다.
화살표함수의 경우 자신만의 this를 가지고 있지 않는다.
자신을 감싸고 있는 scope로 올라가서 this를 찾게된다.
해서 window 객체를 출력하는걸 알 수 있다.
화살표 함수의 this는 함수가 선언된 위치에서 결정이 된다.
또한 객체의 내부에서 this의 속성에 접근이 되지 않는다.
일반함수의 경우 this.name이라면 잘 출력이 되지만
화살표함수의 경우 this는 더이상 object객체가 아닌 window객체가 되므로
this.name이 출력이 되지 않는다.
정리하면
１。 일반 함수의 this
함수가 호출되는 방법에 따라 결정된다。
즉、 this의 값은 함수가 어떻게 호출되는지에 따라 달라진다。
전역에서 일반함수를 호출하면 this는 전역 객체를 가리킨다。
브라우저 환경에서는 window、 Node.js에서는 global이다。
－ 전역에서 일반함수를 호출했을 때
－ 객체의 메서드로 호출될 경우
this는 그 메서드를 호출한 객체 즉 obj를 가리킨다。
obj의 value는 ４２이므로 ４２ 출력
－ call, apply, bind 메서드를 사용하여 this의 값을 명시적으로 설정할 수 있다。
－ ｂｉｎｄ메서드는 특정 객체에 고정된ｔｈｉｓ를 가진 새로운 함수를 생성한다。
－ 생성자 함수에서 ｔｈｉｓ는 새로 생성된 객체를 가리킨다。
－ 화살표 함수의 ｔｈｉｓ
화살표 함수는 일반함수와 다르게 ｔｈｉｓ를 다루며、
다음과 같은 방식으로 동작한다。
－ 상위 스코프의 ｔｈｉｓ를 유지
화살표 함수는 자신만의 ｔｈｉｓ를 가지지 않고 외부（상위）스코프의 ｔｈｉｓ를 그대로 사용한다。
즉 화살표 함수 내부에서의 ｔｈｉｓ는 화살표 함수가 정의된 위치의 ｔｈｉｓ이다。
