[JavaScript] JS의 this

개요

JS의 this 는 전통적인 프로그래밍 언어의 this와 다른 양상을 띈다.

이러한 this 의 역할을 잘 이해하고 사용하는 것이 중요하다.

JS 강의 영상에 설명이 잘 되어 있어, 이번 포스팅을 통해 정리해본다.

 

---

this

 

this 는 호출한 객체를 가리키는 키워드이다. 즉, 호출하는 방법에 의해 결정된다.

 

let person = {
	name: 'sebin',
	age: 20,

	printThis: function () {
		console.log(this); // person 객체 출력

		console.log('this === person: ', this === person);
		console.log('this === window: ', this === window);
	},
};

// 그냥 함수 호출하면 this === person : true
person.printThis();

// 어떤 변수에 할당해서 호출하면 this === window : true
let printThis = person.printThis;

 

window는 브라우저의 최상위 객체로 이를 이해하기 위해 BOM에 대해 알아야 한다.

---

BOM & window

• JS에서 this는 호출한 객체를 가리키는데, 만약 호출한 값이 없을 경우는 window 객체이다.

 

BOM(Browser Object Model)

웹 브라우저를 스크립트 언어로 제어하기 위해서 브라우저를 객체화한 것이다. 우리가 키보드 마우스로 윈도우 창에서 여러 컨트롤을 수행하듯이, JS같은 Script 언어로 브라우저를 제어하기 위해서 생겨난 것이 브라우저 객체 모델이다.

 

브라우저 객체의 종류와 제어 방법

• window: 모든 객체의 최상위 객체이며, 브라우저 창을 의미한다.
• document: 현재 접속해있는 웹 파이지 그 자체이다. (웹 페이지의 HTML 요소에 접근하려면 document.getElementByClassName 등으로 접근 가능하다.)

window 객체

• alert(): 브라우저 알림창
• confirm(): 브라우저 확인/취소 선택창
• prompt(): 브라우저 입력 창

 

---

bind

• this 를 bind 함수를 통해 this 가 담은 객체를 변경할 수 있다.

function printThis() {
	console.log(this); // default this => window인데 bind를 통해 person1으로 변경
}

let person1 = {
	name: 'chu';
};

let person2 = {
	name: 'kim';
};

let printThis1 = printThis.bind(person1);

// 아래와같은 코드는 불가능하다. bind는 딱 한번만 가능하기 때문.
let printThis2 = printThis1.bind(person2); 

printThis2()  // this === person1

 

 

---

콜백 함수를 부르는 위치에 따라서 this의 객체가 결정

let person = {
	name: 'ccc',
	age: 20,
	hello: function() {
		//  이렇게 function Name() 여기 Name없이 쓰는 걸 익명함수라고 한다.
		setTimeout(function () {
			console.log(this); // 이 값은 printHello라는 함수 객체를 가르키기 때문에 window 반환
		}, 1000);
	},
};

person.hello();

/* 따라서 아래와 같이 person 객체로 바인드를 해주어야 한다. */
let person = {
	name: 'ccc',
	age: 20,
	hello: function() {
		function printHello() {
			console.log(this); // 이 값은 printHello라는 함수 객체를 가르키기 때문에 window 반환
		}
		setTimeout(printHello.bind(this), 1000}
	},
};

person.hello();

 

---

화살표 함수에 따라 달라지는 this의 객체

화살표 함수는 자기 자신이 정의된 상위 함수(객체)의 this 를 계승 받는다.

아래 코드는 hello: function()이 person에 정의되었기에 this는 person이다.

이에 영향을 받아 setTimeout 메소드 내부의 this 또한 person이 되는 것이다.

let person = {
	name: 'ccc',
	age: 20,
	hello: function() {
		setTimeout(() => {
			console.log(this); // 여기서 this는 person
		}, 1000);
	},
};