javaScript. (15) 객체 상속

상속(inheritance)

- 상속은 부모 생성자의 기능을 물려받으면서 새로운 기능도 추가하는 것을 의미.

                = 확장(extend)

 

 

function Vehicle(name, speed) {           // 1️⃣ Vehicle 생성자 
   this.name = name;
   this.speed = speed;
}

Vehicle.prototype.drive = function() {                // 메서드 ㅡ 프로토타입에 생성
   console.log(this.name + ' runs at ' + this.speed)
};

const tico = new Vehicle('tico', 50);          // Vehicle 생성자로 tico 객체 만듬
tico.drive();    // 'tico runs at 50'

function Sedan(name, speed, maxSpeed) {      // 2️⃣ Sedan 생성자
   Vehicle.apply(this, arguments)            // apply를 통해 this 바인딩 + 호출 ㅡ 상속
   this.maxSpeed = maxSpeed;                 
}

Sedan.prototype = Object.create(Vehicle.prototype);     // 3️⃣ Vehicle 생성자 ㅡ Sedan 생성자 상속(=확장)
Sedan.prototype.constructor = Sedan;            // ❗ 오류를 수정
Sedan.prototype.boost = function() {
   console.log(this.name + ' boosts its speed at ' + this.maxSpeed);
};

const sonata = new Sedan('sonata', 100, 200);
sonata.drive();    
sonata.boost();

상속하는 방법 중 에러가 거의 없는 방법 중 하나이다.

 

• Vehicle 생성자와
• prototype에 메소드를 넣는 것

즉, comment 1,2는 지난 시간의 내용과 같지만,

그 다음에 나오는 // 2️⃣ Sedan 생성자 부분을 살펴보자. (상속 부분)

 

 

Vehicle.apply(this, argument)

Vehicle의 this들을 그대로 받으라는 의미이다. (바인딩)

Vehicle 생성자에 this와 argument를 적용하라는 코드임.

 

Sedan은 매개변수로 name, speed, maxSpeed가 있다.

이것이 그대로 Vehicle과 연결된다.

** maxSpeed는 Vehicle이 갖고있지 않으므로 무시됨.

 

 

 

Sedan.prototype = Object.create(Vehicle.prototype)

Sedan의 prototype과 Vehicle의 prototype을 연결.

- 그래야 Vehicle의 메서드인 drive를 사용할 수 있음.

 

 

💡 Object.create(Vehicle.prototype)

Object.create(Vehicle.prototype);      // 객체를 만들되, 생성자는 실행 X. (프로토타입만 넣음)
new Vehicle();                // 객체를 만들고 생성자 실행.

- 객체는 만들되, 생성자는 실행하지 않음. (즉, 프로토타입 값만 넣음)

 

 

 

Sedan.prototype.constructor = Sedan

 

Person.prototype.constructor === Person; 이고,
Person.prototype === (Person생성자로 만들어진 객체).__proto__; 이기 때문에
(Person생성자로 만들어진 객체).__proto__.constructor === Person; 도 성립하게 된다.

🔻

 

생성자.prototype.constructor === 생성자

prototype = 부모

constructor = 자식 이므로

생성자의 부모의 자식 = 생성자가 된다.

 

 

 

하지만, 상속을 통해 위 예제의 코드를 진행하면

Sedan.prototype.constructor === vehicle이 된다.

이것을 고치기 위해 ( 즉, 생성자.prototype.constructor === 생성자 를 만족하기 위해서 )

Sedan.prototype.constructor에 Sedan을 넣어주는 것이다.

 

❕ 이것은 상속의 방법마다 다르니 참고만 하자.

 

 

---

 

추가로, Truck 생성자도 만들어보자.

boost 대신 짐을 싣는 load 메소드를 만들자.

 

function Truck(name, speed, capacity) {
   Vehicle.apply(this, arguments);
   this.capacity = capacity;
}

Truck.prototype = Object.create(Vehicle.prototype);
Trunk.prototype.constructor = Trunk;

Trunk.prototype.load = function (weight) {
   if(weight > this.capacity) {
      return console.error('짐이 너무 많습니다.');
   }
   return console.log('짐을 실었습니다.');
};

const broong = new Trunk('broong', 40, 100);
broong.drive();
broong.load(120);

 

 

 

<정리>

apply()를 통해 상속이 이루어지고

Object.create()를 통해 상속받는 객체에게 프로토타입 객체를 전달. (=주소를 건네줌)

 

 

+)

console.log('hello');	콘솔에 'hello'를 출력함
return console.log('hello');	함수를 종료하고, 상위 호출스택으로 'hello'를 반환함. (=제어문)

 

 

 

++) 주의

 

- 자식은 항상 부모의 매개변수를 모두 포함. (순서도 맞춰줘야함)

- Object.create는 prototype만 가능하다.

 

- 자식은 부모의 메서드를 사용가능 / 부모는 자식의 메서드 사용 불가 (즉, 일방적인 상속임)

 

 

 

 

 

 

---

REFERENCE

 

https://www.zerocho.com/category/JavaScript/post/573d812680f0b9102dc370b7

(JavaScript) 객체 상속

 

이 포스팅은 zerocho님의 javascript 강의를 보고 작성한 글입니다.

공부+기록 용으로 작성한 것이며, 자세한 것은 위 포스팅을 참고하세요!