ES5방식으로 상속기능 쉽게 만들기

최문길·2023년 11월 5일
1

JavascriptES6

목록 보기
13/23

prototype이니, constructor, .__proto__,와 같이 복잡한 문법으로 상속기능이 어렵다면...

ES5출시 때 나온 Object.create()라는 쉬운 문법으로 상속을 이용해서 오브젝트를 만들고 싶다면 이용해보 자.

Object.create()

Object.create(상속할Object);

이렇게 코드를 작성하면 오브젝트 자료형 하나가 '뿅'하고 남는다.

그리고 소괄호 안에 적은 부모 Object가 유전자(Prototype)가 된다.

Sample

var parent = { name : 'choi',age :50 };
var child = Object.create(parent);

console.log(child)// {}, 빈 object 나옴 ;;

// 당연함 child에는 object 자료형을 만든거지
//child 자체에 값을 부여한 것이 아니잖슴

// 따라서...
console.log(child.name) 
// 'choi'이렇게 부모 유전자를 찾아서 콘솔로 퉤 하고 뱉어줌

Q. 그렇다면 내가 child 라는 것에 직접 key, value 값을 넣어봐 주자

var parent = { name : 'choi',age :50 };
var child = Object.create(parent);

child.name = 'Park'
console.log(child)// {name : 'Park'}가 찍힌다.

conosle.log(child.name)// 무엇이 나올까요??

A. child에 직접 등록시켜준 값이 나온다.

  1. 상속받은 child 객체에 name이라는 값이 있다면 우선적으로 child.name의 값을 뱉어 낼 것이고
  2. child.name의 값이 없다면 상속해준 parent의 name 값을 뱉어 줄 것이다.
  3. 거기에도 없으면 부모의 부모 유전자를 뒤져서.. 출력을 시도 하고 없으면 undefined, 있으면 값을 보여줄 것이다.

Q. parent.prototype이 있을까?
A. 당연히 없겠지.... 객체를 상속 대상으로만 삼은거지 constructor가 아니잖슴!!!

0개의 댓글