프로그래밍 기법에는 여러 가지 방법이 있습니다. 절차지향, 객체지향 프로그래밍 등 여러 가지 방법이 있는데요.
이번에는 Javascript에서의 객체지향 프로그래밍에 대해 알아보겠습니다.
- 객체지향 프로그래밍(Object-oriented programming)
객체지향 프로그래밍? 한국말인데 무슨 말인지 잘 모르겠습니다.
우리가 살고 있는 세상에는 무수히 많은 객체(Object)들이 있습니다. 스마트폰, 신발, 자동차부터 추상적인 개념의 국가, 회사 등이 있습니다. 객체지향 프로그래밍은 이렇게 무수히 많은 객체들을 컴퓨터 속에서 표현하기 위해 만들어진 프로그래밍 기법입니다. 객체지향 프로그래밍에서 각 객체들은 서로 소통하여 하나의 프로그램을 구성합니다. 객체지향 프로그래밍은 유연하고 유지 보수하기 용이한 특성을 갖고 있습니다.
- 객체(Object) 생성하기
Javascript를 이용한 객체 생성 방법에는
-
Functional
-
Functional shared
-
Prototypal
-
Pseudoclassical
다음과 같은 4가지 방법이 있습니다.
이제 객체 생성 방법을 하나씩 알아보겠습니다.
#Functional
const phone = function(){
let someInstance = {};
someInstance.count = 0;
someInstance.countUp = function(){
this.count += 1;
}
return someInstance;
};
const iPhone = phone();
const galaxy = phone();
iPhone.countUp();
//iPhone.count === 1;
//galaxy.count === 0;위의 예제를 보면 iPhone과 galaxy는 각각 phone이라는 함수를 갖습니다.
이때 phone은 전화기라는 클래스가 되고 iPhone과 galaxy는 인스턴스가 됩니다.
하지만 위의 방법은 핸드폰의 종류만큼 phone을 갖기 때문에 핸드폰의 종류가 100개가 된다면 200개의 count와 countUp이 생기게 됩니다.
#Functinal Shared
const Phone = function(count){
let someInstance = {
count : count
};
extend(someInstance, someMethods);
return someInstance;
};
const extend = function(target, source){
for(let key in source){
target[key] = source[key];
}
};
const someMethods = {};
someMethods.countUp = function(){
this.count += 1;
};
const iPhone = Phone(5);
const galaxy = Phone(10);위 코드를 보면 다소 복잡하지만 내용은 이렇습니다.
Functinal 기법에서 인스턴스의 개수만큼 countUp이라는 메소드를 만들었지만 Funcional Shared 기법에서는 countUp은 공통적으로 사용되는 메소드이기 때문에 각 인스턴스들이 메소드의 주소만을 참조하게 되어 더욱 효율이 좋아졌습니다. 이제는 각 인스턴스의 개수만큼 메소드를 할당해 주지 않아도 됩니다.
#Prototypal
const Phone = function(count){
let someInstance = Object.create(someInstance);
someInstance.count = count;
return someInstance;
};
const someMethods = {};
someMethods.countUp = function(){
this.count += 1;
};
const iPhone = Phone(5);
const galaxy = Phone(10);자 이번에는 코드가 조금 더 짧아졌습니다.
언뜻 보면 이해가 될 듯싶은데 Object.create()라는 친구가 나왔습니다.
그럼 이 친구의 기능이 무엇이냐?
Object.create()는 () 안에 들어가는 프로토타입 객체 및 속성(property)을 갖는 새로운 객체를 만드는 기능입니다.
#Pseudoclassical
const Phone = function(count){
this.count = count;
}
Phone.prototype.countUp = function(){
this.count += 1;
}
const iPhone = new Phone(5);
마지막은 new 키워드를 이용해 객체를 만드는 방법입니다. 간단하죠?
Phone이라는 클래스에 대해서 iPhone이라는 인스턴스를 만들겠다는 뜻입니다.- Prototype
마지막으로 자바스크립트 OOP에서 중요한 prototype에 대해 알아보겠습니다.
prototype은 자바의 상속과 비슷한 기능을 하게 도와주는 키워드입니다.
function Person(){
this.hand = 2;
this.body = 1;
this.nose = 1;
}
var kim = new Person();
var lee = new Person();
function Person(){}
Person.prototype.hand = 2;
Person.prototype.body = 1;
Person.prototype.nose = 1;
let kim = new Person();
let lee = new Person();위의 코드에서 위에 있는 코드는 일반적인 함수를 이용한 객체 생성 방법이고, 아래의 코드는 prototype키워드를 이용한 코드입니다.
아래의 코드를 보면 우리는 person이라는 빈 객체에 prototype이라는 키워드를 이용해서 hand, body, nose를 할당해주었습니다.
위의 코드를 보면 사람이 100명이 생기면 새로운 100개의 person()을 생성해 줘야 하지만(손, 코, 몸을 하면 300개의 값이 생기겠네요) 우리는 property키워드를 이용해서 이미 만들어 놓은 프로퍼티를 가져다 쓰게 됩니다.
이처럼 property는 메모리 사용의 효율을 높여줍니다.
