JavaScript

[JS] ES5 ES6 상속기능 사용하기 (create , class)

잼굴 2022. 5. 20. 14:16

 

 

1. Object.create

        let 부모 = {name:"kim", age:50};
        let 자식 = Object.create(부모);  // <prototype을 부모로 해주세요

상속 받는다!

 

 

자식.age = 20;

해주면 바뀜

 

 

        let 부모 = {name:"kim", age:50};
        let 자식 = Object.create(부모);  // <prototype을 부모로 해주세요    
        자식.age = 20;
        let 손자 = Object.create(자식);

바로 윗부모의 prototype

바로 윗부모의 prototype을 받아냄

 

object 뿐만아니라 함수도 가능함!

 


2. Class

 

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

class를 이용해서 constructor를 만들고자 함

 

이렇게하면 자식이 직접 함수를 가짐 (prototype을 통해서 확인가능)

 

부모에게 함수를 주고싶으면

      class 부모 {
        constructor() {
          this.name = "Lee";
          this.sayHi = function () {
            console.log("hello");
          };
        }
        sayHello() {
          consol.log("ehllo");
        }
      }

 

만약 class안에 함수 여러개를 추가하고싶다면?

      class 부모 {
        constructor() {
          this.name = "Lee";
          this.sayHi = function () {
            console.log("hello");
          };
        }
        sayHello() {
          consol.log("ehllo");
        }
              sayHello() {
          consol.log("ehllo");
        }      sayHello() {
          consol.log("ehllo");
        }      sayHello() {
          consol.log("ehllo");
        }
      }

그냥 더 붙이면됨 ㅇㅇ

 

부모.prototype.sayHello = function(){}

부모 prototype을 이용해서 추가도 가능함

 

      class 부모 {
        constructor(이름) {
          this.name = 이름;
          this.sayHi = function () {
            console.log("hello");
          };
        }}

파라미터 추가도 방법은 같음

 

 

 

객체지향 문법 쓰는 이유: object를 여러개 만들어 쓰기위해서

'JavaScript' 카테고리의 다른 글

[JS] getter, setter  (0) 2022.05.20
[JS] extends / super  (0) 2022.05.20
[JS] prototype  (0) 2022.05.20
[JS] constructor 정리  (0) 2022.05.19
Arrow function  (0) 2022.05.17