[JS] JS 생성자와 프로토타입

자바나 c++등은 같은 프로퍼티를 갖는 객체를 여러 개 생성하는 수단으로 클래스를 제공

클래스는 붕어빵 틀에 비유할 수 있는데 붕어빵 틀을 사용하면 모양이 같은 붕어빵을 얼마든지 생성가능하다. 마찬가지로 클래스를 사용하면 프로퍼티가 똑같은 객체를 얼마든지 만들 수 있다.

하지만 자바스크립트는 함수형 언어로 클래스가 없다.
다만, 생성자 라고 하는 함수로 객체를 생성할 수 있다.

//다음 코드는 트럼프 카드를 표현하는 객체를 생성하는 생성자.

function Card(suit, rank){
    this.suit = suit;
    this.rank = rank;
}

// 생성자로 객체를 생성할 때는 new 연산자 사용
let card  = new Card('하트', 'A'); // 객체

생성자

앞의 예시 처럼 new 연산자로 객체를 생성할 것이라 기대하고 만든 함수를 생성자라고 부릅니다.
생성자 이름은 관례적으로 그것이 생성자임을 알리기 위해 첫 글자를 대문자로 쓰는 파스칼 표기법을 사용.

생성자 안에서 this.프로퍼티 이름에 값을 대입하면 그 이름을 가진 프로퍼티에 값이 할당된 객체가 생성됩니다. 이때 this는 생성자가 생성하는 객체를 가리킵니다. 앞의 예는 다음과 같이 객체 리터럴로 고쳐 쓸 수 있다.

let card = {};
card.suit = '하트';
card.rank = 'A';

생성자와 new 연산자로 생성한 객체를 그 생성자의 인스턴스라고 부른다. 인스턴스에는 실체라는 뜻이 있다. 객체 지향 언어에서 인스턴스는 클래스소 생성한 실체를 뜻한다. 이때 클래스는 객체를 실체로 만들기 위한 설계도고 그 설계도로 생성한 실체가 바로 인스턴스이다.
즉, 자바스크립트에서는 생성자 = 함수객체 = 실체

생성자는 객체를 생성하기 위한 함수

 

생성자의 역할

생성자는 객체를 생성하고 초기화 하는 역할을 함.
생성자를 사용하면 이름은 같지만 프로퍼티 값이 다른 객체(인스턴스) 여러 개를 간단히 생성 할 수 있다.

const card1 = new Card('하트', 'A')
const card2 = new Card('클럽', 'K')
const card3 = new Card('스페이드', '2')

생성자는 함수이므로, 프로퍼티 값에 대입할 수 있다.
다른 함수와 마찬가지로 다양한 처리를 할 수 도 있다.
이를 활용하면 객체를 생성할 때 초기화 작업을 병행할 수 있다.

function Particle(x, y, vx, vy){
    this.x = x;
    this.y = y;
    this.vx = vx;
    this.vy = vy;
    this.velocity = Math.sprt(vx * vx + vy * vy);    
}

const p = new Particle(0, 0, 3, 4);
console.log(p); // x: 0, y:0, vx:3, vy:4, velocity:5

매서드를 가진 객체를 생성하는 생성자

생성자에서 this.프로퍼티 이름에 함수의 참조를 대입하면 메서드를 정의 할 수 있다.
이때 메서드 함수 안에 있는 this는 생성될 인스턴스를 가리킵니다.

function Circle(center, radius){
    this.center = cetner;
    this.radius = radius;
    this.area = function() {
        return Math.PI = this.radius = this.radius;
    };
}

const p = {x:0, y:0};
const c = new Circle(p, 2.0);
console.log("넓이 = " + c.area()); // 넓이 = 12.568... 

프로토타입

‘인스턴스에 아무것도 정의하지 않더라도 처음부터 사용할 수 있는 것’

자바스크립트에서는 객체를 생성했을 때 그 객체 안에 prototype이라는 객체가 자동으로 생성되고 그 프로토타입안에 생성자를 가르키는 constuctor라는 객체가 자동으로 생성되어 서로 참조할 수 있게 된다.

이러한 프로토타입은 생성자로 생성된 각각의 객체가 프로퍼티나 함수를 공유하기 위해 사용된다.

function Student(grade, name) {
    this.grade = grade
    this.name = name
}

Student.prototype.introduce = function() {
    console.log('학년: ' + this.grade + ' 이름: ' + this.name)
}

var gildong = new Student(3, '홍길동')
var cheolsoo = new Student(1, '김철수')

gildong.introduce()
cheolsoo.introduce()

//학년: 3 이름: 홍길동
//학년: 1 이름: 김철수

생성자 안에서 this로 선언할 경우 생성자를 호출 할때마다 프로퍼티와 메소드도 하나씩 만들어지기 때문에 프로토타입을 사용하면 프로퍼티나 메소드가 한 번만 만들어져 해당 메모리를 공유할 수 있게되고 불필요한 메모리 낭비를 줄일 수 있습니다