본문 바로가기

Front-End: Web/JavaScript

[코딩애플] js part 2-4. 상속기능을 구현하는 다른 방법

반응형

상속기능을 구현하는 다른 방법

이전에 배웠던

  • prototype
  • function 기계(){}

는 옛날 문법이다. 사람들은 이제 prototype없이 ES5, ES6 방법으로 상속 기능을 사용한다.

객체지향 3. ES5 방식으로 쉽게 구현하는 상속기능

ES5: Object.create(물려받을 부모 object)

  • constructor는 아니다.
Object.create(프로토타입object);

부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶다면?

  1. constructor 함수를 만들거나
  2. **Object.create()**를 사용한다.
var 부모 = {name: 'Kim', age: 50};

var 자식 = Object.create(부모);

console.log(자식); // {}. 자식에 name, age를 직접 부여한 적 없고, prototoype을 부모로 해달라고 했으니까.
console.log(자식.name); // 'Kim'. 자식의 prototype을 부모로 두고 있으니까.
  1. 자식이 name을 갖고 있나 -> X
  2. 그럼 자식의 부모 prototype에는 name을 갖고 있나 -> O

자식의 age를 바꾸고 싶다면?

자식.age = 20;
console.log(자식); // {age: 20}
console.log(자식.age); // 20
  1. 자식이 age를 갖고 있나? -> O. 20. 출력!

자식의 자식도 만들 수 있다

var 손자 = Object.create(자식);
console.log(손자); // {}
console.log(손자.name); // 'Kim'
console.log(손자.age); // 20
  1. 손자가 age를 갖고 있나? -> X
  2. 손자의 부모(자식)이 age를 갖고 있나? -> O. 20. 출력!
반응형