상속 Inheritance

• 라이브러리에서 코드를 따올 경우, 다른 사람 코드를 갖고 올 경우 등등 항상 그 코드가 변경될 소지가 있을 경우 내가 원하는 기능을 그 코드에 같이 묶어두면 비효율적일 때
• 이 코드를 모두에게 작동시키고 싶을 때
• 코드가 중복되지 않기 위해 -> 수정, 보완 용이
• 상속받으면서 추가할 수 있다 (super)
• 객체가 직접 다른 객체의 상속을 받을 수 있다
• 그 상속 관계를 바꿀 수도 있다 (prototype link 사용)

class를 사용한 상속

1. Person class가 있다

2. Person class + 새로운 코드 추가 시

• Person class를 그대로 놔둔 채 PersonPlus class를 만들고 그 안에 Person class의 코드와 새로운 코드 추가
• class Person 코드와 class PersonPlus 안의 코드 중복 발생
  

3. extends를 사용해 추가

• extends를 사용해 Person class 코드를 PersonPlus class에 넣을 수 있다

• Person class 코드와 더 추가하고 싶은 코드를 이렇게 추가하면 PersonPlus는 그대로 두고 Person class의 내용만 바꿀 수 있다

• 변수에 new PersonPlus를 할당한다
  

  • 값은
    prototype : 70
    prototype : 50
    35
    25

__proto__를 사용한 상속

• __proto__는 prototype link이다
• 객체를 다른 객체에게 상속
• 다른 객체의 자식이 된다
  -ex) design.__proto__= dress;
  design 객체가 dress 객체의 자식이 된다
  dress 객체가 design 객체의 부모가 된다
• 유연하지만 복잡하고 오류가 발생하는 경우도 많다

1.1

var dress = {name : 'weddingdress'};
var design = {color : 'white'};
design.__proto__ = dress;
console.log(design.name);
console.log(design.color);

-> 값은 weddingdress / white

• __proto__를 사용해 dress 객체 안에 design 객체를 추가
• dress 객체에서 color라는 프로퍼티를 찾아보지만 없다
• __proto__ 속성이 담고 있는 객체에서 color를 찾아서 출력

var dress = {name : 'weddingdress'};
var design = {color : 'white'};
design.__proto__ = dress;
design.name = 'dresss';
console.log(dress.name);

-> 값은 weddingdress

• design 객체의 값을 바꿨을 뿐 __proto__가 가리키는 객체를 바꾼 것이 이니기 때문에 weddingdress가 나온다

1.2

• park에 있는 sum()을 lee에서도 사용하고 싶을 때 (중복 제거)

var park = {
  name : 'park',
  first : 20,
  second : 30, 
  sum : function(){
    return this.first + this.second;
  }
}
var lee = {
  name : 'lee',
  first : 10,
  second : 20
}
lee.__proto__ = park;
console.log(park.sum());
console.log(lee.sum());

-> 값은 50 / 30

1.3

• lee에만 따로 함수를 주고 싶을 때

var lee = {
  name : 'lee',
  first : 10,
  second : 20
  avg : function() {
    return (this.first + this.second)/2;
  }
}
lee.__proto__ = park;
console.log(park.sum());
console.log(lee.sum());

Object.create()를 사용한 상속

• __proto__ 대체
• Object.create()를 사용해 객체와 객체 간의 상속 관계, prototype link를 지정해 주는 게 더 효율적
• 기존의 prototype을 삭제하고 새로운 prototype으로 만들어낸다

1.1 기본 문법

var A = {name : 'gogo'}
var B = Object.create(A);

• Object에게 객체를 만들어(create)
• A를 prototype 객체로 하는
• 그 객체는 B야
• 새로운 객체를 만드는데 그 새로운 객체는 (A)를 부모로 하는 새로운 객체(B)이다

1.2 __proto__를 Object.create()로

var dress = {name : 'weddingdress'};
var design = {color : 'white'};
design.__proto__ = dress;
var design = Object.create(dress);

1.3 __proto__를 Object.create()로

var park = {
  name : 'park',
  first : 20,
  second : 30, 
  sum : function(){
    return this.first + this.second;
  }
}
var lee = Object.create(park);
lee.name = 'name';
lee.first = 10;
lee.second = 10;
lee.avg = function() {
   return (this.first + this.second)/2;
}
console.log(park.sum());
console.log(lee.sum());

Super

• 상속을 할 경우 생기는 문제를 보완하기 위해 사용
• super를 사용하면 부모가 갖고 있는 기능을 실행할 수 있다

• super로 부모 코드를 가져올 때 두 가지 방법으로 사용
  -super() : super(매개변수)
  -ex) super(name, first, second)
  -super.함수명()
  -ex) super.sum()

1. 인자 하나 더 추가 시

• 원래는 name, first, second뿐이었는데 third 인자가 하나 더 추가됐을 때
  

2. 부모 class Person1에 추가 시

• 하나만 추가가 아니라 여러 개 추가 시 일일이 다시 추가해야 하는 불편함
  

3. 자식 class PersonPlus1에 추가 시

• 부모 class Person1에 있는 코드와 중복 사용된다
  

4. super 사용

• super를 사용해서 부모 코드를 가져오고, 추가
  

5. 결과 보기

var lee = new PersonPlus1('lee', 10, 20, 30);
console.log(lee.sum());
console.log(lee.avg());

-> 값은 60 / 20