러닝 자바스크립트 스터디 자료 - CHAPTER 9. 객체와 객체지향 프로그래밍

객체

배열과 마찬가지로 자바스크립트 객체 역시 컨테이너지만, 크게 보면 다음 두 가지 측면에서 배열과 다릅니다.
배열은 값을 가지며 각 값에는 숫자형 인덱스가 있습니다. 객체는 프로퍼티를 가지며 각 프로퍼티에는 문자열이나 심볼 인덱스가 있습니다.
배열에는 순서가 있습니다. 즉 arr[0] 는 항상 arr[1]보다 앞에 있습니다. 반면 객체에는 그런 순서가 보장 되지 않습니다.
obj.a가 obj.b보다 앞에 있다고 말할 수는 없습니다.

프로퍼티는 키(문자열 또는 심볼)과 값으로 구성됩니다. 객체의 특징은 키를 통해 프로퍼티에 접근할 수 있다는 점입니다.

프로퍼티나열

프로퍼티 나열에서 기억해야 할 것은 순서가 보장되지 않는다는 점입니다.
객체프로퍼티에는 순서가 없습니다.

Object.keys

Object.keys는 객체에서 나열 가능한 문자열 프로퍼티를 배열로 반환한다.

1
2
3
const SYM = Symbol();
const o = { a:1, b:2, c:3, [SYM]:4; }
Object.keys(o).forEach(prop => console.log(`${prop}: ${o{prop}}`));

객체의 프로퍼티 키를 배열로 가져와야 할때는 object.keys가 편리합니다.

객체지향 프로그래밍

객체지향 프로그래밍(OOP)은 컴퓨터 과학에서 전통적인 패러다임입니다.
OOP의 개념중 일부는 1950년대부터 있었지만 , 시뮬러 67과 스몰토크가 등장하면서 OOP의 형태가 갖춰지기 시작했습니다.
OOP의 기본아이디어는 단순하고 직관적이다. 객체는 데이터와 기능을 논리적으로 묶어 놓은겁니다.
OOP는 우리가 사물을 이해하는 자연스러운 방식을 반영하도록 설계됐습니다. 또한 OOP는 사물에 관해 추상적으로, 구체적으로 생각할 수 있게 합니다.

클래스는 어떤자동차 처럼 추상적이고 범용적인 것
인스턴스는 특정자동차 처럼 구체적이고 한정적인 것
메서드는 기능
클래스 메서드는 클래스에 속하지만 특정 인스턴스에 묶이지는 않는 기능
oop는 클래스를 계층적으로 분류하는 수단도 제공합니다.

클래스와 인스턴스 생성

클래스 문법
1
2
3
4
5
6
7
8
9
class Car {
let = a
constructor(b){
this.a = b
}
}

let c = new Car(3);
console.log(c.a)

클래스를 만들때 사용한 this 키워드는 나중에 만들 인스턴스의 플레이스 홀더입니다.
메서드를 호출하는 시점에서 this가 무엇인지 알 수 있게 됩니다.

클래스는 함수다

class 키워드를 도입하기 전까지 클래스를 만든다는 것은 곧 클래스 생성자로 사용할 함수를 만든다는 의미였다.
class 문법이 훨씬 더 직관적이고 단순하긴 하지만, 사실 class 는 단축 문법일 뿐이며 자바스크립트의 클래스 자체가 바뀐것은 아니다.
따라서 클래스 자체를 이해하는 것이 중요하다.
클래스는 사실 함수일 뿐이다.

1
2
function Es5Car {}
class Es6Car {}

클래스가 바뀐것이 아니라 간편한 새 문법이 생겼을 뿐이다.

프로토타입

클래스의 인스턴스에서 사용할 수 있는 메서드라고 하면 그건 프로토타입 메서드를 말하는 것이다.

최근에는 프로토타입 메서드를 #으로 표시하는 표기법이 널리 쓰입니다.
Car.prototype.shift 를 Car#shift 로 표기한다.

모든 함수에는 prototype이라는 특별한 프로퍼티가 있다.
일반적인 함수에서는 프로토타입을 사용할 일이 없지만
객체 생성자로 동작하는 함수에서는 프로토타입이 대단히 중요하다.
함수의 prototype 프로퍼티가 중요해지는 시점은 new 키워드로 새 인스턴스를 만들었을 때이다
new키워드로 만든 새 객체는 생성자의 prototype프로퍼티에 접근할 수 있습니다.
객체 인스턴스는 생성자의 prototype프로퍼티를 __proto__프로퍼티에 저장합니다.

프로토타입에서 중요한 것은 동적 디스패치하는 매커니즘입니다.
여기서 디스패치는 메서드호출과 같은의미입니다.
객체의 프로퍼티나 메서드에 접근하려 할 때 그런 프로퍼티나 메서드가 존재하지 않으면
자바스크립트는 객체의 프로토타입에서 해당 프로퍼티나 메서드를 찾습니다.

클래스의 인스턴스는 모두 같은 프로토타입을 공유하므로 프로토타입에 프로퍼티나 메서드가 있다면
해당 클래스의 인스턴스는 모두 그 프로퍼티나 메서드에 접근 할 수 있습니다.

인스턴스에서 메서드나 프로퍼티를 정의하면 프로토타입에 있는 것을 가리는 효과가 있습니다.
자바스크립트는 먼저 인스턴스를 체크하고 거기에 없으면 프로토타입을 체크하기 때문이다.

정적메서드

특정인스턴스에 적용되지 않는다.
정적메서드에서 this는 인스턴스가 아니라 클래스자체에 묶인다.
일반적으로 정적 메서드에는 this대신 클래스 이름을 사용하는 것이 좋은습관이다.
정적메서드는 클래스에 관련되지만 인스턴스와는 관련이 없는 범용적인 작업에 사용된다.

상속

클래스의 인스턴스는 클래스의 기능을 모두 상속한다. 상속은 한 단계로 끝나지 않는다.
객체의 프로토타입에서 메서드를 찾지 못하면 자바스크립트는 프로토타입의 프로토타입을 검색한다.
조건에 맞는 프로토타입을 찾을 때까지 프로토타입 체인을 거슬러 올라갑니다.
조건에 맞는 프로토타입을 찾지 못하면 에러를 일으킨다.

extends키워드는 Car를 Vehicle의 서브클래스로 만듭니다.

1
2
3
4
5
class Car extends Vehicle {
constructor(){
super();
}
}

super() 는 슈퍼클래스의 생성자를 호출하는 함수이다.
서브클래스에서는 이 함수를 반드시 호출해야 한다. 호출하지 않으면 에러가 난다. 상속은 단방향이다.

다형성

디형성이란? 객체지향 언어에서 여러 슈퍼클래스의 멤버인 인스턴스를 가리키는 말이다.

자바스크립트는 믹스인 방법을 사용한다.

댓글

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×