24.01.08 TIL - This(1)

자바스크립트에서 중요한 this에 대해 공부한 내용을 정리하려고 한다

다른 객체지향 언어에서의 this는 클래스로 생성한 인스턴스를 말하지만, JS에서는 어디에서나 사용할 수 있다.

이전 프로젝트에서 프론트에서 활용도가 높다는 것을 느꼈고, 한번쯤 정리가 필요할 것 같았는데 이번 기회에 개념을 확립하겠다.

 

1. 상황에 따라 달라지는 this

 this는 실행컨텍스트가 생성될 때 결정된다. 이것을 thisbinding이라고 한다. 말하자면 함수를 호출할 때 결정된다.

 

* 전역공간에서의 this의 특징

i)  전역공간에서 this는 전역객체를 가리킨다.

ii) 런타임 환경에 따라 this는 window 혹은 global(node 환경)을 각각 가리킨다.

 

 

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

a. 함수 vs 메서드

함수는 그 자체로 독립적인 기능을 수행한다. 가령, 함수명(); 이런식으로 동작한다. 하지만 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행한다. 객체.메서드명(); 이런 형태이다.

 

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,
};
this.method(2); // { method: f } 2

 

c. 메서드 내부에서의 this

this에는  .으로 연결하든 []으로 연결하든 상관없이 호출을 누가 했는지에 대한 정보가 담긴다.

 

 

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

a. 함수 내부에서의 this

i) 어떤 함수를 함수로서 호출할 경우 this는 지정되지 않는다.

ii) 실행 컨텍스트를 활성화할 당시 this가 지정되지 않은 경우, this는 전역객체를 의미

iii) 따라서 함수로서 독립적으로 호출할 때는 this는 항상 전역객체를 가리킨다.

 

b.메서드 내부함수에서의 this

i) 메서드 내부라고해도 함수로서 호출한다면 this는 전역객체를 의미한다.

this바인딩은 함수를 실행하는 당시의 주변환경은 중요하지 않고 오직 해당함수를 호출하는 구문 앞에 점 또는 대괄호 표기가 있는지가 관건이다.

 

c.메서드의 내부 함수에서의 this 우회

i) 변수를 활용하는 방법

내부 스코프에 이미 존재하는 별도의 변수(ex. self)에 할당하는 방법

var obj1 = {
	outer: function() {
		console.log(this); // (1) outer

		// AS-IS
		var innerFunc1 = function() {
			console.log(this); // (2) 전역객체
		}
		innerFunc1();

		// TO-BE
		var self = this;
		var innerFunc2 = function() {
			console.log(self); // (3) outer
		};
		innerFunc2();
	}
};

// 메서드 호출 부분
obj1.outer();

 

ii) 화살표함수(=this를 바인딩하지 않는 함수)

ES6에서 처음 도입된 화살표 함수는, 실행 컨텍스트를 생성할 때 this 바인딩 과정 자체가 없다(따라서, this는 이전의 값-상위값-이 유지 / ES6에서는 함수 내부에서 this가 전역객체를 바라보는 문제 때문에 화살표함수를 도입

var obj = {
	outer: function() {
		console.log(this); // (1) obj
		var innerFunc = () => {
			console.log(this); // (2) obj
		};
		innerFunc();
	}
}

obj.outer();

 

 

4.콜백함수 호출 시 그 함수 내부에서의 this

콜백함수는 어떠한 함수ㆍ메서드의 인자(매개변수)로 넘겨주는 함수인데, 이때 내부의 this는 해당 콜백함수가 넘겨받는 함수나 메서드가 정한 규칙에 따라 값이 결정된다. 물론, 콜백함수도 함수기때문에 this는 전역객체를 참조하지만, 콜백함수를 넘겨받은 함수에서 콜백함수에 별도로 this를 지정한 경우는 예외적으로 그 대상을 참조하게 되어있다.

// 별도 지정 없음 : 전역객체
setTimeout(function () { console.log(this) }, 300);

// 별도 지정 없음 : 전역객체
[1, 2, 3, 4, 5].forEach(function(x) {
	console.log(this, x);
});

// addListener 안에서의 this는 항상 호출한 주체의 element를 return하도록 설계되었음
// 따라서 this는 button을 의미함
document.body.innerHTML += '<button id="a">클릭</button>';
document.body.querySelector('#a').addEventListener('click', function(e) {
	console.log(this, e);
});