[Javascript] ES5방식으로 쉽게 구현하는 상속, ES6 방식으로 안쉽게 상속 구현 해보기

JoGabi·2022년 1월 12일
0

javascript

목록 보기
5/10
post-thumbnail

ES5 방식으로 상속 기능 구현

2010 년부터 Prototype 로 구현하지 않고 ES5 방식으로 상속을 짧고 쉽게 구현 하게 되었다.
Object.create(프로토타입 object) 로 상속 기능 구현 가능

var 부모 = { name: 'kim', age: 50 } //부모 속성
var 자식 = Object.create(부모) //부모가 가지고 있는 값을 그대로 물려 받은 자식 object  constructor 로도 가능 
자식.age = 20

자식의 손자도 만들 수 있다.

var 손자 = Object.create(자식)
console.log(손자) 

console.log(손자.age); //결과값 20
손자의 age 가 없을 때 그 위 자식 age 값을 찾음 / 없게 되면 그위 부모 age 값을 찾음
각 속성들을 물려받게 됨

ES6 방식으로 안쉽게 상속 구현

객체지향으로 사용한다면 class 로 만든다.

class 부모 {
  constructor(params) {
    console.log(params); //params 값도 넘길 수 있음
    this.name = "kim";
    this.sayHi2 = function () {
      console.log('hellow'); //함수추가방법 1
    };
    /* 
    물려받는게 아님
    부모의 prototype 에 있음 
    */
  }
  sayHi() {
    console.log('hellow'); //함수추가방법 2
  }
}


// 자식은 
var 자식 = new 부모('파라미터 추가')

console.log(자식.__proto__);
Object.getPrototypeOf(자식) // 위와 같은 문법 , 보통 직관적으로 해석이 가능하여 이 방식으로 사용함
console.log(자식);

함수 추가 방법

class 부모 {
  constructor(params) {
    console.log(params); //params 값도 넘길 수 있음
    this.name = "kim";
    this.sayHi2 = function () {
      console.log('hellow'); //함수추가방법 1
    };
    /* 
    물려받는게 아님
    부모의 prototype 에 있음 
    */
  }
  sayHi() {
    console.log('hellow'); //함수추가방법 2
  }
}

두가지의 방법이 있다.
1. constructor 안에 선언
2. constructor 밖에 선언

첫번째는 방식은 자식이 상속을 받을 수 있다.
두번째는 부모.prototype 로 추가된다

왜사용할까

object 반복적으로 찍어내고 싶을때 보통 사용한다.

profile
서울에서 프론트엔드 개발자로 일하고 있는 Gabi 입니다. 프론트엔드: Javascript, React, TypeScript 에 관심이 있습니다.

0개의 댓글