자바스크립트 Prototype Chain(프로토타입 체인)

안녕하세요  2024년이 밝았네요..  2024년에도 다들 행복한 길만 걸으시고,  새해복 많이 받으셨음 좋겠습니다!! 

 글을 쓰기 앞서 모든  내용과 소스들은 다음과 같은 강의 플랫폼에서 응용하여  작성하였습니다.
출처: https://inf.run/xNcEg

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

 

오늘은 자바스크립트에서 프로토타입 체인(상속체인)이라 불리는 것에 대해 설명하겠습니다. 

프로토타입 체인은 JavaScript가 객체 지향 프로그래밍의 상속을 구현하는 방법

 

 

자바스크립트에서 Prototype(프로토타입) -   자바스크립트는 프로토타입 기반의 언어라고 부릅니다 쉽게 말해 자바스크립트에서 모든 객체가 메소드와 속성을 상속받기 위한 템플릿으로 사용되는 다른 객체, 즉 프로토타입을 가지고 있다는 뜻입니다.

/**
 * Prototype 
 */
const myObj = {}; //아무것도 프로퍼티가 없는 객체 생성

// __proto__ : 부모의 역 상속 체인을 의미한다 
// 모든 객체에 존재하는 프로퍼티다.
// 상속에서 부모 클래스에 해당되는 값이다.
// 일반 오브젝트 에서도 실행할 수 있는 이유 -> 클래스 또한 오브젝트로 인스턴스화 되기 때문이다.
console.log(myObj.__proto__);
 
function Idol(name, year){ //프로퍼티를 할당하면 생성자 함수를 생성할 수 있다.  
    this.name = name;  
    this.year = year;
}
console.log('-----------------------------------');
console.log(Idol.prototype); //static(정적)값을 출력 - > 객체가 하나 출력됨(아무런 값도 없는 것처럼 보임)

// 감춰져 있는 값을 볼 수 있는 기능(console.dir)
console.log('-----------------------------------');
console.dir(Idol.prototype, {
    showHidden: true, // showHidden -> 감춰져 있는 값까지 다 보여주는 키워드
});

// Object 안에 Constructor 라는 키가 있고, Idol 함수가 Value값으로 들어가 있는 것을 볼 수 있다.
 
// circular reference (서로가 서로를 참조하고 있는 상태)
console.log('-----------------------------------');
console.log(Idol.prototype.constructor === Idol); //만약 Constructor를 가져오는데, Idol이랑 같은가?)
// prototype, Constructor 둘다 객체이기 때문에 메모리 공간상 봤을 때 같은 메모리 주소를 참조하고 있다고 봐도 된다.
console.log('-----------------------------------');
console.log(Idol.prototype.constructor.prototype === Idol.prototype); 
// Idol 함수의 prototype 객체에 constructor가 가리키는 prototype 객체가 Idol 함수의 prototype 객체와 동일한지를 확인한다.

const winter = new Idol('윈터', 2001);
console.log('-----------------------------------');
console.log(winter.__proto__); // 출력 ->실제 객체가 존재
console.log('-----------------------------------');
console.log(winter.__proto__ === Idol.prototype); // winter 객체의 __proto__가 Idol 함수의 prototype 객체와 같은지 확인합니다.
console.log('-----------------------------------');
console.log(myObj.__proto__ === Object.prototype); // myObj 객체의 __proto__가 Object의 prototype 객체와 같은지 확인합니다.
console.log('-----------------------------------');
console.log(Idol.__proto__ === Function.prototype);
console.log('-----------------------------------');
console.log(Function.prototype.__proto__ === Object.prototype);
console.log('-----------------------------------');
console.log(Idol.prototype.__proto__ === Object.prototype);
// Idol의 부모는 Function이고  //Function의 프로토타입의 부모는 Object이다.
// Idol은 Object까지 상속을 받게된다. -> Idol 프로토타입은 최상위객체가 Object.prototype이 된다
// 상속을 받게되면 상속받은 대상의 모든 프로퍼티들을 저희가 상속받은 자식이 사용할 수 있다.
// 따라서 윈터 객체는 Object.prototype에 있는 기능까지 전부 사용할 수 있다
console.log('-----------------------------------');
console.log(winter.toString())
console.log(Object.prototype.toString());
// 상속체인, prototype chain(프로토타입 체인) - 프로토타입끼리 계속 연결되어 있는 것
console.log('-----------------------------------');
function Idol2(name,year){
    this.name = name;
    this.year = year;

    this.saySing =  function(){ //saySing() 함수를 Idol2 객체 안에다가 작성
        return `${this.name}가 노래를 부릅니다.`;
    }
}

const winter2 = new Idol2('윈터', 2001);
const karina2 = new Idol2('카리나', 2000);

console.log(winter2.saySing());
console.log(karina2.saySing());
console.log('-----------------------------------');
console.log(winter2.saySing === karina2.saySing); 

console.log(winter2.hasOwnProperty('saySing')) // winter2만의 고유 프로퍼티이다.
// hasOwnProperty() : 상속을 받은 프로퍼티인지 아니면은  고유로 갖고 있던 객체만의 프로퍼티인지 확인할 수 있다.

function Idol3(name, year){  //이번엔 saySing() 함수를 Idol3 안에다가 정의하지 않음
    this.name = name;
    this.year = year;
}

Idol3.prototype.saySing = function(){ // Idol3.prototype에다가 saySing() 함수를 작성, 여기서 prototype은 객체를 만들면 __proto__가 가져가게 되는, 참조(reference)하게 되는 객체다.
    return `${this.name}가 노래를 합니다.`; 
}   
console.log('-----------------------------------');
const winter3 = new Idol3('윈터', 2001);
const karina3 = new Idol3('카리나', 2001);

console.log(winter3.saySing()); //saySing은 상속이 돼서 실행이 가능함
console.log(karina3.saySing());
console.log(winter3.saySing === karina3.saySing); // 한 공간에만 SaySing() 함수가 저장되어 있다는 것을 알 수 있다.

console.log(winter3.hasOwnProperty('saySing')); // false가 나온 상태는 상속받은 프로퍼티다 라는 것을 생각해 볼 수 있다.
//sayStaticHi() 함수를 만드는 방법
Idol3.sayStaticHi = function(){ 
    return '안녕하세요 2024년도 대박나세요';
}

console.log(Idol3.sayStaticHi());
/**
 * Overriding
 */
function Idol4(name,year){
    this.name = name;
    this.year = year;

    this.saySing = function(){ // Overriding ->  Idol4 함수에다가  this.saySing() = function 선언
        return '안녕하세요 저는 인스턴스 메서드 입니다.' 
    }
}
console.log('-----------------------------------');
// 상속받은 saySing을 인스턴스의 saySing으로 덮어 씌울 수가 있다.
Idol4.prototype.saySing =  function(){//prototype 안에다가 Idol4 saySing 정의
     return '오늘은 어떤 노래를 불러볼까요';
} 

const winter4 = new Idol4('윈터',2001);

// property-shadowing(프로퍼티 셰도잉) - class(클래스)에서 override(오버라이드)랑 똑같다
console.log(winter4.saySing()); // 실행할 수 있다. -> 이유는 prototype을 상속을 받기 때문에 saySing() 함수는 존재

console.log('-----------------------------------');

// 자바스크립트 OOP는 전통적인 OOP룰을 따르지 않는 게 굉장히 많기 때문에 -> 프로토타입 값이나 프로토 값을 변경 할 수 있다(상속받는 클래스를 변경할 수 있다.)
// 인스턴스(instance)를 생성하고 난 다음에도 생성할 수 있다.

/**
 * getPrototypeOf,  setPrototypeOf
 *  getPrototype - 매개변수에 들어오게된 Obejct의 __proto__ 값을 가져오게 된다
 * 
 * 인스턴스의 __proto__(proto) 변경 VS 함수의 프로토타입(prototype) 변경
 */
function Idol(name, year) { // 함수 재정의
    this.name = name;
    this.year = year;
}

Idol.prototype.saySing = function(){ //saySing() 함수 추가
    return `${this.name}이가 노래를 부르고 있습니다.`;
}

function FemaleIdol(name, year){  //FemaleIdol 
    this.name = name;
    this.year = year;

    this.dance = function(){ //함수를 인스턴스안에다가 만든다.
        return `${this.name}이가 춤을 춥니다.`
    }
}

const ningning = new Idol('닝닝', 2002); //인스턴스 생성
const giselle = new FemaleIdol('지젤', 2000);

console.log(ningning.__proto__); //프로토 값을 가져오면 saySing이라는 값이 프로토(__proto__)안에 들어있다.
// ningning의 __proto__는  Idol.prototype이다  
console.log('-----------------------------------');
console.log(ningning.__proto__ === Idol.prototype);

// getPrototypeOf - 프로토(__proto__) 값을 가져오는 기능
console.log(Object.getPrototypeOf(ningning) === Idol.prototype); //ningning의  프로토타입을(prototype) 가져오라는 뜻
console.log('-----------------------------------');
// setPrototypeOf - 프로토(__proto__) 값을 변경하는 기능
console.log('-----------------------------------');
console.log(ningning.saySing()); // Idol의 프로로타입에는 saySing이 있어서 상속을 받았기 때문에 실행이 가능하다.
console.log(giselle.dance());

console.log('-----------------------------------');
console.log(Object.getPrototypeOf(giselle) === FemaleIdol.prototype); //giselle은 FemaleIdol의 프로토타입이다.
// console.log(giselle.saySing()); -> giselle에는 saySing()을 선언하지 않아서 오류가 난다.

Object.setPrototypeOf(giselle, Idol.prototype) //giselle의 프로토타입(prototype)을 변경하고자 하는 것을 두 번째 매개변수에 넣으면 된다.
// 인스턴스를 만든 다음 상속하는 대상을 변경하는 것

console.log('-----------------------------------');
console.log(giselle.saySing()); // 이미 생성된 객체의 상속 체인을 변경함

// __proto__를 변경했더니 상속받은 이 constructor property도  상속이 돼서 아예 constructor가 변경된 것을 볼 수 있다. -> 원래 프로토타입과의 연결이 끊겨버림
console.log(giselle.constructor === FemaleIdol); //__proto__를 바꾸지 않았다면 FemaleIdol 이어야 한다.
console.log(giselle.constructor === Idol); //true 가 나온다.
console.log(ningning.constructor === Idol); // true가 나온다.
console.log('-----------------------------------');
console.log(Object.getPrototypeOf(giselle) === FemaleIdol.prototype); // giselle에 프로토타입(prototype)을 가져왔을 때 FemaleIdol.prototype인지 비교한다.
console.log(Object.getPrototypeOf(giselle) === Idol.prototype);
console.log(FemaleIdol.prototype === Idol.prototype); // FemaleIdol.prototype이 Idol.prototype 인지 비교한다.
// giselle를 생성할 때 원래 사용됐던 FemaleIdol의 prototype은  Idol.prototype으로 변경되지는 않음 -> FemaleIdol 의 프로토타입(prototype)은 그대로 유지가 됐는데 FemaleIdol과 giselle 인스턴스(객체)와의 연결만 끊긴 것.
console.log('-----------------------------------');
// 함수의 프로토타입(prototype) 변경
FemaleIdol.prototype = Idol.prototype; // FemaleIdol의 프로토타입(prototype)을 Idol의 프로토타입으로 설정
console.log('-----------------------------------');
const karina = new FemaleIdol('카리나',2000); // 인스턴스 생성
console.log(Object.getPrototypeOf(karina) === FemaleIdol.prototype); //true가 나오는 이유 -> FemaleIdol로 생성했기 때문에 true가 나온다.
console.log(FemaleIdol.prototype === Idol.prototype);//FemaleIdol.prototype이 Idol.prototype과 같은지 비교 -> true 값 출력

실행 결과입니다. 
첫번째 소스부터 차근차근 분석해보겠습니다.  저도 학습하는데 어려워서 설명이 부족한 부분이 있습니다. 양해부탁드립니다!! 

 

const myObj = {}; //아무것도 프로퍼티가 없는 객체 생성

// __proto__ : 부모의 역 상속 체인을 의미한다 
// 모든 객체에 존재하는 프로퍼티다.
// 상속에서 부모 클래스에 해당되는 값이다.
// 일반 오브젝트 에서도 실행할 수 있는 이유 -> 클래스 또한 오브젝트로 인스턴스화 되기 때문이다.
console.log(myObj.__proto__);
 
function Idol(name, year){ //프로퍼티를 할당하면 생성자 함수를 생성할 수 있다.  
    this.name = name;  
    this.year = year;
}

먼저 myObj 라는 객체를 생성하고,  Idol 이라는 생성자 함수를 생성합니다. 
출력결과는 이렇게 Object 에 null 값인 prototype이 출력되는것을 볼 수 있습니다. 빈 객체라는 뜻이겟죠?

다음 소스는 static(정적)값을 출력하는 소스입니다 

console.log(Idol.prototype); //static(정적)값을 출력 - > 객체가 하나 출력됨(아무런 값도 없는 것처럼 보임)

 

아무런 값도 없는 것처럼 객체가 출력되는 것을 볼 수 있습니다.

다음은 console.dir - 감춰져 있는 값을 볼  수 있는 기능입니다

// 감춰져 있는 값을 볼 수 있는 기능(console.dir)
console.dir(Idol.prototype, {
    showHidden: true, // showHidden -> 감춰져 있는 값까지 다 보여주는 키워드
});

// Object 안에 Constructor 라는 키가 있고, Idol 함수가 Value값으로 들어가 있는 것을 볼 수 있다.
 
// circular reference (서로가 서로를 참조하고 있는 상태)

 

다음은 비교문 구문입니다.

console.log(Idol.prototype.constructor === Idol); //만약 Constructor를 가져오는데, Idol이랑 같은가?)
// prototype, Constructor 둘다 객체이기 때문에 메모리 공간상 봤을 때 같은 메모리 주소를 참조하고 있다고 봐도 된다.

 

console.log(Idol.prototype.constructor.prototype === Idol.prototype); 
// Idol 함수의 prototype 객체에 constructor가 가리키는 prototype 객체가 Idol 함수의 prototype 객체와 동일한지를 확인한다.

일단 'Idol'이라는 생성자 함수를 사용하여 새로운 객체 'winter'를 생성합니다.
// 'winter' 객체의 프로토타입을 콘솔에 출력합니다.
// 자바스크립트에서 모든 객체는 '__proto__'라는 속성을 가지고 있습니다.
// 이 속성은 해당 객체의 프로토타입 객체를 가리킵니다.
// 여기서 'winter.__proto__'는 'Idol' 함수의 프로토타입 객체를 가리킵니다.

const winter = new Idol('윈터', 2001);
console.log(winter.__proto__); // 출력 ->실제 객체가 존재

비교문 입니다. 해당 소스 내용은 주석에 설명해드렸습니다. 

console.log(winter.__proto__ === Idol.prototype); // winter 객체의 __proto__가 Idol 함수의 prototype 객체와 같은지 확인합니다.

console.log(myObj.__proto__ === Object.prototype); // myObj 객체의 __proto__가 Object의 prototype 객체와 같은지 확인합니다.

 

console.log(Idol.__proto__ === Function.prototype); // Idol 생성자 함수의 프로토타입이 Function.prototype과 같은지 확인합니다.

 

console.log(Function.prototype.__proto__ === Object.prototype); // Function.prototype의 프로토타입이 Object.prototype과 같은지 확인합니다.

 

console.log(Idol.prototype.__proto__ === Object.prototype); // Idol 생성자 함수의 prototype 객체의 프로토타입이 Object.prototype과 같은지 확인합니다.

 

// Idol의 부모는 Function이고 Function의 프로토타입의 부모는 Object이다.
// Idol은 Object까지 상속을 받게된다. -> Idol 프로토타입은 최상위객체가 Object.prototype이 된다.
// 상속을 받게되면 상속받은 대상의 모든 프로퍼티들을 저희가 상속받은 자식이 사용할 수 있다.
// 따라서 윈터 객체는 Object.prototype에 있는 기능까지 전부 사용할 수 있다

 

console.log(winter.toString()) // 'winter' 객체의 toString 메소드를 호출하고 그 결과를 콘솔에 출력합니다.
console.log(Object.prototype.toString()); // Object.prototype의 toString 메소드를 호출하고 그 결과를 콘솔에 출력,  Object.prototype 객체 자체를 문자열로 변환
// 상속체인, prototype chain(프로토타입 체인) - 프로토타입끼리 계속 연결되어 있는 것

Idol2 라는 객체를 생성하고  그 안에 saySing 함수를 작성합니다.

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

    this.saySing =  function(){ //saySing() 함수를 Idol2 객체 안에다가 작성
        return `${this.name}가 노래를 부릅니다.`;
    }
}

const winter2 = new Idol2('윈터', 2001);
const karina2 = new Idol2('카리나', 2000);

console.log(winter2.saySing());
console.log(karina2.saySing());

 

 

console.log(winter2.saySing === karina2.saySing);  // 'winter2' 객체와 'karina2' 객체가 같은 'saySing' 메소드를 가지고 있는지 확인합니다.

 

 

console.log(winter2.hasOwnProperty('saySing')) // 'winter2' 객체가 'saySing' 속성을 자신의 직접적인 속성으로 가지고 있는지 확인합니다.
// winter2만의 고유 프로퍼티이다.
// hasOwnProperty() : 상속을 받은 프로퍼티인지 아니면은  고유로 갖고 있던 객체만의 프로퍼티인지 확인할 수 있다.

 

function Idol3(name, year){  //이번엔 saySing() 함수를 Idol3 안에다가 정의하지 않음
    this.name = name;
    this.year = year;
}

Idol3.prototype.saySing = function(){ // Idol3.prototype에다가 saySing() 함수를 작성, 여기서 prototype은 객체를 만들면 __proto__가 가져가게 되는, 참조(reference)하게 되는 객체다.
    return `${this.name}가 노래를 합니다.`; 
}   

const winter3 = new Idol3('윈터', 2001);
const karina3 = new Idol3('카리나', 2001);
console.log(winter3.saySing()); //saySing은 상속이 돼서 실행이 가능함
console.log(karina3.saySing());

 

console.log(winter3.saySing === karina3.saySing);//'winter3' 객체와 'karina3' 객체가 같은 'saySing' 메소드를 가지고 있는지 확인합니다.

 

console.log(winter3.hasOwnProperty('saySing')); // false가 나온 상태는 상속받은 프로퍼티다 라는 것을 생각해 볼 수 있다.

 

// 'winter3' 객체가 'saySing' 속성을 자신의 직접적인 속성으로 가지고 있는지 확인합니다.
// hasOwnProperty 메소드는 객체가 특정 속성을 자신의 직접적인 속성으로 가지고 있는지를 확인하는 메소드
// 'saySing'이 'winter3'의 프로토타입 체인 어딘가에 존재하더라도, 'winter3' 객체 자체가 'saySing' 속성을 직접 가지고 있지 않다면 false를 반환합니다.

 

 

//sayStaticHi() 함수를 만드는 방법
Idol3.sayStaticHi = function(){ 
    return '안녕하세요 2024년도 대박나세요';
}

console.log(Idol3.sayStaticHi());

다음은 프로토타입을 오버라이딩에서도 활용하는 소스입니다. 

/** * Overriding - 상속 관계에 있는 두 객체가 같은 이름의 메소드를 가지고 있을 때, 자식 객체에서 부모 객체의 메소드를 재정의 하는것을 말한다. */

function Idol4(name,year){
    this.name = name;
    this.year = year;
   
    this.saySing = function(){ // Overriding ->  Idol4 함수에다가  this.saySing() = function 선언
        return '안녕하세요 저는 인스턴스 메서드 입니다.' 
    }
}
console.log('-----------------------------------');
// 상속받은 saySing을 인스턴스의 saySing으로 덮어 씌울 수가 있다.

 

Idol4.prototype.saySing =  function(){ //prototype 안에다가 Idol4 saySing 정의
     return '오늘은 어떤 노래를 불러볼까요';
} 
const winter4 = new Idol4('윈터',2001);
// property-shadowing(프로퍼티 셰도잉) - class(클래스)에서 override(오버라이드)랑 똑같다
console.log(winter4.saySing()); // 실행할 수 있다. -> 이유는 prototype을 상속을 받기 때문에 saySing() 함수는 존재

 

 

 

// 자바스크립트 OOP는 전통적인 OOP룰을 따르지 않는 게 굉장히 많기 때문에 -> 프로토타입 값이나 프로토 값을 변경 할 수 있다(상속받는 클래스를 변경할 수 있다.)
// 인스턴스(instance)를 생성하고 난 다음에도 생성할 수 있다.

/**
 * getPrototypeOf,  setPrototypeOf
 *  getPrototype - 매개변수에 들어오게된 Obejct의 __proto__ 값을 가져오게 된다
 * 
 * 인스턴스의 __proto__(proto) 변경 VS 함수의 프로토타입(prototype) 변경
 */
function Idol(name, year) { // 함수 재정의
    this.name = name;
    this.year = year;
   
}
Idol.prototype.saySing = function(){ //saySing() 함수 추가   
    return `${this.name}이가 노래를 부르고 있습니다.`;
    
}

function FemaleIdol(name, year){  //FemaleIdol 
    this.name = name;
    this.year = year;

    this.dance = function(){ //함수를 인스턴스안에다가 만든다.
        return `${this.name}이가 춤을 춥니다.`
    }
}

const ningning = new Idol('닝닝', 2002); //인스턴스 생성
const giselle = new FemaleIdol('지젤', 2000);

console.log(ningning.__proto__); //프로토 값을 가져오면 saySing이라는 값이 프로토(__proto__)안에 들어있다.
// ningning의 __proto__는  Idol.prototype이다

 

 

console.log(ningning.__proto__ === Idol.prototype); // 'ningning' 객체의 프로토타입이 'Idol'의 프로토타입과 동일한지 확인합니다.

getPrototypeOf 를 이용한 소스입니다.(get와 set 메서드 생각하시면 됩니다.)

// getPrototypeOf - 프로토(__proto__) 값을 가져오는 기능
console.log(Object.getPrototypeOf(ningning) === Idol.prototype); //ningning의  프로토타입을(prototype) 가져오라는 뜻

 

setPrototypeOf 를 이용한 소스입니다.

// setPrototypeOf - 프로토(__proto__) 값을 변경하는 기능
console.log(ningning.saySing()); // Idol의 프로로타입에는 saySing이 있어서 상속을 받았기 때문에 실행이 가능하다.

 

console.log(giselle.dance());

console.log(Object.getPrototypeOf(giselle) === FemaleIdol.prototype); //giselle은 FemaleIdol의 프로토타입이다.
// console.log(giselle.saySing()); -> giselle에는 saySing()을 선언하지 않아서 오류가 난다.

 

Object.setPrototypeOf(giselle, Idol.prototype) //giselle의 프로토타입(prototype)을 변경하고자 하는 것을 두 번째 매개변수에 넣으면 된다.
// 인스턴스를 만든 다음 상속하는 대상을 변경하는 것

console.log(giselle.saySing()); // 이미 생성된 객체의 상속 체인을 변경함

 

 

// __proto__를 변경했더니 상속받은 이 constructor property도  상속이 돼서 아예 constructor가 변경된 것을 볼 수 있다. -> 원래 프로토타입과의 연결이 끊겨버림
console.log(giselle.constructor === FemaleIdol);  // 'giselle' 객체의 생성자가 'FemaleIdol'인지 확인합니다.  //__proto__를 바꾸지 않았다면 FemaleIdol 이어야 한다.

 

 

console.log(giselle.constructor === Idol);  // 'giselle' 객체의 생성자가 'Idol'인지 확인합니다.

 

 

console.log(ningning.constructor === Idol); // 'ningning' 객체의 생성자가 'Idol'인지 확인합니다.

 

 

console.log(Object.getPrototypeOf(giselle) === FemaleIdol.prototype); // giselle에 프로토타입(prototype)을 가져왔을 때 FemaleIdol.prototype인지 비교한다.
console.log(Object.getPrototypeOf(giselle) === Idol.prototype);  // giselle에 프로토타입(prototype)을 가져왔을 때 Idol.prototype인지 비교한다.
console.log(FemaleIdol.prototype === Idol.prototype); // FemaleIdol.prototype이 Idol.prototype 인지 비교한다.
// giselle를 생성할 때 원래 사용됐던 FemaleIdol의 prototype은  Idol.prototype으로 변경되지는 않음 -> FemaleIdol 의 프로토타입(prototype)은 그대로 유지가 됐는데 FemaleIdol과 giselle 인스턴스(객체)와의 연결만 끊긴 것.

 

 

// 함수의 프로토타입(prototype) 변경
FemaleIdol.prototype = Idol.prototype; // FemaleIdol의 프로토타입(prototype)을 Idol의 프로토타입으로 설정
const karina = new FemaleIdol('카리나',2000); // 인스턴스 생성
console.log(Object.getPrototypeOf(karina) === FemaleIdol.prototype); //true가 나오는 이유 -> FemaleIdol로 생성했기 때문에 true가 나온다.
console.log(FemaleIdol.prototype === Idol.prototype);//FemaleIdol.prototype이 Idol.prototype과 같은지 비교 -> true 값 출력

부족한 설명은 주석으로 처리하였습니다!! 다음엔 자바스크립트에서 Scope(스코프)에 대해 알아보겠습니다.