[JS] this에 대해 알아보자

개념

this란?

this를 사용하는 환경에 따라 this가 가리키는 것이 달라진다

- this 안에는 호출을 누가 했는지에 대한 정보가 담긴다

 

전역 공간에서의 this

전역 공간에서의 this = 전역 객체

 

전역 공간에서의 this는 전역 객체를 가리킨다

프로그램이 구동되는 환경에 따라 전역 객체도 달라진다

 

브라우저 환경일 경우, this = window

VS code의 환경 node일 경우, this = global

 

📌 Runtime

프로그램이 구동 중인 환경

VS code를 사용하고 있을 때, Runtime = node 환경

크롬을 사용하고 있을 때,  Runtime = 브라우저 환경

 

Method로서 호출할 때 Method 내부의 this

method의 this = 호출의 주체

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

 

 

📌 method(메서드)

객체 안에 포함된 함수 (= 객체의 속성으로 정의된 함수)

- 자신을 호출한 대상 객체에 대한 동작을 수행한다

 

📌 method(메서드)와 함수의 차이

method와 다르게 함수는 호출의 주체가 존재하지 않다

그렇기 때문에 함수 내에 있는 this는 전역 개체를 가리킨다

 

method는 호출의 주체가 존재하기 때문에

method 내에 있는 this는 호출의 주체를 가리킨다

 

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

함수 내부의 this = 전역 객체

 

함수를 함수로서 호출할 때는 this가 지정되지 않는다

호출 주체를 알 수 없기 때문이다

그렇기 때문에 함수로서 독립적으로 호출할 때, this는 항상 전역 객체를 가리킨다

 

Method 내부 함수의 this를 우회하는 방법

✦ 변수 활용하기

메소드 내부의 this는 호출의 주체를 가리키기 때문에 함수 생성하기 전에 self라는 변수에 this를 할당한다

함수를 생성했을 때 this 대신 self를 넣게 된다면, obj1을 계속 선택할 수 있다

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

		// AS-IS = 기존의 것
		var innerFunc1 = function() {
			console.log(this); // (2) 출력: 전역 객체
		}
		innerFunc1();

		// TO-BE = 이후의 것
		var self = this; // self라는 변수에 this(obj1)를 할당함
		var innerFunc2 = function() {
			console.log(self); // (3) 출력: obj1
		};
		innerFunc2();
	}
};

obj1.outer();

 

✦ 화살표 함수 이용하기

화살표 함수는 this 바인딩을 하지 않는다

this 바인딩 과정을 거치지 않기 때문에 이전의 this가 가리키고 있던 obj1을 그대로 유지한다

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

obj.outer();

 

생성자 함수 내부의 this

생성자 함수 내부의 this = 새롭게 생성된 인스턴스

 

생성자를 통해 새로운 인스턴스(= 객체)가 생성된다

이때 this는 새롭게 생성된 인스턴스를 가리킨다

새로운 인스턴스를 만들 때마다 this가 가리키는 것이 달라진다

var Cat = function (name, age) {
	this.bark = '야옹';
	this.name = name;
	this.age = age;
};

// 새로운 인스턴스 생성
var potato = new Cat('초코', 7); //this : potato
var ggang = new Cat('나비', 5);  //this : ggang

 

 

필요한 이유

this 객체 내부의 속성과 method를 참조하기 위해서 필요한 존재이다