9. 상황에 따라 달라지는 This

 

다양한 상황에서 다른 의미를 가진 This

 

실행 컨텍스트. 실행할 코드에 제공활 환경정보를 모아놓은 객체.

- 그 객체 안에는 3가지가 존재한다.

✓ VariableEnvironment

✓ LexicalEnvironment

✓ ThisBindings

 

런타임 : 코드가 들어가는 그 시간
자바스크립트에서는 두가지 환경이 있다.
1.노드(node.js)  2. 브라우저

전역 환경에서 this는 => 노드에서는 global 객체이고, 브라우저에서는 Window 객체이다.

함수와 메소드 : 함수는 스스로 독립적으로 수행될 수 있으나, 메소드는 항상 종속적이다. 어떤 객체가 메소드를 시켜줘야 한다.

함수 : this가 전역개체이고, 메소드는 this가 호출의 주체이다.

case1. 함수
호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미함
함수는 스스로 호출된다. 그러므로 호출 주체가 없다. 호출 주체가 있으려면 점(.)이나 대괄호 [ ]가 있어야 한다.

 

// case1. 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미함
// 함수는 스스로 호출된다. 그러므로 호출 주체가 없다. 호출 주체가 있으려면 점(.)이나 대괄호 [ ]가 있어야 한다.

var func = function (x) {
    console.log(this, x);
};
func(1); // Window { ... } 1

// case2. 메소드
// 메소드는 스스로 호출되지 않는다. 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(oBj)를 의미함.

var obj = {
    method: func,
};
obj.method(2); // { method : f } 2

// 점(.) 또는 대괄호 [ ] 로 호출의 구분을 결정할 수 있다. obj.method에 점 찍음.
// this는 호출을 누가했는지에 대한 정보를 담고있음.

var obj = {
methodA: function () { console.log(this) },
inner: {
methodB: function() { console.log(this) },
}
};

obj.methodA();             // this === obj
obj['methodA']();          // this === obj

obj.inner.methodB();       // this === obj.inner
obj.inner['methodB']();    // this === obj.inner
obj['inner'].methodB();    // this === obj.inner
obj['inner']['methodB'](); // this === obj.inner

함수로써 호출할 때 그 함수 내부에서의 this

함수 내부에서의 this
어떤 함수를 함수로써 호출할 경우, this는 지정되지 않는다. 호출 주체를 알 수 없기 때문
실행컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 전역 객체를 의미한다
따라서, 함수로서 독립적으로 호출될 때는 this는 항상 전역객체를 가리킨다!
메소드 내부에 있는 함수에서 호출될 때도 this는 항상 전역객체이다.