Blog

자바스크립트 객체 생성 방법과 차이점

On 17 10월, 2014 By With 0 Comments

객체 생성 방법에 대해 나름 정리해 보았습니다.

자바스크립트에는 다른 언어이 가지고 있는 클래스가 없다는 것을 많이들 알고계실 겁니다.

그래서 객체를 생성시 일급객체인 함수(생성자함수)를 사용하거나 객체리터럴 방식을 사용해서 객체를 만들어 낼 수 있습니다.

먼저 생성자 함수를 사용한 객체생성을 보겠습니다.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var Person = function( name, sex, age ){
 
if( this instanceof Person == false ) return new Person();
// private member
var name = name ? name : "jaewon",
   sex = sex ? sex : "male",
   age = age ? age : 1;
 
// priviledge method
this.introduceSelf = function(){
     var greeting = "이름은 "+name+"이고 나이는"+age+"살 입니다.";                     return greeting;
},
this.getName = function(){
     return name;
},
this.setName = function( arg ){
    name = arg;
}
};
*일반적인 함수에서는 값을 return하지 않으면 undefined가 반환되지만 생성자 함수의 경우 빈객체가 반환되고 생성자 함수의 this는 반환된 빈 객체(완전히 빈객체는 아닙니다.)를 가르킴니다. 이 빈객체를 참조하는 변수가 저희가 만들려고하는 객체(인스턴스)입니다. 위 소스에서는 Person 생성자 함수에 new를 붙이지 않더라도 생성자 함수가 객체를 생성할 수 있게 강제하고 있습니다.

다음으로 객체 리터럴 방식을 보겠습니다.

JavaScript
1
2
3
4
5
6
7
8
var Person = {
name : "jaewon",
sex : "male",
age : 1,
introduceSelf : function(){
return this.name;
}
};

객체 리터럴 방식은 생각보다 간단하고 깔끔하게 작성할 수 있습니다.

두 방법의 차이점을 말씀드리자면

  1. 먼저 생성자 함수로 생성된 객체(인스턴스)는 자신의 프로토타입으로 생성자 함수의 프로토타입 프로퍼티가 가리키는 프로토타입 객체를 참조하는반면,
  2. 객체 리터럴로 생성된 객체(인스턴스)는 자신의 프로토타입으로 Object를 참조합니다.

따라서 객체리터럴로 생성된 객체(인스턴스)는 함수가 아니기 때문에 프로토타입을 이용한 상속이 안되지 않을까 싶네요. 그리고 객체리터럴로 생성된 객체는 오직 한번만 사용가능하지만(재사용 공용함수 작성으로 재사용가능) 생성자 함수를 사용하면 클래스처럼 객체들을 원하는 만큼 만들어서 사용할 수 있습니다. 각각 다 장단점이 있겠지만 저는 주로 자바스크립트를 웹페이지의 UI만드는데 사용하기 때문에 해당 UI컴포넌트들을 조작할 때 객체를 만들어서 사용하는 편입니다. 반복되는 컴포넌트에 대해서는 그게 편하더라구요.

혹 위에 정리한 내용에서 틀린 부분이 있다면 아래 댓글로 말씀해 주시면 감사하겠습니다.

, ,