Object.setPrototype(ray, IdolModel.p... - 인프런

[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스

Prototype (프로토타입)

Object.setPrototype(ray, IdolModel.prototype); 호출 후, ray.dance()가 실행되는 이유를 모르겠어요

작성

329

섹션3 prototype 강의에서 Object.setPrototype(ray, IdolModel.prototype);을 실행한 후에도 ray.dance()가 실행됩니다.

instanceof를 사용해서 확인한 결과, false가 출력되므로 ray.dance()에서 에러가 발생해야 한다고 생각했는데 제가 잘 못 이해하고 있을까요?

Object.setPrototypeOf(ray, IdolModel.prototype);
console.log(ray.sayHello());
console.log(ray.dance()); //왜 실행되는지?
console.log("ray's type: ",ray instanceof FemaleIdolModel);

javascript

답변 2

김민영

저도 같은 의문이었는데 해결됬습니다. 감사합니다!

코드팩토리

지식공유자

안녕하세요!

실행 가능한 전체 예제 코드를 보여주시기 바랍니다!

댓글 달아주시면 다시 답변 드릴게요!

감사합니다!

yunjcho

질문자

전체 예제 코드는 아래와 같습니다

function IdolModel(name, year) {
	this.name = name;
	this.year = year;
}

IdolModel.prototype.sayHello = function() {
	return `${this.name} 인사를 합니다.`;
}

function FemaleIdolModel(name, year) {
	this.name = name;
	this.year = year;

	this.dance = function() {
		return `${this.name}가 춤을 춥니다.`;
	}
}

const gaEul = new IdolModel('가을', 2002);
const ray = new FemaleIdolModel('레이', 2004);

console.log(gaEul.__proto__);
console.log(gaEul.__proto__ === IdolModel.prototype);
console.log(Object.getPrototypeOf(gaEul) === IdolModel.prototype); //gaEul 인스턴스의 __proto__를 가져옴

console.log();

console.log(gaEul.sayHello());
console.log(ray.dance());
console.log(Object.getPrototypeOf(ray) === FemaleIdolModel.prototype);
// console.log(ray.sayHello()); // 해당 메소드가 클래스 안에 없어서 실행 불가

Object.setPrototypeOf(ray, IdolModel.prototype); //이미 생성된 객체에 __proto__를 수정함으로서 이전에 호출하지 못한 함수를 호출 할 수 있게 됨
console.log(ray.sayHello());
console.log(ray.dance()); //?
console.log("ray's type: ",ray instanceof FemaleIdolModel);

console.log(ray.constructor === FemaleIdolModel); //false
console.log(ray.constructor === IdolModel); //true
console.log(Object.getPrototypeOf(ray) === FemaleIdolModel.prototype); //false - 기존 연결이 끊김
console.log(Object.getPrototypeOf(ray) === IdolModel.prototype); //false - 기존 연결이 끊김
console.log(FemaleIdolModel.prototype === IdolModel.prototype); //false

FemaleIdolModel.prototype = IdolModel.prototype;

코드팩토리

지식공유자

this.dance에 함수를 할당할경우 name과 year처럼 인스턴스에 직접 귀속됩니다. 아래 예제를 확인해보시면 조금 더 쉽게 확인 할 수 있습니다. toString()을 실행이 가능하지만 직접 들고있는 프로퍼티인지 확인하는 hasOwnProperty를 사용하면 dance의 경우 true가 나오지만 프로퍼티 체인을 통해 상속 받는중인 toString은 false가 나옵니다.

yunjcho

질문자

감사합니다!

인프런 커뮤니티 질문&답변

Object.setPrototype(ray, IdolModel.prototype); 호출 후, ray.dance()가 실행되는 이유를 모르겠어요