[자바스크립트 객체지향]__proto__, Object.create()

1. __proto__

var superObj = {superVal:'super'}
var subObj = {subVal:'sub'}
subObj.__proto__ = superObj; //__proto__ 로 sub가 super의 자식이라고 지정해줌.
console.log(subObj.subVal)
console.log(subObj.superVal)
subObj.superVal = 'sub'
console.log(superObj.superVal) //객체 자체를 바꾼것일 뿐 proto를 바꾼건 아니기때문에 부모의 객체는 그대로임.

ㄱ객체를 다른객체의 자식으로 만드는? 원형을 가지게 하는 방법으로 __proto__가 있다.

subObj 의 __proto__로 superObj 를 지정함으로써 sub가 super를 상속받는다.

해서 console.log로 subObj에 부모(superObj)의 프로퍼티를 호출했을때 이것이 가능해 진다.

하지만 subObj.superVal = "sub" 처럼 자식에게 부모의 프로퍼티를 수정하게 하는건 객체 자체를 바꾸는것이지

proto를 바꾸는것은 아니다.

 

2. Object.create()

var superObj = {superVal:'super'}
var subObj = Object.create(superObj); //superObj를 부모로하는  subObj를 만든다.
subObj.subvale = 'sub';
console.log(subObj.subvale) //sub
console.log(subObj.superVal) //super

__proto__와 같은 효과를 내지만 덜 혼란스럽고 권장되는 방법이라는 Object.create()를 쓰는 방법이다.

위의

var subObj = {subVal:'sub'}
subObj.__proto__ = superObj;

이 구문을 

var subObj = Object.create(superObj);
subObj.subvale = 'sub';

이렇게 바꿔줌으로 동일하게 작동하게 된다.

 

 

/*예제*/
var kim = {
    name:'kim',
    first:10, second:20,
    sum:function(){return this.first+this.second}
}
//Object.create 를 이용한 방법
var lee = Object.create(kim);
lee.name = 'lee';
lee.first = 5;
lee.second = 5;
lee.avg = function(){
    return(this.first+this.second)/2
}

//__proto__ 를 이용한 방법 아래
// var lee = {
//     name:'lee',
//     first:5, second:5
// }
//lee.__proto__ = kim;

console.log(lee.sum()) //동작 방식 = lee에 sum이 있는가? 없다면 __proto__에는 있는가? 있다 그러면 그걸씀.
console.log(lee.avg())