반응형
상속기능을 구현하는 다른 방법
이전에 배웠던
- prototype
- function 기계(){}
는 옛날 문법이다. 사람들은 이제 prototype없이 ES5, ES6 방법으로 상속 기능을 사용한다.
객체지향 3. ES5 방식으로 쉽게 구현하는 상속기능
ES5: Object.create(물려받을 부모 object)
- constructor는 아니다.
Object.create(프로토타입object);
부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶다면?
- constructor 함수를 만들거나
- **Object.create()**를 사용한다.
var 부모 = {name: 'Kim', age: 50};
var 자식 = Object.create(부모);
console.log(자식); // {}. 자식에 name, age를 직접 부여한 적 없고, prototoype을 부모로 해달라고 했으니까.
console.log(자식.name); // 'Kim'. 자식의 prototype을 부모로 두고 있으니까.
- 자식이 name을 갖고 있나 -> X
- 그럼 자식의 부모 prototype에는 name을 갖고 있나 -> O
자식의 age를 바꾸고 싶다면?
자식.age = 20;
console.log(자식); // {age: 20}
console.log(자식.age); // 20
- 자식이 age를 갖고 있나? -> O. 20. 출력!
자식의 자식도 만들 수 있다
var 손자 = Object.create(자식);
console.log(손자); // {}
console.log(손자.name); // 'Kim'
console.log(손자.age); // 20
- 손자가 age를 갖고 있나? -> X
- 손자의 부모(자식)이 age를 갖고 있나? -> O. 20. 출력!
반응형
'Front-End: Web > JavaScript' 카테고리의 다른 글
[코딩애플] js part 2-6. class를 복사하는 extends / super (0) | 2022.10.21 |
---|---|
[코딩애플] js part 2-5. ES6 방식으로 안쉽게 구현하는 상속기능(Class) (0) | 2022.10.21 |
[코딩애플] js part 2-3. Object 생성기계인 constructor를 만들어 써보자 (0) | 2022.10.21 |
[코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 (0) | 2022.10.21 |
[코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments) (0) | 2022.10.21 |