[Object] JS - Object Prototypes - 객체프로토타입 (= 객체원형) ★

객체 생성자

이전 시간에 배운 내용 복습

 

<p id="demo"></p>

<script>

function Site(nameValue, hostValue, openValue) {

  this.name = nameValue;

  this.host = hostValue;

  this.open = openValue;

}

var hz  = new Site("홈짱닷컴", "Homzzang.com", 2012);

var sir = new Site("그누보드", "Sir.kr", 2001);

var hz_site = hz.name + " " + hz.host + " " + hz.open;

var sir_site = sir.name + " " + sir.host + " " + sir.open;

document.getElementById("demo").innerHTML = hz_site + " / " + sir_site; 

</script>

 

결과보기 : 홈짱닷컴 Homzzang.com 2012 / 그누보드 Sir.kr 2001

---

 

※ 기존 객체에 새 속성 추가하는 방식으로는 객체 생성자에 새 속성 추가 못함.

 

<p id="demo"></p>

<script>

function Site(nameValue, hostValue, openValue) {

  this.name = nameValue;

  this.host = hostValue;

  this.open = openValue;

}

Site.code = "HTML CSS JS JQ PHP SQL";

  

var hz  = new Site("홈짱닷컴", "Homzzang.com", 2012);

var sir = new Site("그누보드", "Sir.kr", 2001);

  

document.getElementById("demo").innerHTML = hz.code;

</script>

 

결과보기 : undefined

---

 

※ 생성자에 새 속성 추가하려면 생성자 함수 안에 추가해야 함.

※ 이 방법으로, 객체 속성이 기본값 갖을 수 있음. 

 

<p id="demo"></p>

<script>

function Site(nameValue, hostValue, openValue) {

  this.name = nameValue;

  this.host = hostValue;

  this.open = openValue;

  this.code = "HTML CSS JS JQ PHP SQL";

}

 

var hz  = new Site("홈짱닷컴", "Homzzang.com", 2012);

var sir = new Site("그누보드", "Sir.kr", 2001);

  

document.getElementById("demo").innerHTML = hz.code;

</script>

 

결과보기: HTML CSS JS JQ PHP SQL

프로토 타입 상속

 

1.

모든 JS 객체는 프로토 타입에서 속성과 메서드를 상속.

(예)

Date 객체는 Date.prototype에서 상속.

Array 객체는 Array.prototype에서 상속

Site 객체는 Site.prototype에서 상속

 

2.

Object.prototype은 프로토 타입 상속 체인의 맨 위에 있음.

Date 객체, Array 객체, Site 객체는 Object.prototype에서 상속됨.

 

객체에 속성과 메소드 추가 

객체에 새로운 속성 (또는 메소드) 추가 경우 : 앞장에서 배운대로 하면 됨.

객체 생성자에 새로운 속성 (또는 메서드) 추가 경우 : 지금 배우는 prototype 속성 이용하면 편함.

 

prototype 속성 - 객체 생성자에 속성・메서드 추가

 

※ JS prototype 속성 사용하면 객체 생성자에 새로운 속성 추가 가능.

 

<p id="demo"></p>

<script>

function Site(nameValue, hostValue, openValue) {

  this.name = nameValue;

  this.host = hostValue;

  this.open = openValue;

}

Site.prototype.code = "HTML CSS JS JQ PHP SQL";

var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);

 

document.getElementById("demo").innerHTML = hz.code; 

</script>

 

결과보기 : HTML CSS JS JQ PHP SQL

---

 

※ JS prototype 속성 사용하면 객체 생성자에 새로운 메서드 추가 가능.

 

<p id="demo"></p>

<script>

function Site(nameValue, hostValue, openValue) {

  this.name = nameValue;

  this.host = hostValue;

  this.open = openValue;

}

Site.prototype.intro = function() {

  return this.name + " " + this.host

};

var hz = new Site("홈짱닷컴", "Homzzang.com", 2012);

document.getElementById("demo").innerHTML = hz.intro(); 

</script>

 

결과보기: 홈짱닷컴 Homzzang.com

---

 

★ 자신만의 프로토 타입만 수정. 표준 JS 객체의 프로토 타입은 수정 금지.