[Javascript] 프로토타입 상속

[[prototype]]

자바스크립트에서 객체는 [[prototype]] 라는 숨겨저있는 프로퍼티를 가지고 있음 

 

[[prototype]] 의 값은 null 또는 다른 객체의 참조가 되는데, 이 참조가 되는 대상을 '프로토타입(prototype)' 라고 함

 

자바스크립트에서는 객체가 프로퍼티를 읽으려고 할때 존재하지 않으면 [[prototype]]에서 참조하고 있는 객체에서 프로퍼티를 자동으로 찾음. 이러한 동작 방식을 '프로토타입 상속' 이라고 함

 

[[prototype]] 를 통해 다른 객체를 참조하려면 [[prototype]]의 getter, setter 인 __proto__ 를 통해 참조할 수 있음

let person = {
	name:'park',
    age:25
}

let co_worker = {
	position:'manager'
}

//__prototype__를 이용해 co_worker의 [[prototype]] 에서 참조하는 객체를 person으로 설정
co_worker.__proto__ = person;

//co_worker에는 name프로퍼티가 없지만 참조객체인 person을 통해 name의 값을 가져옴
console.log(co_worker.name);

 

 

[[prototype]] 사용 시 주의할 점은 어떤 객체를 참조하고 있는 객체의 this는 참조하는 객체가 아니라 자기 자신이라는 점임

 

참조하고 있는 객체에서 참조하는 객체의 프로퍼티의 값을 바꾸면 챔조하고 있는 객체의 값이 바뀌는 것이고 참조되는 객체의 값이 바뀌는 것이 아님을 알 수 있음

let obj = {
	objVal:10,
   	getVal(){
    	return this.objVal;
    }
}

//obj를 참조
let ref_obj = {
	__proto__:obj
}

//ref_obj 의 objVal프로퍼티의 값을 20 으로 변경
ref_obj.objVal = 20;

console.log(obj.getVal());
console.log(ref_obj.getVal());

 

위 코드에서 obj 를 참조하고 있는 ref_obj의 objVal의 값을 바꿔주었는데 obj 의 프로퍼티는 값이 변하지 않고 ref_obj의 값만 바뀐 것을 알 수 있음

 

즉 obj 의 this 와 ref_obj 의 this는 다른것을 알 수 있음

 

상속 프로퍼티의 for .. in

__proto__ 를 이용해 상속시킨 프로퍼티들도 for in 으로 순회 대상에 포함

let person = {
	
    name:'park',
    age:24
}

let student = {
	
    grade:'A+',
    __proto__:person
}

for(let key in student){
	
    console.log(`${key} : ${student[key]}`)
}

 

 

object.hasOwnProperty(property) 를 사용하면 상속받은 프로퍼티인지 아닌지 확인할 수 있음

let person = {
	
    name:'park',
    age:24
}

let student = {
	
    grade:'A+',
    __proto__:person
}

for(let key in student){
	//true일 경우 자기 자신의 프로퍼티 , false일 경우 상속받은 프로퍼티
	let boo = student.hasOwnProperty(key);
    boo ? console.log(`자신의 프로퍼티 ${key}`):console.log(`상속받은 프로퍼티 ${key}`)
}

 

 

참조: https://ko.javascript.info/prototype-inheritance