[Javascript] Class & Prototype 문법

Prototype 문법이란?

• 원래 자바스크립트에는 기존의 객체를 복사해서 새로운 객체로 생성하는
  프로토 타입 기반 언어로 Class란 개념이 없었다.
• 그래서 ES6 버전 이전까지는 기존의 객체를 복사, 새로운 객체로 생성하는 prototype 문법을 이용해왔다. 
• 객체를 만들면 객체에는 Prototype이라는 공간이 존재하게 된다.
• 이 prototype을 "유전자" 라고 생각하면 이해가 간단하다. (자식은 부모의 유전자를 이어받는다.)

function Skill(q,w){
//this = class에서 생성되는 object(instance)
 this.q = q;
 this.w = w;
}

//이렇게 자료를 수정하는것도 가능하다.
//이렇게 자료를 수정하면 Skill을 사용한 자식 전부 해당 데이터 사용이 가능하다.
Skill.prototype.name = 'KimMarine'

//메소드 생성 (obejct 데이터를 뽑는 장치) 
var Kight = new Skill('Attack','Defence');
console.log(Kight); // Skill {q: 'Attack', w: 'Defence'} 출력


//prototype라고 명시하는게 귀찮다면 instanceof 연산자를 사용하자.

 

• Kight에는 name이라는 속성이 없지만 어떻게 사용이 가능할까?
• 그 이유는 바로 Javascript에서는 Kight에 name이 존재하지 않는다면 부모객체에서 해당 속성을 찾는다.
• 그 부모에게도 없다면 또 상위 객체에게 물어보는 과정을 반복한다. (이 과정을 Prototype Chain 이라고 함)
• Prototype Chain에 대해 이해하면 여러가지 방법으로 응용이 가능하다.
• 우리가 평소 사용하는 Array자료에 sort, length 등 함수를 그냥 쓸 수 있는 것도 Array의 부모 유전자에
  기록되어 있기 때문에 자식 Array에서 바로 사용할 수있는 것이다.
• 그래서 직접 반복되는 기능이 있다면 원하는 자료에 추가하여 모든자료에서 사용할 수 있게 만들 수 있다.

//예를 들어 반복되는(기능) 함수가 있어서 그걸 Array에서 사용하고싶다
//이런식으로 하면 모든 어레이에서 해당함수를 기본함수처럼 사용이 가능해짐
Array.prototype.함수 = function 반복기능함수(){}

 

Class 문법이란? 

• ES6에 추가된 문법으로 java스럽게 객체지향적으로 표현하기 위한 새로운 문법을 의미한다.
• Object를 복사할 때 유용한 문법 유용하다.

class Car {
	/*
    constructor는 인스턴스를 생성하고 고유데이터를 초기화하기 위한 
    특수한 메서드로 클래스 안에 한 개만 존재할 수 있고, 이름 변경이 불가능하다
    */
    constructor({name,price}){
    	//this : 클래스가 생성할 인스턴트
        this.name = name;
        this.price = price;
    }  
    Carfunction() {
        return `해당 모델은 ${this.name} 가격은 ${this.price}입니다.`;
    } 
}

let car = new car({name: 'model3', price : 6000});
console.log(car.Carfunction()); // 해당 모델은 model3 가격은 6000 입니다. 출력됨

 

• 클래스 필드(객체의 고유데이터, 상태정보)의 선언과 초기화는 반드시 constructor 내부에서 이뤄져야한다.
• 고유데이터는 해당 인스턴트의 속성이되어 public 클래스 외부에서 언제든지 참조 가능하다.