[JS] 객체 생성과 프로토타입

 

 

 

 

01. 객체의 생성

자바스크립트의 객체는 이름과 값을 한 쌍으로 묶은 집합입니다. 이름과 값이 한 쌍을 이룬 것을 프로퍼티라고 하고, 그것의 이름을 프로퍼티 이름 또는 키(key)라고 합니다. 

** 함수의 참조를 값으로 가진 프로퍼티는 메서드라는 이름으로 부릅니다. 

객체 리터럴로 생성하는 방법

var card = { suit: "하트" , rank: "A" };

 

생성자로 생성하는 방법

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

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

 

객체 리터럴로 생성하는 방법

var card = Object.create(Object.prototype,{
    suit: {
        value : "하트",
        writable: true,
        enumerable: true,
        configurable: true
	},
    rank: {
        value: "A",
        writable: true,
        enumerable: true,
        configurable: true
    }	
});

 

 

02. 프로퍼티 

 

생성자 안에서 메서드를 정의하는 방식의 문제점 

 

생성자 안에서 this 뒤에 메서드를 정의하면 그 생성자로 생성한 모든 인스턴스에 똑같은 메서드가 추가됩니다. 따라서 메서드를 포함한 생성자로 인스턴스를 여러 개 생성하면 같은 작업을 하는 메서드를 인스턴스 개수만큼 생성하게 되며 결과적으로 그만큼의 메모리를 소비하게 됩니다. 

🎃 이러한 문제는 프로토타입 객체에 메서드를 정의하는 방식으로 해결할 수 있습니다. 

 

function Circle(center, radius) {
	this.center = center;
        this.radius = radius;
        this.area = function() {
            return Math.PI*this.radius*this.radius;
    };
}

var c1 = new Circle({x;0, y:0}, 2.0);
var c2 = new Circle({x;0, y:1}, 3.0);
var c3 = new Circle({x;1, y:0}, 1.0);

 

프로토타입 객체

 

자바스크립트에서는 함수도 객체이므로 함수 객체가 기본적으로 prototype 프로퍼티를 갖고 있습니다. 

portotype 프로퍼티는 기본적으로 빈 객체를 가리킵니다. 

function F() {};
console.log(F.prototype); //-> object {}

프로토타입 객체의 프로퍼티는 생성자로 생성한 모든 인스턴스에서 그 인스턴스의 프로퍼티 처럼 사용할 수 있습니다. 

또한 프로토타입 객체의 프로퍼티는 읽기만 가능하고 수정이 불가능 합니다. 

F.prototype.prop = "prototype value";
var obj = new F();
console.log(obj.prop); //-> prototype value

인스턴스의 프로퍼티에 값을 대입했을 때 일므이 같은 프로퍼티가 있으면 그 프로퍼티에 값을 대입합니다. 그렇지 않을 때는 인스턴스에 그 이름으로 프로퍼티를 추가한 후에 값을 대입합니다. 

obj.prop = "instance value";
console.log(obj.prop); // -> instance value
console.log(F.prototype.prop); //-> prototype value

 

 

 

 

반응형

 

 

프로토타입 객체의 프로퍼티를 인스턴스에서 참조할 수 있는 상황을 가리켜 '인스턴스가 프로토타입 객체를 상속하고 있다'라고 하며 상속 구조는 '프로토타입 체인'이라는 메커니즘을 바탕으로 구현 되어 있습니다.

 

// Circle 생성자 
function Circle(center, radius) {
	this.center = cetner;
    	this.radius = radius;
}

// Circle 생성자의 protototype 프로퍼티에 area 메서드를 추가 
Circle.prototype.area = function(){
	return Math.PI * this.radius * this.radius;
};

// Circle 생성자로 인스턴스를 생성
var c1 = new Circle({x;0, y:0}, 2.0);
var c2 = new Circle({x;0, y:1}, 3.0);
var c3 = new Circle({x;1, y:0}, 1.0);

 

생성자의 프로토타입 객체에 메서드를 추가하면 인스턴스에 메서드를 추가하지 않아도 인스턴스가 프로토타입 객체의 메서드를 사용할 수 있으므로 메모리의 낭비를 피할 수 있습니다. 

 

 

메서드 체인

메서드가 객체를 반환하면 반환한 객체의 메서드를 호출 할 수 있습니다. 그러면 메서드를 다음과 같이 마침표 연산자로 계속 연결해서 실행 시킬 수 있습니다. 

 

객체.메서드1().메서드2().메서드3()....

 

이러한 표기법을 메서드 체인이라고 부릅니다. 객체를 한 번만 표기하고 관련 있는 메서드를 여러 개 호출하는 프로그래밍 스타일 입니다. 

 

 

 

 

참고문헌

📌 모던 자바스크립트 입문 책