blog

(J) 프로토타입, 프로토타입 체인, 상속

1. 생성자 프로토타입을 소개하기 전에 생성자란 무엇인가요? 생성자도 함수의 형태로 차이가 없지만 생성자를 사용할 때는 새로운 키워드로 호출해야 합니다. 또한 생성자의 첫 글자인 ...

Oct 21, 2025 · 9 min. read
シェア

생성자

프로토타입을 소개하기 전에 생성자란 무엇인가요?

생성자도 함수이며, 표현 방식에 있어서는 생성자와 함수 사이에 차이가 없지만 생성자를 사용할 때는 new 키워드를 사용하여 호출해야 합니다. 또한 생성자()의 첫 글자는 대문자로 표기하는 것이 일반적인 관행입니다.

new 키워드는 생성자의 내부 작업을 호출합니다.

생성자가 new 키워드로 호출되면 다음과 같은 프로세스가 진행됩니다.

  1. 빈 객체인 새 객체를 만듭니다.
  2. 새 객체 __proto___의 프로토타입은 생성자의 프로토타입을 가리킵니다.
  3. this는 새 객체를 가리킵니다.
  4. 생성자의 내부 코드를 가리킵니다.
  5. 생성자가 복합 유형 데이터를 반환하도록 지정되지 않은 경우 this를 반환하고, 그렇지 않으면 지정된 데이터를 반환합니다.

프로토타입 [[프로토타입]] 2.

프로토타입이란 무엇인가요?

모든 객체()에는 프로토타입이 있으며, 프로토타입은 객체 간의 연결로 이해될 수 있으며 상속 및 속성 공유 메커니즘을 달성하는 데 사용됩니다.

객체의 프로토타입은 __proto___이고, 함수의 프로토타입은 프로토타입이며, 함수도 객체로 간주되므로 __proto___도 갖게 됩니다.

  • 명시적 프로토타입: function.prototype을 사용하여 함수의 프로토타입을 가져올 수 있습니다.
  • 암시적 프로토타입: 테스트 코드를 작성할 때 객체의 프로토타입을 가져오는 데 사용되며, 객체를 사용할 수 있습니다. __proto___ 방법을 사용할 수 있습니다.

객체 및 함수 객체의 프로토타입은 다음을 가리킵니다.

프로토타입 포인팅의 경우 객체 프로토타입이 생성자를 찾는다는 점은 항상 동일합니다.

생성자에 의해 생성된 객체, 그 프로토타입 __proto___는 생성자의 프로토타입을 가리키고, Object.prototype.__proto__ 제외한 다른 객체 형식은 Object.prototype을 가리킵니다.

2. 함수 객체의 프로토타입은 기본적으로 생성자를 포함하는 객체를 가리킵니다.



  1. 객체는 리터럴 생성과 "새" 생성자를 통해 생성할 수 있습니다.

    리터럴 생성은 new Object()의 단축된 형태이므로 리터럴 객체의 프로토타입은 생성자 객체의 프로토타입을 가리킵니다.

  2. 함수 객체의 명시적 프로토타입 프로토타입은 값이 함수 객체 자체인 속성 생성자가 존재하는 객체입니다. 함수 객체의 암시적 프로토타입 __proto___은 생성자 Fucntion의 프로토타입을 가리킵니다.

function Person(){}
const p1 = new Person()

위 코드의 경우 프로토타입은 다음을 가리킵니다.

객체 속성 또는 메서드에 대한 게터 조회 규칙

객체에서 속성이나 메서드를 가져올 때 객체 자체를 검색하고, 찾을 수 없는 경우 객체의 프로토타입에서 검색합니다.

생성자 프로토타입에 속성 또는 메서드 추가하기

생성자 프로토타입에 속성 또는 메서드를 추가해야 하는 이유

다음 코드를 준수하세요.

function Person(name, age) {
  this.name = name;
  this.age = age;
 
  this.eating = function () {
    console.log(`${this.name}   `);
  };
 
  this.runing = function () {
    console.log(`${this.name}   `);
  };
}
const p1 = new Person("p1", 18);
const p2 = new Person("p2", 18);
const p3 = new Person("p3", 18);

Person 생성자가 new를 통해 호출될 때마다 메서드를 먹고 실행하는 메서드가 생성되므로 메모리 공간을 낭비하고 완전히 불필요합니다.

위에서 언급했듯이 객체 속성 및 메서드에 대한 게터 조회 규칙을 사용하면 속성 및 메서드를 생성자의 프로토타입에 직접 추가할 수 있으므로 클래스의 인스턴스가 여러 복사본을 만드는 대신 동일한 메서드 코드를 서로 공유할 수 있습니다.

그렇다면 생성자의 프로토타입에 어트리뷰트 또는 메서드를 추가하는 방법은 무엇일까요?

생성자 함수의 프로토타입에 속성 또는 메서드를 추가하는 방법

이런 식으로 생성자.prototype.xxx = xx 사용하여 프로토타입에 속성이나 메서드를 하나씩 추가하는 것도 가능하지만, 매번 constructor.prototype.xxx를 통해 추가해야 하는 것이 더 번거롭다고 판단되면 constructor.prototype = {}를 사용하여 값을 전체적으로 할당할 수 있지만 원래는 constructor.prototype의 생성자 속성이 있는데, 이 속성은 열거할 수 없습니다. 그런 다음 생성자를 별도로 정의해야 합니다. 코드는 다음과 같습니다:

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype = {
  eating: function () {
    console.log(`${this.name}   `);
  },
  runing: function () {
    console.log(`${this.name}   `);
  },
};
Object.defineProperty(Person, "constructor", {
  configurable: true,
  writable: true,
  enumerable: false,
  value: Person,
});
const p1 = new Person("p1", 18); //p1

프로토타입 포인팅 다이어그램

몇 가지 특별한 프로토타입은 다음과 같습니다.

console.log(Object.__proto__ == Function.prototype); //true 
//Object는 함수 객체이기도 하므로 new Fucntion()의 축약형이며, 그 값은 다음과 같습니다.{construtor:Function,__proto__:object.prototype}
console.log(Function.prototype.__proto__ == Object.prototype);//true 
console.log(Object.prototype.__proto__ == null);//true
console.log(Function.__proto__ == Function.prototype);//true Function도 함수 객체이므로 new Fucntion()의 줄임말입니다.，

프로토타입 체인 [[프로토타입 체인]]

가장 먼저 알아야 할 것은 프로토타입도 하나의 객체이며, 프로토타입에는 프로토타입이 있다는 것입니다.

프로토타입 체인이란 무엇인가요?

프로토타입 체인은 같은 하나의 프로토타입으로 구성된 상속을 달성하기 위한 js의 메커니즘으로, 프로토타입 체인의 최상위는 Object.prototype(null이라고 말하는 다른 방법도 있음)입니다.

메서드를 호출하거나 객체에서 프로퍼티를 사용할 때 객체 자체에 없는 경우 프로토타입 체인에서 반환을 찾기 위해 최상위 계층을 찾지 못하면 정의되지 않은 반환을 반환합니다.

상속

상속이란 무엇인가요?

상속은 다음 코드에서와 같이 다른 객체의 속성 또는 메서드를 상속하는 것입니다.

function Student(name, age) {
  this.name = name;
  this.age = age;
}
Student.prototype.eating = function () {
  console.log("먹을 수 있다");
};
Student.prototype.running = function () {
  console.log("실행할 수 있습니다.");
};
Student.prototype.learning = function () {
  console.log("배울 수 있습니다 ");
};
 
function Teacher(name, age) {
  this.name = name;
  this.age = age;
}
Teacher.prototype.eating = function () {
  console.log("먹을 수 있다");
};
Teacher.prototype.running = function () {
  console.log("실행할 수 있습니다.");
};
Teacher.prototype.teaching = function () {
  console.log("가르칠 수 있습니다.");
};

위의 두 생성자 Student와 Teacher를 살펴보면이 두 생성자에는 이름과 나이 속성과 메소드가 먹고 실행되는 메소드가 있으며, 작업자, 드라이버 등과 같은 다른 생성자가 있으면 다시 재정의 할 필요가 없습니까? 코드 중복을 피할 수 있는 방법이 있나요? 네, 상속을 이용하는 방법이 있습니다. 생성자를 Person으로 정의하면 이 생성자는 공통 속성을 가지며, 다른 생성자는 그 위에 Person을 상속할 수 있습니다.

상속을 구현하는 방법

프로토타입 체인 상속

원칙: 인스턴스에서 찾을 수 없으면 프로토타입에서 찾을 수 있다는 사실을 활용하세요.

장점: 메서드 상속이 구현됩니다.

단점:

  1. 프로퍼티 상속이 아닌 메서드 상속만 구현됩니다.

  2. 학생 프로토타입에 메서드를 추가하면 개인 프로토타입에도 메서드가 추가됩니다.

  3. 유형은 Person

function Person() {}
Person.prototype.eating = function () {
  console.log("Eat");
};
Person.prototype.running = function () {
  console.log("run");
};
function Student() {
 this.name = name
}
// 이 코드 줄은 프로토타입 체인 상속을 구현합니다.
Student.prototype = new Person()
Student.prototype.learning = function () {
  console.log("배우기");
};
const stu1 = new Student('stu1')





빌린 생성자 상속

원칙: 호출을 사용하여 속성 상속의 '이' 바인딩을 변경합니다.

장점: 자산 상속이 구현됩니다.

단점: 메서드를 상속할 수 없습니다.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
function Student(name, age, sno) {
  // 이 라인은 차용된 생성자 상속을 구현합니다.
  Person.call(this, name, age);
  this.sno = sno;
}
let stu = new Student("stu", 18, "18452");





결합 상속

원칙: 프로토타입 상속과 빌린 생성자 상속의 조합입니다.

장점: 속성 상속 및 메서드 상속이 구현됩니다.

단점:

  1. 는 Person 생성자를 두 번 호출합니다.
  2. 학생 프로토타입에 추가된 메서드는 개인 프로토타입에 나타납니다.
  3. 스튜 오브젝트 인스턴스와 프로토타입에 이름과 나이 속성을 동시에 표시하는 방법

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.eating = function () {
  console.log("Eat");
};
Person.prototype.running = function () {
  console.log("run");
};
function Student(name, age, sno) {
  // 호출 생성자 상속
  Person.call(this, name, age);
  this.sno = sno;
}
// 프로토타입 체인 상속
Student.prototype = new Person();
Student.prototype.learning = function () {
  console.log("배우기");
};
let stu = new Student("stu", 18, "18452");





프로토타입 상속

원칙: 빈 객체를 매개체로 사용하여 빈 객체의 생성자의 프로토타입에 객체를 할당합니다.

장점: 속성 상속 및 메서드 상속이 구현됩니다.

단점:

  1. 생성자 상속이 아닌 객체 상속만 가능합니다.
  2. 매개 변수를 전달할 수 없고, stu1.name을 통해서만 수정할 수 있으며, 수정이 완료된 후에는 stu1 인스턴스에 대한 이름 수정일 뿐이며 이름 속성은 여전히 프로토타입에 존재하고 person의 값을 갖습니다.
  3. 참조 유형인 경우 여러 인스턴스가 동일한 참조 유형 속성을 가리키는 동일한 참조 유형 속성을 가지며, 변조 가능성이 있습니다.
// create프로토타입 상속을 구현하는 함수
function createObject(obj) {
  function foo() {}
  foo.prototype = obj;
  return new foo();
}
const person = {
  name: "person",
  friends: ["a", "b"],
  running: function () {
    console.log("run");
  },
};
// stu1사람으로부터 상속
const stu1 = createObject(person);
stu1.name = "stu1";
stu1.friends.push("c");
// stu2사람으로부터 상속
const stu2 = createObject(person);
stu2.name = "stu2";
console.log(stu2.friends); //Array(3) [ "a", "b", "c" ]

stu1.



stu2.







기생 상속

원칙: 프로토타입 상속과 팩토리 기능의 결합

장점: 속성 상속 및 메서드 상속이 가능하며 원래 유형을 기반으로 매개변수를 전달할 수 있습니다.

단점:

  1. 여전히 객체 상속일 뿐입니다.
  2. 그래도 참조 유형인 경우 여러 인스턴스가 동일한 참조 유형 속성을 가리키게 되며, 동일한 참조 유형 속성을 가리키는
function createObject(obj, name, age) {
  function foo() {}
  foo.prototype = obj;
 
  foo.name = name;
  foo.age = age;
  foo.friends = ["a", "b", "c"];
  return new foo();
}
const person = {
  name: "person",
  friends: ["a", "b"],
  running: function () {
    console.log("run");
  },
};
// stu1사람으로부터 상속
const stu1 = createObject(person, "stu1", "18");
stu1.name = "stu1";
stu1.friends.push("c");
// stu2사람으로부터 상속
const stu2 = createObject(person, "stu2", "20");
stu2.name = "stu2";
console.log(stu2.friends); //Array(3) [ "a", "b", "c" ]

stu1.



stu2.







기생 조합 상속 ! 최종 솔루션

원칙: 프로토타입 상속과 호출 생성자 상속의 조합으로, 프로토타입 상속인 createObject 메서드 대신 메서드를 사용합니다.

function Person(name, age, friends) {
  this.name = name;
  this.age = age;
  this.friends = friends;
}
Person.prototype.eating = function () {
  console.log(this.name + ` `);
};
Person.prototype.running = function () {
  console.log(this.name + ` `);
};
function Student(name, age, friends, sno) {
  // 속성 상속이 구현됩니다.
  Person.call(this, name, age, friends);
  this.sno = sno;
}
 
Student.prototype = Object.create(Person.prototype, {
//생성자가 유형을 가리키도록 수정합니다.
  constructor: {
    writable: true,
    configrable: true,
    value: Student,
  },
});
// 최상위 객체.create이는 메서드 상속을 구현하는 다음 의사 코드와 동일합니다.
//Student.prototype = { constructor: Student, __proto__: Person.prototype };
Student.prototype.learning = function () {
  console.log(this.name + ` `);
};
let stu = new Student("stu1", "18", [{ one: "bob" }], "1106");

Read next

2023-2024년 최고의 인공 지능 도구 (1)

인공 지능 분야의 급속한 성장과 함께 점점 더 많은 새롭고 예상치 못한 애플리케이션이 개발되고 있습니다. 이러한 앱의 범위는 비즈니스와 개인 영역 모두에서 방대합니다. 하지만 이러한 인공지능 도구를 사용하는 이유는 사람이라는 하나의 공통분모로 요약할 수 있습니다.

Oct 21, 2025 · 3 min read

내보내기 후 함수

Oct 21, 2025 · 1 min read

나코스 듀얼 버전 업그레이드 실무 매뉴얼

Oct 21, 2025 · 8 min read

헤더 콘텐츠의 잘못된 문자셋인 http 400을 기억하세요.

Oct 20, 2025 · 2 min read

GpuMall SSH 로그인 예시 세부 정보

Oct 20, 2025 · 12 min read

v-if와 v-for의 우선 순위는 무엇인가요?

Oct 20, 2025 · 1 min read