생활코딩 객체 지향 프로그래밍 수업을 보며 정리한 내용입니다.

1. 객체의 상속

JavaScript의 class 문법이 아니라, 전통적인 방법으로 상속하는 방법을 알아보자!

① __proto__

다른 객체를 상속받기
(자바스크립트 표준에서는 이것을 표준으로 인정하고 있지만 브라우저들에서는 대부분 구현하고 있기 때문에 사실상으론 표준이라고 할 수 있기도 하다😅)

• superObj 라는 오브젝트를 constructor function이 아니라, 객체를 직접 만드는 방법으로 생성해보겠다.
• subObj.__proto__ = superObj; : __proto__ 라고 하는 property(속성)이 있는데, 그 값으로 superObj 를 지정해준다.

let superObj = {superVal : 'super'}
let subObj = {subVal : 'sub'}
// 여기까지(2줄)만 봤을 때는  superObj와 subObj는 그냥 남남이다! 


//그런데, 자바스크립트에서는 객체를 직접 다른객체의 자식으로 만들어버릴 수 있다. (__proto__ 이용)
subObj.__proto__ = superObj;    //prototype link를 정해주는 과정
console.log(subObj.subVal);     //출력: sub   (이건 이미 자기가 가지고 있는 값이다)
console.log(subObj.superVal);   //출력: super 
//--> "__proto__"  라고 하는  prototype link를 통해서 subObj가 superObj의 자식이 되었기 때문이다.

subObj.superVal = 'sub';        //이런다고해서 superObj의  superVal이 바뀌지는 않는다!
console.log(superObj.superVal); //super (바뀌지않았다)
//왜냐하면 subObj객체의 값을 바꿨을 뿐! __proto__가 가리키고 있는 객체(superObj)를 바꾼 게 아니까 때문이다!

→ 이렇게 __proto__ 의 값만 바꾸어 주면, 그 순간 이 객체는 다른객체의 자식이 되어버린다.
→ 하지만 이런 유연함이 항상 좋은 것은 아니고, 이로 인해 문제가 발생할 수도 있다. 그리고 여러 가지 복잡성 또한 존재한다.

② Object.create( )

__proto__ 의 대체제 이다. → Object의 create 메소드 이용

let superObj = {superVal : 'super'}

// let subObj = {subVal : 'sub'}
// subObj.__proto__ = superObj;   .. 이 두 줄의 코드를 아래코드로 대체해 보겠다!
let subObj = Object.create(superObj)  //인자로 superObj 지정!
subObj.subVal = 'sub'

superObj 를 부모로 하는 새로운 객체를 만드는 표준화 된 방법이다.
그러므로 underbar underbar proto underbar underbar 를 사용하는것보다는,
object.create( ) 를 사용해서 객체와 객체간의 상속관계(= 좀 더 명확하게 말하자면, proto link를 지정하는것)이 더 좋은 방법이라고 할 수 있다.

2. 객체상속의 사용

1번에서 배운 내용으로 Person 들을 만들어보자!

①__proto__ 사용해보기

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

let lee = {
  name: 'lee',
  first: 10, second: 10,
  
  avg: function(){
    return (this.first+this.second)/2;
  } //이렇게 lee 자신만의 메소드도 만들어 줄 수 있다.
}

lee.__proto__ = kim;
console.log(lee.sum()); //20
console.log(lee.avg()); //10

lee 객체 는 sum 메소드를 가지고 있지 않음에도 불구하고 이렇게 실행이 된다. 그 이유는? 🤔
→ lee.sum() 을 하게되면 자바스크립트는 lee 객체에게 sum이 있는지 찾아보고 있으면 실행,
→ 없으면 이 객체의 __proto__ 의 property로써 sum이 있는지 찾는다. (이때 여기에 있기 때문에 그게 실행이 되는거다.) 🚨 근데 이때의 this는 kim이 아니라 lee의 객체이다!!

뿐만 아니라 그냥 lee만 가지고 있는 새로운 메소드를 추가해주면 kim은 가지고 있지 않는 lee만의 기능도 갖을 수 있다. (ex avg )

② Object.create( ) 사용해보기

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

let lee = Object.create(kim);
lee.name = lee;
lee.first = 10;
lee.second = 10;
lee.avg = function() {
  return (this.first+this.second) / 2; 
}

console.log(lee.sum()); //20   
console.log(lee.avg()); //10