실행 컨텍스트 with this - 2

실행 컨텍스트 with this - 2

실행 컨텍스트의 구성

앞선 1탄 포스팅에서 세 가지의 환경 정보가 담긴다고 했었죠. 그 중 ThisBinding에서 할당되는 this대해 포스팅해보겠습니다.

VariableEnvironment

LexicalEnvironment

ThisBinding

여기서 ThisBinding은 실행컨텍스트가 활성화 될 때 this를 바인딩합니다. 즉 함수가 호출될 때 결정되는겁니다. 이때 어떤식으로 누가 호출하냐에 따라 동적으로 바뀌게 됩니다.

this는 어떤 것을 가리킬까?

전역에서의 호출

전역 공간에서의 호출, 그리고 일반적인 함수 호출시에 this 는 전역객체를 가리킵니다. 브라우저 상에서 전역객체는 window , nodejs 상에서는 global 객체입니다.

function test() { console.log(this) // window } console.log(this) // window

메서드의 호출

함수 중에서 메서드의 경우는 메서드를 호출한 주체 가 this가 됩니다. 여기서 메서드란 어떠한 객체와 관련된 동작을 하는 함수를 바로 메서드라고 합니다. (oop 개념과 혼동 될 수 있습니다.)

var temp = { log: function() { console.log(this); } } temp.log()

여기서 어떤한 객체 temp가 log()라는 메서드를 호출하였기 때문에. 여기서의 this는 바로 temp가 되는 것입니다.

어떠한 객체안에 메서드와 함수의 호출

어떠한 객체안에 메소드와 그 메소드 안에 함수가 있는 경우 그 함수를 호출 했을 때에 this는 어이없게도 전역객체 입니다. 말이 조금 어려운데 코드로 보겠습니다.

var temp = 10; var obj = { temp: 20, log: function() { console.log(this.temp) function() innerLog() [ console.log(this.temp) } innerlog() // 10 } } obj.log() // 20

obj.log() 의 경우는 obj안에 메소드를 실행하였고 그 주체가 obj 이니까 this는 obj 가 됩니다. 그래서 로그 호출 시에 20 이 찍히게 됩니다. 하지만 메소드안에 있는 innerlog() 는 함수를 호출한 주체가 전역 이다보니 10 이 호출되게 됩니다.

Callback 함수의 호출

콜백 함수를 어떤한 객체의 메소드의 파라메타로 넘겨 줬을 시의 경우입니다.

var callback = function() { console.log(this) }; var obj = { log: functiong(cb) { cb() } } obj.b(callback) // window

이 경우에 어떠한 객체의 메소드로 호출 했음에도 전역객체를 가리키고 있습니다. 이는 앞서 포스팅 맨 처음 this는 함수를 실행한 주체가 누구냐에 따라 달라진다 고 했습니다. cb() 라는 콜백 함수 실행문을 보면 어떠한 객체도 참조되어 지지 않고 실행 하고 있습니다. 그래서 window를 가리키게 되는 것입니다.

정리

함수 실행 시 기본적으로 this는 전역객체이다. 하지만 어떠한 객체의 메소드라면 그 객체가 this이다. 즉 어떤식으로 누가 호출하냐에 따라 동적으로 바뀌게 됩니다. 추가적으로 this는 bind 함수로 원하는 주체를 바인딩이 가능합니다.

from http://varletc0nst.tistory.com/14 by ccl(A) rewrite - 2021-09-15 00:26:59