자바스크립트 객체
2018-02-14
1. 프로퍼티 나열
- 프로퍼티는 키(문자열 또는 심볼)과 값으로 구성된다
- 객체 프로퍼티에는 배열처럼 순서가 보장되지 않는다
1-1. for…in
- for…in 루프에는 키가 심볼인 프로퍼티는 포함되지 않음
- for…in은 인덱스 순서가 중요한 배열을 반복하는데 사용하면 안됨. 배열은 for나 forEach를 사용
for(variable in object){
...
}
1-2. Object.keys
- 객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환
- hasOwnProperty() 체크할 필요 없음
- Object.keys 예제
2. 객체지향 프로그래밍
2-1. 클래스와 인스턴스 생성
- ES6에서 클래스를 만드는 새 문법을 도입함
- 함수를 함수표현식과 함수선언식으로 정의할 수 있듯이, class 문법도 class 표현식과 class 선언 두 가지 방법을 제공함
- 단 함수 선언의 경우 호이스팅이 일어나지만, 클래스 선언은 그렇지 않다.
- class 선언 예제
- class 표현 예제
2-2. 프로토타입(인스턴스 메서드)
- 클래스의 인스턴스에서 사용할 수 있는 메서드
- 프로토타입 메서드는 Dog.prototype.speak와 같이 표기할 때가 많다(Array.prototype.forEach)
- new 키워드로 만든 새 객체는 생성자의 prototype 프로퍼티에 접근할 수 있으며, 객체 인스턴스는 생성자의 prototype 프로퍼티를 proto 프로퍼티에 저장한다.
- 프로토타입 예제
2-3. 정적 메서드(클래스 메서드)
- 정적 메서드는 클래스의 인스턴스 없이 호출이 가능하며 클래스가 인스턴스화되면 호출할 수 없다. 정적 메서드는 종종 어플리케이션의 유틸리티 함수를 만드는데 사용된다.
- 정적 메서드에는 this 대신 클래스 이름을 사용하는 것이 바람직하다.
- 클래스에는 관련이 있지만 인스턴스와는 관련이 없는 경우 사용
- 동일한 클래스 내의 다른 정적 메서드 내에서 정적 메서드를 호출하는 경우 키워드 this를 사용할 수 있다.
- 정적 메소드 예제
2-4. 상속
- 클래스의 인스턴스는 클래스의 기능을 모두 상속함
- 객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색함(프로토타입 체인)
- 서브클래스에서는 super()를 반드시 호출해야함. 호출하지 않으면 에러 발생
- 상속 예제
2-5. hasOwnProperty()
- hasOwnProperty 사용 의미
- hasOwnProperty 예제
3. 믹스인
- 자바스크립트가 다중 상속이 필요한 문제에 대한 해답으로 내놓은 개념이 믹스인(mixin)이다.
- 프로퍼티만 상속받고 클래스 상속은 받고 싶지 않을때 믹스인 패턴을 이용하면 된다.
function mixin(receiver, supplier){
for(var property in supplier){
if(supplier.hasOwnProperty(property)){
receiver[property] = supplier[property]
}
}
return receiver;
}
- receiver는 supplier로부터 프로토타입을 복사받는다.