Effective JavaScript Item 38 하위 구조 함수 에서 부모 구조 함 수 를 호출 합 니 다.

이 시 리 즈 는 Effective JavaScript 의 독서 노트 입 니 다.
 
한 게임 이나 도형 시 뮬 레이 션 응용 에서 장면 (Scene) 이라는 개념 이 있다.한 장면 에 하나의 대상 집합 이 포함 되 는데 이 대상 들 은 캐릭터 (Actor) 라 고 불 린 다.각 캐릭터 는 그 유형 에 따라 하나의 이미지 로 표시 되 고 장면 도 하나의 바 텀 그래 픽 전시 대상 의 인용 을 저장 해 야 하 며 문맥 (Context) 이 라 고 불 린 다.

function Scene(context, width, height, images) {
	this.context = context;
	this.width = width;
	this.height = height;
	this.images = images;
	this.actors = [];
}
Scene.prototype.register = function(actor) {
	this.actors.push(actor);
};
Scene.prototype.unregister = function(actor) {
	var i = this.actors.indexOf(actor);
	if (i >= 0) {
		this.actors.splice(i, 1);
	}
};
Scene.prototype.draw = function() {
	this.context.clearRect(0, 0, this.width, this.height);
	for (var a = this.actors, i = 0, n = a.length; i < n; i++) {
		a[i].draw();
	}
};

장면 에서 모든 캐릭터 는 하나의 기본 클래스 에서 계승 되 는데 이 기본 클래스 는 모든 캐릭터 가 가 진 속성 과 방법 을 추상 화 하 는 데 사용 된다.예 를 들 어 모든 캐릭터 대상 은 자신 이 있 는 장면 의 인용 과 좌표 정 보 를 저장 합 니 다.

function Actor(scene, x, y) {
	this.scene = scene;
	this.x = x;
	this.y = y;
	scene.register(this);
}

마찬가지 로 Actor 형식의 prototype 대상 에서 공공 방법 을 정의 합 니 다.

Actor.prototype.moveTo = function(x, y) {
	this.x = x;
	this.y = y;
	this.scene.draw();
};
Actor.prototype.exit = function() {
	this.scene.unregister(this);
	this.scene.draw();
};
Actor.prototype.draw = function() {
	var image = this.scene.images[this.type];
	this.scene.context.drawImage(image, this.x, this.y);
};
Actor.prototype.width = function() {
	return this.scene.images[this.type].width;
};
Actor.prototype.height = function() {
	return this.scene.images[this.type].height;
};

캐릭터 기본 클래스 가 있 으 면 그 위 에 구체 적 인 유형 을 만 들 수 있 습 니 다.예 를 들 어 우주선 (Space Ship) 캐릭터 를 만 들 때 이렇게 실현 할 수 있다.

function SpaceShip(scene, x, y) {
	Actor.call(this, scene, x, y);
	this.points = 0;
}

SpaceShip 의 인 스 턴 스 도 모든 캐릭터 가 가 져 야 할 속성 을 가 질 수 있 도록 SpaceShip 의 구조 함수 에서 먼저 부모 클래스 (Actor) 의 구조 함 수 를 호출 한 다음 에 SpaceShip 인 스 턴 스 자체 의 속성 을 초기 화 합 니 다. 예 를 들 어 상기 points.
 
SpaceShip 타 입 이 Actor 타 입의 하위 타 입 이 되 기 위해 서 는 SpaceShip 타 입의 prototype 대상 도 Actor 타 입의 prototype 대상 을 계승 해 야 합 니 다.이것 은 ES5 가 제공 하 는 Object. create 방법 을 통 해 완성 할 수 있 습 니 다 (비 ES5 의 실현 방식 은 Item 33 을 참고 할 수 있 습 니 다).

SpaceShip.prototype = Object.create(Actor.prototype);

SpaceShip 의 prototype 대상 이 Actor 의 구조 함 수 를 호출 하여 얻 은 것 이 라면 일련의 문제 가 발생 할 수 있 습 니 다.

SpaceShip.prototype = new Actor();

Actor 구조 함 수 를 호출 할 때 합 리 적 인 매개 변 수 를 입력 할 수 없습니다.Actor 는 장면 대상 과 좌표 정 보 를 매개 변수 로 받 아들 이기 때문에 SpaceShip 유형의 prototype 대상 은 SpaceShip 유형 에서 일부 공용 속성 과 방법 을 수용 하기 위해 서 이다. 분명히 장면 과 좌표 정 보 는 SpaceShip 인 스 턴 스 에 따라 다 르 기 때문에 이런 정 보 를 prototype 대상 에 두 는 것 은 적합 하지 않다.
 
부모 형식의 구조 함 수 는 하위 형식의 구조 함수 에서 만 호출 될 수 있 으 며, 하위 형식의 prototype 대상 은 부모 형식 을 계승 하 는 prototype 대상 입 니 다.이 점 은 하위 형식의 prototype 을 만 들 때 주의해 야 합 니 다.
 
하위 형식 prototype 대상 의 생 성 이 완료 되면 공용 속성 과 방법 을 설정 할 수 있 습 니 다.

SpaceShip.prototype.type = "spaceShip";
SpaceShip.prototype.scorePoint = function() {
	this.points++;
};
SpaceShip.prototype.left = function() {
	this.moveTo(Math.max(this.x - 10, 0), this.y);
};
SpaceShip.prototype.right = function() {
	var maxWidth = this.scene.width - this.width();
	this.moveTo(Math.min(this.x + 10, maxWidth), this.y);
};

이때 Actor 유형, Space Ship 유형 과 그들의 prototype 대상 간 의 관 계 는 다음 과 같다.
총결산
하위 형식의 구조 함수 에서 부모 형식의 구조 함 수 를 호출 하고 this 의 지향 을 명시 적 으로 전달 합 니 다
Object. create 방법 으로 하위 형식의 prototype 대상 을 만 들 고 부모 형식 구조 함수 호출 을 피 합 니 다