JavaScript_프로토타입1

자바스크립트 프로토타입에 대해 간단하게 정리해보았다.

소스코드의 경우 대부분 Mdn을 바탕으로 작성하였다.

 

Classes in JavaScript - Web 개발 학습하기 | MDN

 

1. 프로토타입

자바스크립트는 프로토타입 기반의 객체 지향 언어이다.

• 자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있으며,
• 모든 객체는 그들의 프로퍼티와 메소드를 상속 받는다.
• 자바스크립트에서는 현재 존재하고 있는 객체를 프로토타입으로 사용하여, 
• 해당 객체를 복제하여 재사용하는 것을 상속이라고 한다.

2. 프로토타입 체인 

• 자바스크립트에 내장된 모든 생성자나 사용자 정의 생성자는 바로 이 객체를 프로토타입으로 가진다.
• Object.prototype 객체는 이러한 프로토타입 체인에서도 가장 상위에 존재하는 프로토타입이다.
• Object를 상속받은 객체에서 사용 가능한 수 많은 메소드들이 Object의 prototype속성에 정의되어 있다.

아래와 같이 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인(prototype chain)이라고 한다.

 

var date = new Date(); // 이 객체는 Date.prototype 뿐만 아니라 Object.prototype도 프로토타입으로 가진다.

 

3. 프로토타입의 생성

객체 생성자 함수(object constructor function) 를 작성하여 프로토타입을 생성할 수 있다.

function Person(name,age,gender){   //사람에 대한 생성자 함수 작성
	this.name = name;
    this.age = age;
    this.gender = gender;
}

var person1 = new Person("JiWoo",24,"female"); // person1이라는 객체는 Person 이라는 prototype을 가짐.

4. 이미 생성된 객체에 새로운 프로퍼티, 메소드 추가

 오직 person1 인스턴스에만 추가

function Person(name,age,gender){   //사람에 대한 생성자 함수 작성
	this.name = name;
    this.age = age;
    this.gender = gender;
}

var person1 = new Person("JiWoo",24,"female"); // person1이라는 객체는 Person 이라는 prototype을 가짐.

person1.nationality = "korea";  			  // 국적에 관한 프로퍼티 추가
person1.greeting = function(){			      // 인사 하는 메소드 추가
	alert('Hi,I'm ${this.name}');
}

5. 프로토타입에 새로운 프로퍼티 및 메소드 추가

현재 존재하고 있는 프로토타입에 새로운 프로퍼티나 메소드를 손쉽게 추가

function Person(name,age,gender){   //사람에 대한 생성자 함수 작성
	this.name = name;
    this.age = age;
    this.gender = gender;
}
  
//현재 존재하고 있는 Person prototype에 새로운 프로퍼티 추가
Person.prototype.nationality = "korea"
//현재 존재하고 있는 Person prototype에 새로운 매소드 추가
Person.prototype.greeting = function(){			      
	alert('Hi,I'm ${this.name}');
}

참고자료: 
TCP스쿨: http://www.tcpschool.com/javascript/js_object_prototype

블로그: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67