[Javascript] __proto__ 와 상속

► Object(객체)에서의 상속 

보통은 class 단계에서 상속을 받고 상속을 받은 class 가 object를 만들지만

자바스크립트에서는 객체 자체를 상속받을 수 있음

 

 

 

 

prototype link

 : 객체의 상속을 연결해주는 링크

 

prototype object

 : sub object가 상속을 받은 객체

 

 

 

 

 

출처)opentutorials.org/module/4047/24626

 

 

 

 

 

---

객체와 객체 상속

실행되는 

__proto__

 

예제1)

var superObj = {superVal:'super'}
var subObj = {subVal :'sub'}

subObj.__proto__ = superObj;

console.log("subVal",subObj.subVal); //sub
console.log("superVal",subObj.superVal); //super

 __proto__ : prototype link를 걸어 객체 상속 시키기 가능 

 

1) subObj 에서 superVal 찾기

2) subObj.__ptoro__ 에 담긴 객체 (superObj)에서 superVal찾기

 

단!

subObj.superVal = 'sub';
console.log("super의 superVal",superObj.superVal); //super

subObj.superVal 의 값을 바꾼다고, superObj의 superVal 이 변하진 않는다.

 

 

예제2)

kim = {
    name:'kim',
    first:10,
    second:20,
    sum: function(){return this.first +this.second;}
}


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

lee.__proto__=kim;

 

---

Object.create()

var superObj = {superVal:'super'}

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

//디버깅을 하기 위함
debugger;

console.log("sub의 subVal",subObj.subVal); //sub
console.log("sub의 superVal",subObj.superVal); //super
subObj.superVal = 'sub';
console.log("super의 superVal",superObj.superVal); //super

subObj는 superObj를 상속받은 객체

 

 

크롬 개발자도구 (Mac : command ⌘ + opt⌥ + i )  -> Watch ( + superObj, subObj)  에서 확인할 수 있다.

subObj의 __proto__ 는 superObj 

예제2)

kim = {
    name:'kim',
    first:10,
    second:20,
    sum: function(){return this.first +this.second;}
}

var lee = Object.create(kim);

lee.name = 'lee'
lee.first=10;
lee.second=10;

 

 

 

 

 

---