[javascript] 객체, 생성자, 프로토타입 관련

(참고: 모던 자바스크립트 입문)

 

 

 

객체(object)

 

"객체(object)"란 이름(key)과 값(value)을 한 쌍으로 묶은 데이터를 여러 개 모은 것. 데이터 여러 개를 하나로 모은 복합 데이터로 '연관 배열'이라고도 부른다. 이 때 프로퍼티는 객체에 포함된 데이터 하나(이름과 값의 쌍)를 의미하고, 프로퍼티는 프로퍼티 이름(혹은 키)과 프로퍼티 값으로 이루어진다.

 

객체지향 언어에서,
비슷한 형태를 가진 객체를 여러 개 만들고 싶을 때, 그 비슷한 형태들을 정의한(공통된 특성일 수도 있고 아닐 수도 있음) 클래스를 먼저 만들고, 그 클래스를 통해서 각각의 객체를 생성한다. 클래스는 마치 거푸집, 빵틀 같은 느낌?.. 으로 이해하면 됨.

 

 

 

생성자(constructor)

 

인스턴스를 생성하는 데 사용하는 함수 (new 연산자로 객체를 생성할 것이라 기대하고 만든 함수)

function Card(suit, rank) {
    this.suit = suit;
    this.rank = rank;
}

var card = new Card("하트", "A")

 

여기에서 생성자는 "Card" 함수이다. 

 

생성자는 객체를 생성하고 초기화하는 역할을 한다. 생성자를 통해 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 간단히 생성할 수 있는데, 만약 생성자가 없다면, 하나하나 객체마다 같은 내용 타이핑을 다 해줘야 하는 수고로움이 있다.

 

생성자와 new 연산자로 생성한 객체를 그 생성자의 인스턴스라고 한다. 영단어 instance 의미대로 '실체' 혹은 '현재 생성된 바로 그 (객체)'라는 의미를 가진다.

var Card1 = new Card("하트", "A");
var Card2 = new Card("클럽", "K");
var Card3 = new Card("스페이드", "2");

 

 

프로토타입

 

모든 객체는 기본적으로 prototype 프로퍼티를 갖는다. (함수 역시도 객체이므로 당연히 prototype 내부 프로퍼티를 가짐)

function Circle(center, radius) {
    this.center = center;
    this.radius = radius;
}
// Circle 생성자의 prototype 프로퍼티에 area 메서드를 추가
Circle.prototype.area = function() {
    return Math.PI*this.radius*this.radius;
};
// Circle 생성자로 인스턴스 생성
var c1 = new Circle({x:0, y:0}, 2.0);
var c1 = new Circle({x:0, y:0}, 3.0);

 

위 코드의 인스턴스 c1, c2에는 area 메서드가 존재하지 않지만 area 메서드를 사용할 수 있다. -> 프로토타입 상속

모든 객체는 내부 프로퍼티 '_ _ proto _ _'를 갖는다. 이는 그 객체에게 상속을 해 준 부모 객체를 가리키고, 객체는 _ _ proto _ _프로퍼티가 가리키는 부모 객체의 프로퍼티를 사용할 수 있다