this 정리

this는 실행 컨텍스트가 생성될 때 함께 결정됨 = 함수가 호출될 때 결정된다는거

 

this는 호출한 주체(객체)의 정보를 담고 있다고 생각하면 됨 

전역 공간에서는 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문에 여기서 this는 window or global임

*this는 아니지만 전역변수를 선언하면 엔진은 이를 전역객체의 프로퍼티로 할당함  ? 뭔솔

- let a = 1 하면 window.a / this.a 해도 1이란 값이 나오는거 보면 알 수 있음

- 전역에서 말고도 사실 자바스크립트의 모든 변수는 원래 특정 객체의 프로퍼티로서 동작함

 

함수/메서드로서 호출

함수와 메서드의 차이? 

-함수는 그냥 지자신이 하는거임 (독립적) / 근데 메서드는 자신을 호출한 객체에 관한 동작을 수행함

-메서드는 함수를 객체 프로퍼티로 할당한거다 (x) - 호출을 해야 그게 메서드인거고 안하면 그건 그냥 함수임

 

this는 호출한 주체에 대한 정보가 담기기 때문에 메서드로 호출한 경우에 this는 자신이 속해있는 그 객체를 가리키는거임

그래서 obj.a() - 이런거에서 this는 . 앞에거라는게 이런 소리

그냥 함수 호출은 호출 주체가 있는게 아님 - 실행 컨텍스트를 활성화할 때 this가 지정되지 않은 경우에는 this는 window임

 

function a(){console.log(this)} // window임

obj.outer( )했을 때 첫번째 콘솔 - {outer : f} 두번째 - window

여기서 일단 내가 한건 obj.outer( )임 - outer라는 함수를 메서드로 호출했음

그렇기 때문에 outer함수의 실행 컨텍스트가 생성되면서 호이스팅하고, 스코프 체인 하고, this 바인딩은 obj로 됨

그다음 위에서 아래로 실행하면서 일단 console.log(this)는 {outer : f}가 실행되고, 그 밑에 innerFunc1에 함수를 할당한다음 innerFunc1()이 실행되면서 또 실행컨텍스트 ~ 되는데 여기서는 그냥 저 함수만 실행한거임 - 그러면 window

이게 싫다 ? 화살표 함수 쓰면 됨(this를 바인딩하지 않는 함수)

화살표 함수는 실행 컨텍스트를 생성할 때 this 바인딩 과정이 빠지게 되어, 상위 스코프의 this를 그대로 활용할 수 있음

- 여기서 상위스코프는 저 outer니까 화살표 함수로만 바꾸면 콘솔에는 똑같은 결과가 나옴