객체 리터럴과 this

자바스크립트의 객체를 활용하여 비슷한 행위를 하는 코드를 묶어 모듈화 할 수 있다. 객체로 모듈화하여 자바스크립트에서 객체지향 프로그래밍을 할 수 있다.

 

 

자바스크립트의 객체는 { 키 : 값 } 같은 해시 맵 구조(딕셔너리라고도 한다)의 형태이다.

 

 

 

 

1. 객체 리터럴

 

자바스크립트에선 객체 리터럴이라는 표현식으로 객체를 쉽게 만들 수 있다.

 

var healthObj = {
	name : "달리기",
	lastTime : "PM10:12",
	showHealth : function() {
		console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
	}
}

healthObj.showHealth();

 

이런 형태를 객체 리터럴이라고 한다.

 

 

※ 참고 : ES6에서는 객체에서 메서드를 사용할 때 function 키워드를 생략할 수 있다.

var healthObj = {
	name : "달리기",
	lastTime : "PM10:12",
	showHealth() {
		console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요");
    }
}

 

 

 

 

2. this

 

자바스크립트에서는 전역 스크립트나 함수가 실행될 때 실행 문맥 (Execution context)이 생성된다.

모든 context에는 참조하고 있는 객체가 존재하는데,

this는 현재 context가 참조하고 있는 객체를 가리킨다.

 

위의 객체 리터럴 예제에선 this가 healthObj를 가리킨다.

healthObj.showHealth();가 실행됐을 때, healthObj 객체의 showHealth() 함수가 실행되고, showHealth()의 this는 showHealth 함수를 뭘로 부른 것인지 찾는다. healthObj 안에서 불린 것이므로 this는 healthObj를 가리키게 된다.

 

 

 

var todo = {
	todos : [],
	addTodo : function(newTodo) {
		this.todos.push(newTodo)
	},
	showTodo : function() {
		return this.todos;
	}
}

 

위의 todo 객체의 addTodo나 showTodo 함수를 호출하면 원하는 결과가 나올 것이다.

 

 

others 객체를 만들고

 

var others = {
	todos : "탈출 총총"
}

 

todo.showTodo.call(others);

 

위 코드를 실행한다면?

 

"탈출 총총"이다.

call 메서드에 의해, todo.showTodo의 this가 others 객체로 바뀌었기 때문이다.

 

이렇게 this가 가리키는 것은 바뀔 수 있다.

 

 

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- 객체 리터럴과 this