'__proto__' (=관습적으로 써온 상속관계)

'__proto__' 

 

<형태>

lee.__proto__ = kim;

lee는 kim의 자식이다

// class 문법이 아니라 아주 관습적(prototype)으로 상속하는 방법
let superObj = {superVal:'super'}
let subObj = {subVal:'sub'}

// 자바스크립트의 굉장히 유연한 특징!
// 마음대로 누군가의 자식이 될 수 있다
subObj.__proto__ = superObj; // '__proto__'라는 링크를 걸어줌: subObj는 선조는 superObj이다

console.log('subObj.subVal =>',subObj.subVal);
console.log('subObj.superVal =>',subObj.superVal);// 객체 subObj가 superVal이라는 속성을 가지는 지 찾아봄. 없다, 그러면 '__proto__'으로 연결된 superObj 속에서 찾는다
//subObj.subVal => sub
//subObj.superVal => super

subObj.subVal = 'sub';
//superObj 값이 바뀔까?
console.log('superObj.superVal =>',superObj.superVal);
//superObj.superVal => super
//superObj의 값이 여전히 super!, 자식은 부모를 못바꾼다

 

예시

 

let superObj = {superVal:'super'}
//let subObj = {subVal:'sub'}
//subObj.__proto__ = superObj; 

let subObj = Object.create(superObj);
subObj.subVal = 'sub';
debugger;
console.log('subObj.subVal =>',subObj.subVal);
console.log('subObj.superVal =>',subObj.superVal);
subObj.subVal = 'sub';
console.log('superObj.superVal =>',superObj.superVal);


//'__proto__ ' 버전의 객체상속
let kim = {
    name:'kim',
    first:10, second:20,
    sum:function(){return this.first+this.second}// 아래의 콘솔이 실행될때, 여기서의 this는 kim이 아니라, lee다
}

let lee = {
    name: 'lee',
    first: 10, second:10,
   avg:function(){
        return (this.first + this.second)/2;
    }
}

//sum은 또 쓰기 싫어요!
lee.__proto__ = kim; //lee는 kim의 자식이다
console.log('lee.sum():', lee.sum());//먼저, lee라는 객체에 sum이 있는지를 찾아본다. 없다면, '__proto__'로 연결된 kim에 sum이 있는지를 찾는다. 
// 객체 lee는 sum이라는 메소드를 가지고 있지 않지만, 실행이 될까? ㅇㅇ
// lee.sum(): 20

console.log('lee.avg():', lee.avg());
//lee는 kim이 가지지 않는 avg 라는 기능도 가질 수 있다