[javascript] 자바스크립트 객체 생성하기

자바에서 클래스를 쉽게 정의하다가 자바스크립트에서 객체를 정의하자니 뭐가 뭔지 몰랐었다. 

지금 이 글을 쓰는 시점에도 많은 것을 알지는 못하나 내가 아는 것을 서술하고 싶었다. 

 

내가 알고 있는 객체를 생성하는 방식은 2가지이다.

 

1. 객체 literal

2. prototype

3. function 정의 

 

1. 객체 literal

정의하는 방법은 아래와 같다. 

 

var obj = {

a : 111;

b : 222;

c : function (){
    console.log("hihi");
}

};

console.log(obj.a);    //111

console.log(obj.b);    //222

console.log(obj.c());    //"hihi"

 

객체 literal을 정의하면 new 키워드를 이용하여 객체를 생성할 수 없다.

 

2. prototype

 

객체의 원형을 정의하여 new로 객체를 생성하여 사용한다. 

 

prototype을 사용하는 자바스크립트는 프로토타입 기반 프로그래밍이며 정의는 아래와 같다.

 

프로토타입 기반 프로그래밍의 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과는 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다. 프로토타입기반 프로그래밍은 클래스리스(class-less), 프로토타입 지향(prototype-oriented) 혹은 인스턴스 기반(instance-based) 프로그래밍이라고도 한다.

 

출처 https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EA%B8%B0%EB%B0%98_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D

 

 

아래는 function으로 클래스를 정의한 예시이다.

 

function Zealot(){}

 

Zealot.prototype.attack = function(){

return "마린 저글링은 아무것도 아니지!";

}

Zealot.prototype.hold = function(){

return "잠시만 쉬자고";

}

Zealot.prototype.patrol = function(){

return "주변에 저글링이 좀 있나~?";

}

 

var zealotClone = new Zealot();

 

console.log(zealotClone.attack());

console.log(zealotClone.hold());

console.log(zealotClone.patrol());

 

"객체명.prototype.속성" 형태로 값이나 메소드를 정의할 수 있다. 

이것은 큰 장점이 될 수 있다고 생각한다. 

왜냐하면 java에서는 클래스의 필요한 메소드나 변수를 만들기 위해 클래스의 파일을 직접 편집을 해야한다. 

즉 동적으로 변수와 메소드를 생성할 수 없다는 것이다. 

하지만 pototype을 이용한 방법은 객체를 정의한 후에도 언제든지 메소드와 변수를 동적으로 생성할 수 있기 때문이다.

 

여기서 재밌는 점이 있다면 프로토타입으로 정의하는 변수와 function 안에서 var 정의되는 변수의 차이이다.

 

prototype.속성은 객체의 this와 동일하며 이 때 this는 실행되는 문맥을 가리킨다. 

즉, prototype.속성으로 지정하거나 this로 지정한 변수는 외부에서 접근이 가능하다.

 

function Zealot(){
    this.attack = 111;

}

 

Zealot.prototype.defence = 10;

 

var zealotClone2 = new Zealot();

 

console.log(zealotClone2.attack); //111

console.log(zealotClone2.defence); //10

 

따라서 OOP에서 지향하는 캡슐화에 위배가 된다. 

prototype으로도 캡슐화를 지키는 방법도 유사하겠지만 나의 경우는 function()으로 객체를 정의하는 것을 선호하는 편이다. 

이유라고 한다면 prototype이 아직 익숙하지 않은 것도 있고, 객체명.prototype.속성 형식으로 정의하는 것이 번거롭기 때문이다.

 

3. function 정의

 

SalaryMan = function(){

//private 영역

var salary = 99999999999;

var company = 'company';

this.name = 'name';

 

return {

//public 영역

mySalary : function(){
    return salary;
},

myCompany : function(){

return company;

}

}

}

 

var sm = new SalaryMan();

 

console.log(sm.salary);    //undefined

console.log(sm.company);    //undefined

console.log(sm.mySalary());    //99999999999

console.log(sm.myCompany());    //'company'

 

위의 코드에서 보면 return영역은 public이기 때문에 외부에서 접근이 가능하지만 return을 제외한 function 내부의 변수는 private 영역이므로 외부에서 접근을 하지 못하여 캡슐화를 구현할 수 있게된다. 

 

그리고 아직 공부가 부족하여 this.name이 왜 접근으로 접근을 못하는지는 모르겠다. 

더 많은 객체 생성 방법이 있으므로 공부를 한 후에 추가적인 포스팅을 할 예정이다.