클래스 기반과 프로토타입 기반의 자바스크립트 객체 만들기

자바스크립트 객체는 프로토타입기반이다. 하지만 new 연산자를 사용하여 클래스 기반으로 객체를 만들 수 있다.

클래스 방식의 객체 만들기

//1단계 : 프로토타입 객체 정의
var proto = {
     sentence : 4,
    probation: 2
};

//2단계 : 객체 생성자 정의
var Prisoner = function(name, id){
    this.name = name;
    this.id = id;
};

//3단계 : 생성자와 프로토타입 객체 연결
Prisoner.prototype = proto;

//4단계 : 객체생성
var firstPrisoner = new Prisoner('Joe', '12A');
var secondPrisoner = new Prisoner('Sam', '2BC');

new연산자는 자바스크립트에서 객체를 생성할 때 여전히 가장 많이 사용하는 방식이다. 하지만 이 방식은 마치 자바스크립트가 클래스 기반의 언어인 것처럼 혼동을 일으킬 뿐이다. 이런 문제를 해결하기 위해 new 연산자 대신에 Object.create 메서드를 사용하여 객체를 생성해 보자.

Object.create를 활용한 객체 만들기

var proto = {
     sentence : 4,
    probation: 2
};

var firstPrisoner = Object.create(proto);
firstPrisoner.name = 'Joe';
firstPrisoner.id = '12A';

var secondPrisoner = Object.create(proto);
secondPrisoner.name = 'Sam';
secondPrisoner.id = '2BC';

Object.create 메서드는 프로토타입 객체를 인자로 전달받아 이를 기반으로 생성한 객체를 반환한다. 그러나 생성한 객체마다 매번 name과 id를 직접 설정하면 같은 코드가 반복되고 지저분해 진다. 따라서 Object.create 메서드를 사용할 때는 최종 객체를 생성하고 반환하는 팩토리 함수를 자주 사용한다.

팩토리 함수를 활용한 Object.create

var proto = {
     sentence : 4,
    probation: 2
};

var makePrisoner = function(name, id){
     var prisoner = Object.create(proto);
    prisoner.name = name;
    prisoner.id = id;

    return prisoner;
};

var firstPrisoner = makePrisoner('Joe', '12A');
var secondPrisoner = makePrisoner('Sam', '2BC');

과거 브라우저에서의 Object.create

Object.create 메서드는 IE9 이상, 파이어폭스 4.0 이상, 사파리 5 이상, 크롬 5 이상의 버전부터 지원한다. IE 6,7,8 같은 과거 브라우저와 호환성을 유지해야 한다면 브라우저에서 이 메서드를 지원하지 않는 경우 Object.create 메서드를 정의하고, 이미 구현돼 있는 경우에는 그대로 둔다.

//Object.create()을 지원하지 않는 브라우저를 위한 크로스브라우저 메서드
var objectCreate = function(arg){
    if( !arg ) { return {}; }
    function obj() {};
    obj.prototype = arg;
    return new obj;
};

Object.create = Object.create || objectCreate;