this 란 무엇인가

Rxoding·2024년 8월 19일

상황에 딸라 달라지는 this

1. 전역환경에서 this -> 노드(global 객체), 브라우저(window 객체)

2. 메서드로서 호출할때 그 메서드 내부에서의 this

a. 함수 vs 메서드

  • 함수는 그 자체로써 독립적 기능을 수행한다 ex) 함수명();
    함수에서 this는 전역객체
  • 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행 ex) 객체.메서드명();
    메서드에서 this는 호출의 주체 (여기선 객체)

b. this의 할당

// CASE1 : 함수
// 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미해요.
var func = function (x) {
	console.log(this, x);
};
func(1); // Window { ... } 1

// CASE2 : 메서드
// 호출 주체를 명시할 수 있기 때문에 this는 해당 객체(obj)를 의미해요.
// obj는 곧 { method: f }를 의미하죠?
var obj = {
	method: func,
};
obj.method(2); // { method: ƒ } 2

즉 case1은 함수 자체를 호출하기때문에 this는 전역객체
case2는 호출의 주체가 있기때문에 this는 해당객체인 obj를 의미함

c. 함수로서의 호출과 메서드로서의 호출 구분 기준: .[]
.으로 호출하든 []로 호출하든 결과는 같다.

var obj = {
	method: function (x) { console.log(this, x) }
};
obj.method(1); // { method: f } 1
obj['method'](2); // { method: f } 2

d. 메서드 내부에서의 this
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

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

a. 함수 내부에서의 this

  1. 어떤 함수를 함수로서 호출할 경우, this는 지정되지 않는다.(호출 주체를 알수 없기때문)
  2. 실행 컨텍스트를 활성화 할 당시 this가 지정되지 않은 경우,this 는 전역객체를 의미
  3. 따라서, 함수로서 '독립적으로' 호출할때는 this는 항상 전역객체를 의미한다.
profile
기호지세

0개의 댓글