생성자함수와 프로토타입

생성자 함수

- new키워드를 사용해 객체를 생성하는 함수

- 생성자 함수 안에서는 this 키워드를 사용해 객체 속성을 지정

- 일반적으로 생성자함수 이름은 대문자로 시작하는 것이 개발자들간의 관례

 

ex ) 

// 4개의 매개변수를 받는 함수선언

function Option(name, price, mission, color){

        // 객체선언 및 키 설정

        this.n = name,

        this.p = price,

        this.m = mission,

        this.c = color;

}

var car = [];  // 배열선언

// car 배열에 push 로 new키워드를 사용해 데이터 값을 밀어 넣는다.

car.push(new Option('genesis', 5000, 'auto', 'black'));

car.push(new Option('Grandeur', 3800, 'auto', 'white'));

car.push(new Option('k7', 3800, 'auto', 'white'));

console.log(car);  // 화면에 출력

프로토타입

위의 생성자 함수는 그냥 함수로 객체를 생성해서 리턴하는 방법과 차이가 없다. 하지만 프로토 타입을 활용하면 얘기가 달라진다. 만약 객체내에 메서드가 있을 경우 새로운 객체를 생성해서 추가 할때마다 동일한 메서드를 계속 생성해서 추가 한다. 데이터가 많으면 많을 수록 메모리 누수가 생기게 된다. 

이런 문제를 해결하려고 자바스크립트는 프로토타입이라는 공간을 만들었고 이는 생성자 함수를 사용해 생성된 객체가 공통으로 가진다. 이공간으로 메서드를 따로 빼내게 되어 별도 관리 함으로써 객체가 해당 메서드를 한번만 생성해도 모든 객체가 이것을 사용가능하게 된다. 

ex) 자동차 10개월 할부 프로그램

// 함수 선언

function Option(name, price, mission, color){

        // 키 설정

        this.n = name,

        this.p = price,

        this.m = mission,

        this.c = color;

}

var car = []; // 배열선언

// car 배열에 push 로 new키워드를 사용해 데이터 값을 밀어 넣는다. 

car.push(new Option('genesis', 5000, 'auto', 'black'));

car.push(new Option('Grandeur', 3800, 'auto', 'white'));

car.push(new Option('k7', 3800, 'auto', 'white'));

// 프로토타입으로 메서드 선언

Option.prototype.moneyPlan = function(){

    // price 값을 가져와서 10으로 나눈다.

    return this.p / 10;

}

var output = '';  // 변수선언

for (var i in car) {  // car 배열의 개수 만큼 반복

    // output 변수에 moneyPlan()메서드를 실행한 값을 가져와서 대입

    output += car[i].moneyPlan() + '\n';

}

console.log(output);  // 화면에 출력