[정리]Inheritance in JavaScript

출처

• https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Objects/Inheritance

목표

• child object classes 생성하기 (paraents 특성을 이어 받는)

• 언제,어디서 OOJS를 적용해야 할지 알기

• modern ECMAScript syntax로 classes를 다루기.

parameter 상속 : Teacher 예제

Teacher가 Person 상속받기

function Teacher(first, last, age, gender, interests, subject) { Person.call(this, first, last, age, gender, interests); this.subject = subject; }

call을 이용.

parameter value까지 상속 : brick 예제

function BlueGlassBrick() { Brick.call(this); this.opacity = 0.5; this.color = 'blue'; }

Setting Teacher()'s prototype and constructor reference

1.Teacher.prototype이 Person의 prototype이도록 설정.

Teacher.prototype = Object.create(Person.prototype);

즉, Person에 의해 만들어진 객체는 Person생성자를 참조하도록 하는데, 그것은 Person의 프로토타입을 참조하는 것과 동일하다. (prototype 내용)

Teacher의 프로토타입에 Person prototype을 넣음으로써 결국 Person property를 참조하도록 만들어짐.

Person.prototype에 greeting 이라는 method를 만들었으므로 Teacher에서도 사용 가능.

2.현재 Teacher.prototype에 Person.prototype을 설정했으므로 두 개는 완전히 동일함.

3.따라서 Teacher의 prototype으로 설정하기 위해 아래 내용을 추가한다. 즉, Teacher.prototype이 Person.prototype 참조하는 것이 아닌 Teacher의 prototype을 참조하도록 설정. (prototype내용은 그대로 가진 채 Teacher의 prototype을 가르키도록 바꾸는 듯.)

Object.defineProperty(Teacher.prototype, 'constructor', { value: Teacher, enumerable: false, // so that it does not appear in 'for in' loop writable: true }); or Teacher.prototype.constructor = Teacher;

이히해보면 다음과 같다.

Object 객체를 이용해서 프로퍼티를 정의하라.

Teacher.prototype객체의 constructor의 value값을 Teacher로 설정. (이하 내용은 잘;)

Giving Teacher() a new greeting() function

Teacher.prototype.greeting = function() { let prefix; if (this.gender === 'male' || this.gender === 'Male' || this.gender === 'm' || this.gender === 'M') { prefix = 'Mr.'; } else if (this.gender === 'female' || this.gender === 'Female' || this.gender === 'f' || this.gender === 'F') { prefix = 'Ms.'; } else { prefix = 'Mx.'; } alert('Hello. My name is ' + prefix + ' ' + this.name.last + ', and I teach ' + this.subject + '.'); };

위에서 Teacher.prototype을 Teacher로 변경하였으므로 해당 prototype에 greeting을 새로 정의하여 이 greeting을 실행하도록 한다.

따라서 정리하자면 다음과 같다.

1. Teacher가 Person을 상속받을 것이므로 call을 이용하여 Person properties를 받는다.

2. Teacher에게만 있는 properties를 정의한다. 여기선 subject property 정의. (이때까지는 property만 받음.)

3. Person의 prototype을 속성을 상속받기 위해 Teacher.prototype = Object.create(Person.prototype) 사용. (이때 Person의 method까지 받을 수 있게 된다. 왜냐하면 일반적으로 method는 Person.prototype.methodName 에서 정의 하므로.)

4. Teacher가 Person의 prototype을 그대로 상속받았으므로 Constructor가 Person으로 되어있음. 따라서 Teacher의 생성자를 원래대로 Teacher 변경시켜준다.

명심.

prototype = { constructor: {}, method1: , method2: , .... }

형태로 존재하므로, 메소드를 받고 constructor도 전달받은 것.

의문점. Teacher의 생성자 함수는 따로 정의되어 있는건가?

Teacher의 프로토타입에 그대로 덮어 씌웠는데 Teacher.prototype.constructor = Teacher;

에서 저 Teacher는 이미 subject를 지닌 Teacher 아니지 않은가?

Teacher 자체가 가지는 속성과 prototype에서 가는 속성은 다른가.

prototype의 생성자에 Teacher를 놓았으므로 Teacher.prototype에는 Teacher가 가지는 속성을 지니게 된다. 이런 의미인듯.