[JavaScript]프로토타입 상속

프로토타입 상속

Object.create 메서드

• Object.create를 호출하면 호출 시 전달한 객체를 [[Prototype]] 객체로 사용하는
  빈 객체를 생성하여 반환한다.
• 하지만 __proto__ 는 Object.create 메서드로 전달한 객체로 설정되어있다.
• 객체에 원하는 메서드가 없으면 프로토타입 체인을 검색한 후 프로토타입 객체에 접근하여 찾을 수 있다.

프로토타입 상속

상속을 배울 때 가장 많이 쓰이는 예제를 통해 살펴보기

// Shape - 부모 클래스(superclass)
function Shape(x, y) {
	this.x = x;
	this.y = y;
}
// 부모 클래스의 메서드 정의
Shape.prototype.move = function(x, y) {
	console.log(`Shape moved from ${this.x},${this.y} to ${x},${y}`);
	this.x += x;
	this.y += y;
}

// Rectangle - 자식 클래스(subclass)
function Rectangle(x, y, w, h) {
	// 자바의 super와 비슷한 기능(new 연산자를 호출 안함! -> shape에서는 this 새 객체를 만들지 않음**)
	Shape.call(this, x, y); //this에는 빈 객체가 담겨져 있음, shape에서 x, y를 this에 대입
	this.w = w; 
	this.h = h;
}
// Object.create 메서드를 호출하여 Shape.prototype을 프로토타입 객체로 사용하는 비어있는 객체를 생성 후 Rectangle 생성자 함수의 prototype 속성 지정
// Rectangle.prototype에 대입될 객체의 모습 => { __proto__: Shape.prototype }
Rectangle.prototype = Object.create(Shape.prototype);

// Rectangle.prototype 객체의 constructor가 Object.create로 인하여 찾을 수 없게 됐으므로 다시 복원**
Rectangle.prototype.constructor = Rectangle;

// Rectangle 생성자 함수를 통해서 생성된 객체가 사용할 공통 메서드 정의
Rectangle.prototype.size = function() {
	return this.w * this.h;
}
let rect = new Rectangle(0, 0, 20, 10);
// Shape.prototype 접근을 통해서 move 메서드를 호출
console.log(rect.move(5, 5));
console.log(rect.size());