[Javascript] 14강 Javascript의 프로토타입 객체

 

자바스크립트에 프로토타입 객체는 객체 지향 프로그래밍 중 중요한 개념 중 하나로, 객체는 다른 객체를 상속받을 수 있습니다. 이를 통해서 코드의 재사용성과 유연성을 높일 수 있습니다.

---

1. 프로토타입 객체의 주요 개념

• 프로토타입
  • 모든 자바스크립트 객체는 prototype이라는 속성을 가짐
  • 이 속성은 객체가 상속받을 수 있는 메서드와 속성을 정의
• 프로토타입 체인
  • 객체가 특정 속성이나 메서드를 찾을 때, 자바스크립트는 먼저 해당 객체 자체에서 찾고, 없다면 그 객체의 프로토타입을 확인, 이 과정을 반복하며, 이를 프로토타입 체인이라함
• 생성자 함수
  • 객체를 생성하기 위해 생성자 함수를 사용, 이 함수의 prototpe 속성에 메서드를 추가가능, 생성된 객체는 이 메서드에 접근할 수 있음

---

2. 프로토타입 속성

모든 자바스크립트 객체에는 __proto__ 속성을 통해 자신의 프로토타입 객체에 접근할 수있습니다. 객체를 선언하려먼 아래와 같습니다.

// 생성자 함수 정의
function Person(name) {
  this.name = name;
}

 

우선 속성에 대한 메서드를 선언하고 객체에 상속받은 속성과 메서드를 포함합니다.

Person.prototype.run = function () {
  console.log(this.name + "가 달립니다");
};

const human = new Person("James");
human.run(); // James가 달립니다

---

3. Object.create()

Object.create() 메서드는 지정한 프로토타입 객체를 가진 새 객체로 생성해 프로토타입 체인을 쉽게 설정할 수 있습니다.

const hobby = {
  speak: function () {
    console.log(this.name + "의 취미는" + " " + this.rugby + "입니다");
  },
};

const Jason = Object.create(hobby);
Jason.name = "제이슨";
Jason.rugby = "럭비";
Jason.speak(); // 제이슨의 취미는 럭비입니다.

---

3.생성자 속성

생성자 함수는 객체를 생성하는 함수로, prototype 속성을 통해 메서드나 속성을 추가할 수 있습니다. 일반적으로 대문자로 시작하는 이름을 가집니다.

function IceCream(kind) {
  this.kind = kind;
}

IceCream.prototype.eat = function () {
  console.log(
    "제가 좋아하는 베스킨라빈스 아이스크림은" + " " + this.kind + "입니다"
  );
};

const st = new IceCream("슈팅스타");
st.eat(); // "제가 좋아하는 베스킨라빈스 아이스크림은 슈팅스타 입니다"

---

4. 프로토타입 수정하기

프로토타입은 런타임에 수정할 수 있으며, 이를 통해서 모든 인스턴스에 영향을 줄 수 있습니다.

function IceCream(kind) {
  this.kind = kind;
}

IceCream.prototype.eat = function () {
  console.log(
    "제가 좋아하는 베스킨라빈스 아이스크림은" + " " + this.kind + "입니다"
  );
};

IceCream.prototype.cake = function () {
  console.log(
    "제가 좋아하는 베스킨라빈스 아이스크림 케이크는" +
      " " +
      this.kind +
      "입니다"
  );
};

// const st = new IceCream("슈팅스타");
const st = new IceCream("포차코의 러블리 윈터");

// st.eat(); // "제가 좋아하는 베스킨라빈스 아이스크림은 슈팅스타 입니다"
st.cake(); // "제가 좋아하는 베스킨라빈스 아이스크림 케이크는 포차코의 러블리 윈터입니다"

---

요약

• 프로토타입 속성: 객체가 상속받은 메서드와 속성을 정의
• Object.create(): 새로운 객체를 생성하고, prototype을 사용해 메서드를 추가
• 생성자 속성: 생성자 함수를 통해 객체를 생성하고, prototype을 사용해 메서드를 추가
• 프로토타입 수정: 프로토타입을 수정해 모든 인스턴스에 새로운 속성이나 메서드를 추가할 수 있음

---

 

GitHub - javascript-only/javascript-bloging