Javascript this 이론

 

 

this

 

this는 실행 콘텍스트가 실행될 때 한다. 그리고 실행 콘텍스가 실행될 때는 콘텍스트를 지닌 함수가 호출되는 순간이며 이때 this가 활성화된다. 즉 함수가 호출될 때 this가 결정이 난다고 말할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

전역공간에서의 this

 

 

 

전역 콘텍스트를 실행하는 주체가 this라고 알고 있으면 된다. 브라우저의 window, 노드의 global 등등이 있다.

 

 

 

 

 

 

 

 

 

함수 호출시 this

 

• 전역공간에서 함수를 호출하였으면 당연히 호출 시킨 함수 this는 window 및 global을 가르킨다.
• 하지만 위의 예시처럼 아무리 e객체안에 있는 메소드 함수 안에 있는 함수 f()을 함수 메소드 안에서 함수를 호출해도 f() 함수의 this는 전역객체의 주체인 window을 선택한다. 왜냐하면 허무하지만 일종의 자바스크립트 언어의 오류라고 할 수 밖에 없다. 일단 함수 호출의 형태를 보고 (예: f();) 알아낼 수 밖에 없다.
• 그냥 홀로 함수로서 호출되면 전역객체의 메소드라고 생각하면 된다. 호출 함수 앞에 window.이 붙어있다고 생각하면 된다.

 

 

 

 

 

• 위의 두 코드의 결과를 보면 함수호출 this의 오류의 결과를 확인 할 수 있고 self 변수를 이용하여 이를 해결한 결과 또한 확인 할 수 있다.
• 왼쪽 결과를 보면 메소드 c 함수의 this와 b 객체 안의 this가 달라 결과 또한 다르게 나온 것을 알 수 있다. 왜냐하면 c 함수가 홀로 호출되어 window을 메소드로 갖고 있기 떄문이다. 이를 해결하기 위하여 c 함수의 this을 대신하여 b 객체에 미리 b 객체 범위의 this을 선언한 self변수를 넣고 c 함수안에 없는 self 변수를 찾기 위하여 c 함수 내부에서 외부로 나아가 b 객체의 self를 가져오게 되어 똑같은 a 변수를 사용하게 되었다.

 

 

 

 

 

 

 

 

 

 

메소드 호출시 this

 

 

• 메소드 호출시에는 메소드명 앞에가 this가 된다. 다른 말로 메소드의 '점' 앞이 this라고 할수 있다.
• 위의 코드 예시를 보면 왼쪽 코드는 a.b 중 b가 메소드인데 b '점' 앞에 있는 a가 this라고 볼 수 있다. 즉 a변수이며 b객체를 가르키므로 메소드 함수의 this는 b 객체 자체라고 볼 수 있다.
• 오른쪽 코드 또한 메소드 c '점' 앞의 a.b가 this라고 볼 수 있다. a.b는 c객체를 가르키므로 메소드이 함수의 this는 c 객체를 가르킨다.

 

 

 

 

 

 

 

callback 함수 호출시 this

 

 

 

1. 기본적으로 함수의 this와 같다.

 

2. 제어권을 가진 함수가 callback의 this에 명시한 경우 그에 따른다.

 

3, 하지만 개발자가 this을 bind 메소드를 사용하여 바인딩 한 경우 바인딩채로 callback 으로 넘기면 그에 따라야한다.

 

 

 

 

 

• 위의 코드를 보면 callback함수의 예시인데 callback 함수가 obj.b의 인자로 들어가 있어 this가 결정된 것은 obj 변수 안에 있는 b의 객체의 메소드 함수를 호출시키는 것이다. 즉 callback 함수=cb() 이다. 이때 호출될 cb()가 홀로 있기 때문에 전역객체의 메소드이며 this는 결국 window가 뜰 수 밖에 없다.
• 즉 callback함수가 this에 영향이 있는 것이 아니라 callback함수가 직접 넘겨준 대상(위의 코드를 예를 들자면 cb() 호출 함수)의 형태에 따라 this가 결정난다.
• 그래서 cb();을 cb.call(this);로 해주면 this는 obj로 결정나게 된다.

 

 

 

 

 

• 위의 두 callback 함수를 사용한 코드를 보면 마찬가지로 .bind라는 메소드 덕분에 this가 전역객체의 메소드의 window로 나오지 않고 obj 객체로 결정나게 해주었다.
• 여기서 bind 메소드의 효과는 callback 함수가 실행될때 this의 우선순위를 obj로 한다고 선언한 것이다. 

 

 

 

 

 

• 위의 두 코드는 이벤트 관련 코드로 이 두 코드에도 함수 호출 관련 this에 문제가 있다.
• addEvevtListener의 첫 번째 인자로 .click의 이벤트가 발생되면 두 번째 인자인 콜백 함수가 발동되는데 이때 원래대로라면  addEvevtListener의 콜백 함수안의 this는 전역객체 window가 나오겠지만  addEvevtListener자체가 이벤트 발생하는 대상 타겟으로 this로 설정하게끔 해서 this는 이벤트로 발생할 html 엘리먼트로 결정된다. 
• 만약 addEvevtListener자체가 설정한대로 따르기 싫다면 마찬가지로 bind을 이용하여 원하는 대로 this를 결정되게 할 수 있다. 오른쪽 코드에서 bind(obj)을 적용한 모습을 볼 수있다. 오른쪽 코드의 this는 obj 객체로 결정되었다.

 

 

 

 

 

 

 

 

생성자 함수 호출시 this

 

 

 

• 만약 person 함수를 new을 이용하지 않고 생성하지 않았다면 this은 전역객체인 window을 가르키겠지만 new을 이용하여 person 생성 함수를 따로 만들었으면 자동으로 Person의 this는 새로운 person 생성 함수의 변수인 gomugom 객체 자체가 된다.

 

 

 

 

 

 

 

인프런의 정재남 강사님의 강의를 참조하였습니다.

https://www.inflearn.com/instructors/46840/courses