JavaScript - 프로토타입(prototype)

프로토타입(prototype)의 이해...
- 객체들의 공유 공간

모든 객체들은 생성시 부모가 생긴다.

소스

// new Member로 생성된 객체에 대한 부모가됨
// function Member 함수 객체에 대한 프로토타입의 공간이 있다. Member의 프로토타입의 객체
function Member(id, name, email) {
	this.id = id;
	this.name = name;
	this.email = email;
	// 모든 객체에서 동일하게 쓰이는 info에 대한 프로토타입 활용
	this.info = function() {
		console.log(this.id, this.name, this.email);
	};
}
// 자식인 new Member 객체는 부모인 function Member의 프로토타입 공간을 접근 할 수 있음
// 자식 객체 생서이 부모의 프로토타입 공간에 접근할 수 있는 변수가 기본으로 할당된다.
// 크롬에서는 __proto__
var m1 = new Member("hong", "홍길동", "hong@a.com");
var m2 = new Member("kang", "강감찬", "kang@a.com");

console.log("m1 : ", m1);
console.dir(m1);

결과

m1 :  Member { id: 'hong', name: '홍길동', email: 'hong@a.com', info: [Function] }
Member { id: 'hong', name: '홍길동', email: 'hong@a.com', info: [Function] }

소스

// 모든 객체는 부모의 프로토타입을 가리키는 변수가 있으며, 최종 부모는 Object이다
// 부모객체 - 프로토타입 공간이 있음
function Member(id, name, email) {
	this.id = id;
	this.name = name;
	this.email = email;
	/* 각 객체에 할당하는 부분을 부모의 prototype 공간에 설정 (메모리 효율적)
	this.info = function () {
	    console.log(this.id, this.name, this.email)
	}
	 */
}
// 부모객체인 function Member의 proto영역에 info 정보를 설정
Member.prototype.info = function() {
	console.log(this.id, this.name, this.email)
}

// 자식객체 - 부모의 프로토타입에 접근할 수 있는 변수 __proto__
// constructor : 자기를 가리키는 변수
var m = new Member("hong", "홍길동", "hong@a.com");
var m2 = new Member("k", "김", "king@a.com");
console.dir(m);
// m 객체에 info function을 생성함
m.info = function() {
	console.log("info");
};
//m.id= // m 객체에 등록
//Member.prototype.info.id= // 부모의 프로토타입에 등록
console.dir(m.id);
// m 객체에 info가 없을 경우 부모의 프로토타입에서 info를 찾는다
// Member.prototype 공간 접근
// m에 있는 info를 호출
m.info();
// m2에 info가 없으니 부모에proto여역에서 info를 찾는다
m2.info();

결과

Member { id: 'hong', name: '홍길동', email: 'hong@a.com' }
'hong'
info
k 김 king@a.com

소스

function Member(id, name) {
	this.id = id;
	this.name = name;
}
// Member의 prototype 공간에 id, name에 대한 setter, getter를 정의 하자
// constructor 프로퍼티가 자동으로 할당된다.
Member.prototype.setId = function(id) {
	this.id = id
};
Member.prototype.getId = function() {
	return this.id
};
Member.prototype.setName = function(name) {
	this.name = name
};
Member.prototype.getName = function() {
	return this.name
};

console.dir(Member);

// propoty라는 객체에 정의해서 프로토타입에 설정
// constructor 프로퍼티가 생성되지 않는다
Member.prototype = {
	setId : function(id) {
		this.id = id
	},
	getId : function() {
		return this.id
	},
	setName : function(name) {
		this.name = name
	},
	getName : function() {
		return this.name
	}

}
// constructor를 직접 정의, 자기 자신을 가리키도록
Member.prototype.constructor = Member;
console.dir(Member);

결과

[Function: Member]
[Function: Member]

소스

function Member(id) {
	this.id = id;
}
// Member 객체에 msg 변수 추가
Member.msg = "aaa";

var m = new Member("hong");
console.log(m.msg); // undefined
console.log(Member.msg); // Member 펑션에 직접 접근해서 사용

결과

undefined
aaa