javaScript Prototype이란?

202210월 06

  1. Prototype이란?

  2. Prototype chain

  3. Prototype객체에 프로퍼티 추가

  4. Prototype객체 변경


Prototype이란?

자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 이게 무슨뜻이냐면 자바스크립트는

다른 클래스 기반 언어인 Java, C++과는 달리 클래스가 없다는 이야기입니다. 아니 js에서 class

사용하는데 클래스가 없다구요? 이게 무슨 말이죠? 라고 하실수도 있는데 사실 자바스크립트는 class를

사용하고 싶어서 인위적으로 class의 탈을 쓴 객체라고 말할수 있습니다. (ECMAScript 6에서 class 추가됨)

자바스크립트의 모든 객체는 자신의 부모 객체와 연결이 되어있습니다.

자바스크립트는 원시타입을 제외한 모든 것이 객체입니다. (number, string... 등등 제외)

연결이 되어있다는 것은 모든 객체는 부모 객체에게 프로퍼티나 메소드를 상속받아 사용할 수 있습니다.

이러한 부모 객체를 prototytpe객체 라고 합니다.

let human = {
  name: "kang",
  age: 26,
};

console.log(human.hasOwnProperty("name")); // true

이렇게 human이라는 객체는 hasOwnProperty메소드가 없지만 에러가 뜨지 않습니다.

그 이유는 부모 객체안에 hasOwnProperty라는 메소드가 존재하기 때문에 사용할수있는거죠

가끔 [[Prototype]] 슬롯이 있는 경우도 있지만 prototype 프로퍼티를 소유하는 경우가 있습니다.

함수 객체일경우 일반 객체와달리 prototype 프로퍼티를 소유한다고 합니다.

1


Prototype chain

모든 객체는 부모 객체인 prototype을 가지고 부모 객체의 프로퍼티나 메소드를 사용할수 있다고 했는데

어떠한 원리로 부모 객체의 프로퍼티를 가져와서 사용할수가 있을까요? 바로 Prototype chain

이용합니다. 자바스크립트는 특정 객체의 프로퍼티나 메소드에 접근하려고 할 때 해당 객체에 접근하려는

프로퍼티 또는 메소드가 없다면 [[Prototype]]이 가리키는 링크를 따라 자신의 부모 역할을 하는

프로토타입 객체의 프로퍼티나 메소드를 차례대로 검색합니다.

2


Prototype객체에 프로퍼티 추가

prototype객체에 프로퍼티를 추가하거나 삭제 할수도있습니다.

function Human(name) {
  this.name = name;
}

const abc = new Human("kang");

Human.prototype.sayHello = function () {
  console.log("안녕 내 이름은 " + this.name);
};

// 에러가 뜨지 않는다.
abc.sayHello();

Prototype객체 변경

초기에 생성된 Prototype객체를 변경할수가 있습니다. 생각외로 매우 간단한데요

Human.prototype = { wright: 100 };

이런식으로 다른 객체를 넣으면 됩니다.