[JavaScript] prototype 프로토타입에 대하여

오늘은 prototype에 대해서 공부했다. 

 

MDN을 참고해보니 JavaScript는 프로토타입 기반 언어로 클래스가 없지만 (클래스 키워드를 ES2015부터 지원을 하지만 문법적인 양념일 뿐, 자바스크립트는 프로토타입 기반 언어라고 명시되어 있다.) 프로토타입과 함수를 이용하여 클래스와 비슷하게 쓸 수 있다고 한다. 

 

 

자바스크립트에서는 객체나 함수에 속성을 넣어 둘 수 있는데 프로토타입을 이용하면 쉽게 속성 값들을 추가할 수 있다.

 

let protoFunc = function() {
  this.name = 'leo';
  this.age = 25;
}

let obj = new protoFunc(); // new 연산자로 프로토타입 기반의 인스턴스 생성

protoFunc.prototype.address = '주소'; // protoFunc() 프로토타입에 속성을 추가
protoFunc.prototype.money = 123456;

console.log(obj); 

// 출력 형태
// protoFunc {name: "leo", age: 25} 
// name: "leo"
// age: 25
// __proto__: Object -> 여기안에 새로 추가한 속성 값이 들어간다.
//   address: "주소" -> 마치 객체처럼 key : value 형식으로 들어가 있다.
//   money: 123456
//   constructor: ƒ ()
//   __proto__: Object



console.log(obj.address); // 주소  값이 잘나온다 -> 접근이 가능하다.
console.log(obj.money); // 123456

 

이렇게 자바스크립트에서 프로토타입을 이용하면 상속과 비슷하게 사용할 수 있다. 

 

new 연산자를 이용해 인스턴스를 생성하고 원 함수에 프로토타입 속성을 추가하면 생성된 인스턴스에도 영향이 간다. 

 

(class 키워드를 사용하 안에 생성자를 추가해주는 것과 유사하다. )

 

참고 자료 MDN : developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain