[JS] 객체지향 2 ( Create, Class )

 

 

 

 

---

🔗  Prototype 정리

https://manon-kim.tistory.com/129

[JS] 객체지향 (Constructor, Prototype)

 

 

 

---

 

ES5  -  Object.create( )

 

 

Object.create()

: ES5 때 나온 상속이용하여 쉽게 object 만드는 방법

 

Object.create(부모object) : 소괄호안에 적은 부모 object가 prototype이 된다.

let 부모 = { name : 'Kim', age : 50 };
let 자식 = Object.create(부모);

console.log(자식.age);
//출력 : 50

 

 

자식이 속성을 바꾸고싶으면 값을 새로 부여해주면 된다.

let 부모 = { name : 'Kim', age : 50 };
let 자식 = Object.create(부모);
자식.age  = 20;

console.log(자식.age); 
//출력 : 20

 

 ? 왜 부모의 상속값이 출력되지않음 ?

 : javascript object 자료형에서 특정 자료를 꺼낼 때 묻는 순서가

 1. 해당 object가 직접 그 값을 가지고있으면 그거 출력

 2. 없으면 부모의 prototype 에서 찾아서 출력

 3. 또 없으면 부모의 부모 (...반복...) 해서 출력한다.

 

 

 

이런식으로 자식의 손주까지 가능~

let 부모 = { name : 'Kim', age : 50 };
let 자식 = Object.create(부모);
자식.age  = 20;

let 손자 = Object.create(자식);

console.log(손자.age);
// 출력 : 20

 

 

 

 

 

 

 

 

 

 

 

ES6  -  Class / construtor

 

 

class / construtor

: ES6 class 신문법으로 constructor 생성

  이렇게 class로부터 새로 생성된 object를 instance라고 한다.

class 부모 {
  constructor(){
    this.name = 'Kim'
  }
}

let 자식 = new 부모();

 

 

 

상속가능한 함수 추가 방법 2가지

 

1. constructor 안에 추가

class 부모 {
  constructor(){
    this.name = 'Kim';
    this.sayHi = function(){ console.log('hello') }
  }
}

let 자식 = new 부모();

 

 

2. prototype에 추가

   : object에 함수 추가 하듯이 하거나

class 부모 {
  constructor(이름, 나이){
    this.name = 이름;
    this.age = 나이;
  }
  sayHi(){
    console.log('Hi');
  }
  sayHello(){
    console.log('Hello');
  }
}

let 자식 = new 부모('Park', 28);

 

  부모.prototype.sayHi = function ( ) { } 로 해도된다.

 

 

 

 

 

Class - extends / super

 

 

 

🔻 다른 class를 상속해서 새로운 class를 만들 때 extends를 쓴다.

extends한 class에서는 super( )를 추가한다.

super는 'extends로 상속중인 부모 class의 constructor()'을 의미한다.

 

 

super에는 상속받은 class의 파라미터를 그대로 추가해줘야한다. (파라미터 작명은 자유롭게 가능)

// 기존 class
class dog {
  constructor(a, b) {
    this.type = a;
    this.color = b;
  }
}

// 기존 dog class를 가져와서 새로운 class 생성
class cat extends dog {
  constructor(c) {
    super();
    this.age = c;
  }
}

 

 

class간에 함수 상속받기

: 똑같이 super로 가져온다.

class dog {
  constructor(a, b) {
    this.type = a;
    this.color = b;
  }
  sayHello() {
    console.log("안녕 나는 개");
  }
}

class cat extends dog {
  constructor(a, b, c) {
    super(a, b);
    this.age = c;
  }
  sayHello2() {
    console.log("안녕 나는 고양이");
    super.sayHello();
  }
}

let cat1 = new cat("코숏", "whtie", 5);

console.log(cat1.sayHello2());
//출력 : 안녕 나는 고양이, 안녕 나는 개