[JavaScript] 06-1. 객체 지향 프로그래밍 - 객체에 대한 이해

< 프론트엔드 개발자를 위한 자바스크립트> (2013 인사이트, 한선용 옮김) 의 책을 요약한 내용으로 자바스크립트 제대로 배우기 스터디 그룹(페이스북) 의 글입니다.

* 자바스크립트 제대로 배우기 스터디 그룹의 커리큘럼에 따라 6장을 먼저 정리합니다. 또한 단원간 파트가 길어짐에 따라 단원의 한파트별로 정리할 생각입니다.

이 장에서 다루는 내용

- 객체 프로퍼티의 이해

- 객체의 이해와 생성

- 상속의 이해

- 객체지향(Object-oriented : OO) 언어는 일반적으로 클래스를 통해 같은 프로퍼티와 메서드를 가지는 객체를 여러 개 만든다는 특징이 있다.

- ECMAScript에는 클래스라는 개념이 없으며 이에 따라 ECMAScript의 객체는 다른 클래스 기반 언어와 다르다.

- ECMAScript는 객체를 "프로퍼티의 순서 없는 컬렉션이며 각 프로퍼티는 원시값이나 객체, 함수를 포함한다" 라고 정의한다.

- 객체는 이름-쌍의 그룹이며 각 값은 데이터나 함수가 될 수 있다.

6.1 객체에 대한 이해

- 객체를 만드는 가장 단순한 방법은 object의 인스턴스를 만들고 여기에 프로퍼티와 메서드를 추가하는 방법이다.

 
var person = new Object();
person.name = "현상금10원";
person.age = "21";
person.job = "student";

person.sayName = fucntion(){
alert(this.name);
};

- 최근에는 리터럴 표기법을 이용해서 다음과 같이 더 많이 표시한다.

 
var person = {
name: '현상금10원",
age : 21,
job : '학생';

sayName : function() {
alert(this.name);
}
};

6.1.1 프로퍼티 타입

- ECMA-262 5판에서는 프로퍼티의 특징을 내부적으로만 유효한 속성에 따라 설명

- 명세에서 속성이 자바스크립트 엔진 내부에서 구현하는 것으로 정의하였으므로 이들 속성을 자바스크립트에서 직접적으로 접근할 수 있는 방법은 없다.

- 프로퍼티에는 데이터 프로퍼티와 접근자(accessor) 프로퍼티 두 가지 타입이 있다.

* 데이터 프로퍼티

- 데이터 프로퍼티는 데이터 값에 대한 단 하나의 위치를 포함하여 이 위치에서 값을 읽고 쓴다.

- 4가지 속성이 존재하는데 아래와 같다.

1. [[Configurable]] - 해당 프로퍼티가 delete를 통해 삭제하거나, 프로퍼티의 속성을 바꾸거나, 접근자 프로퍼티로 변환할 수 있음을 나타낸다. 이 속성은 기본적으로 true이다.

2. [[Enumerable]] - for-in 루프에서 해당 프로퍼티를 반환함을 나타낸다. 이전 예제처럼 객체에서 직접 정의한 모든 프로퍼티에서 이 속성은 기본적으로 true이다.

3. [[Writable]] - 프로퍼티의 값을 바꿀 수 있음을 나타낸다. 이전 예제처럼 객체에서 직접 정의한 모든 프로퍼티에서 이 속성은 기본적으로 true이다.

4. [[Value]] - 프로퍼티의 실제 데이터 값을 포함한다. 프로퍼티의 값을 읽는 위치이며 새로운 값을 쓰는 위치이다. 이 속성의 기본 값은 undefined이다.

* IE참고사항

- IE는 8버전부터 Object.defineProperty()를 구현했지만 매우 제한되어 있다. (사용 비추)

* 접근 프로퍼티

- 접근자 프로퍼티에는 데이터 값이 들어 있지 않고 getter 함수와 setter 함수로 구성된다.

- 접근자 프로퍼티를 읽을 떄는 getter함수가 호출되며 유효한 값을 반환할 책임은 이 함수에 존재

- 접근자 프로퍼티에 쓰기 작업을 할 때는 새로운 값과 함께 함수를 호출하며 이 함수가 데이터를 어떻게 사용할지 결정

- 접근자 프로퍼티에는 4가지 속성이 있는데 아래와 같다.

1. [[Configurable]] - 해당 프로퍼티가 delete를 통해 삭제하거나, 프로퍼티의 속성을 바꿀 수 있거나, 데이터 프로퍼티로 바꿀 수 있음을 나타낸다. 객체에서 직접 정의한 모든 프로퍼티에서 이 속성은 기본적으로 true이다.

2. [[Enumerable]] - for-in 루프에서 해당 프로퍼티를 반환함을 나타낸다. 객체에서 직접 정의한 모든 프로퍼티에서 이 속성은 기본적으로 true이다.

3. [[Get]] - 프로퍼티를 읽을 때 호출할 함수. 기본값은 undefined.

4. [[Set]] - 프로퍼티를 바꿀 때 호출할 함수. 기본값은 undefined.

- 접근자 프로퍼티를 명시적으로 정의할 수는 없으며 반드시 Object.defineProperty()를 써야한다.

6.1.2 다중 프로퍼티 정의

- 객체에서 프로퍼티 여러 개를 동시에 수정해야 할 가능성이 높으므로 ECMAScript 5판에서는 Object.definePropertise()를 제공한다.

- 이 메서드를 이용해 여러 프로퍼티를 한 번에 정의 가능

- 매개변수는 프로퍼티를 추가하거나 수정할 객체, 그리고 프로퍼티 이름과 대응하는 객체 두가지이다.

- IE9.0 파이어폭스4, 사파리 5, 오페라 12 그리고 크롬에서 Object.definePropertise() 메서드를 지원한다.

6.1.3 프로퍼티 속성 읽기

- ECMAScript 5의 Object.getOwnPropertyDescriptor() 메서드를 이용해 원하는 프로퍼티의 서술자 프로퍼티를 읽을 수 있다.

- 이 메서드는 읽어올 프로퍼티가 포함된 객체, 서술자를 가져올 프로퍼티 이름 두 가지 매개변수를 받는데 반환 값은 해당 프로퍼티의 성격에 따라 다르다.

- 접근자 프로퍼티에서는 configurable과 enumerable, get, set을 프로퍼티로 포함하는 객체를 반환하며 데이터 프로퍼티에서는 configurable과 enumerable, writable, value를 프로퍼티로 포함하는 객체를 반환한다.

- Object.getOwnPropertyDescriptor() 메서드는 자바스크립트의 모든 객체에서 사용 가능하며 DOM이나 BOM 객체로 해당된다.

- IE9, 파이어폭스4, 사파리5, 오페라12 그리고  크롬에서 이 메서드를 지원.

* 정리후기

- 확실히 입문 책보다는 내용이 난해합니다. 항상 프로그래밍 공부하면서 난해한점 중 하나가 영어로 쓰이는 프로그래밍 언어들이 한글로 번역했을 때 어떤 말인지, 그리고 이게 어디에 쓰이는가가 가장 어려운것 같습니다.