prototype이란..

프로토타입이란!..건 말이야..

자바스크립트는 prototype기반의 언어라고 한다.
내가 이해한 프로토 타입은 현재 내가 주체로 쓰고 있는 변수명의 원형을 말하는 것이다. 라고 말하고 자료를 찾다보니 재미있는 개념들이 몇 가지 나온다. 오늘은 이 개념에 대해 떠들어보려 한다.

let obj = {};와 let obj = new Object();는 같다.

한번 더 말하지만, 자바스크립트는 프로토타입 기반의 언어다. 따라서 상속이라는 개념을 현재 존재하는 객체를 원형으로 하여, 해당 객체를 복사해 재사용하는 방식을 사용한다.
결국 자바스크립트의 모든 객체는 해당 객체의 프로토타입 객체부터 가장 상위 객체인 Object까지의 모든 속성과 메서드를 상속받는다.

예를 들어

let date = new Date();

date라는 변수를 선언한다면, Date라는 객체의 속성과 메서드 뿐만 아니라 Object의 속성과 메서드 또한 상속받는다.

이를 통해 알 수 있는 점은, prototype은 생성할 수 있고, 메서드나 속성도 추가할 수 있다는 것이다.

1. prototype의 생성

function myfamily(age, name, role){//가족에 대한 함수 생성
  this.age = age;//나이에 대한 속성 생성
  this.name = name;//이름에 대한 속성 생성
  this.role = role;//역할에 대한 속성 생성
}

let mom = new myfamily(47,'ajs','mother');

console.log(mom);//myfamily{age: 47, name: 'ajs', role: 'mother'}

이 코드에서 myfamily는 프로토타입이며, 이 프로토타입의 속성을 가져온 객체인 mom을 만들 수 있다.

2. prototype에 속성이나 메서드 추가

prototype에 속성이나 메서드를 추가하는 방법에는 2가지 방법이 있다.

1. 생성자 함수에 직접 추가하는 방법
2. prototype 메서드를 통해 추가하는 방법

생성자 함수 선언 이후의 객체들에 모두 새로 추가한 속성이나 메서드가 적용되게 하려면, 생성자 함수에 직접 추가해야만 한다.

1. 생성자 함수에 직접 추가하는 방법

이 방법은 함수 선언 이후에 등장하는 객체들에 적용이 가능하다.

function myfamily(age, name, role){
  this.age = age;
  this.name = name;
  this.role = role;
  this.family = 'tess';//속성 추가시에 기본값 지정 가능
  this.introduce = function(){
    return `안녕하세요 ${this.family}의 가족 ${this.name}입니다.`
  }//소개하는 메서드 생성
}

let mom = new myfamily(47,'ajs','mother');
mom.introduce()//'안녕하세요 tess의 가족 ajs입니다.'

2. prototype 메서드를 통해 추가하는 방법

이 방법은 생성자 함수를 찾기 어려울 경우 편리하게 사용이 가능하다.

function myfamily(age, name, role){
  this.age = age;
  this.name = name;
  this.role = role;
}

myfamily.prototype.family = 'tess';//현재 존재하는 myfamily함수에 family속성 추가
myfamily.prototype.introduce = function(){
    return `안녕하세요 ${this.family}의 가족 ${this.name}입니다.`
}//현재 존재하는 myfamily함수에 introduce메서드 추가 

let mom = new myfamily(47,'ajs','mother');
mom.introduce()//'안녕하세요 tess의 가족 ajs입니다.'
console.log(mom);//myfamily{age: 47, name: 'ajs', role: 'mother', family: 'tess'}