ego + ing | 객체지향 자바스크립트

Class Template 과 instance 생성

Javascript는 Java처럼 OOP를 언어자체에서 명시적으로 지원하고 있지 않지만, OOP를 추구할 수 있는 여러가지 방법들이 있다. OOP에서 가장 기초적이고 중요한 class는 아래와 같 은 방식으로 구현할 수 있다.

function ClassTemplate() {
};
var obj = new ClassTemplate();

Member variable, Method
Class template에 member를 등록하기 위해서는 아래와 같은 방법을 이용한다.

function ClassTemplate() {
    var membervar = 2;
    var memberfunc = function() {
        return 3;
    }
}
var obj = new ClassTemplate();

Privileged

Class Template 안에 var로 선언된 맴버들은 객체 외부에서 접근할 수 없다(private).

function ClassTemplate() {
    var membervar = 2;
    var memberfunc = function() {
        return 3;
    }
}
var obj = new ClassTemplate();
alert(obj.membervar); // undefined
alert(obj.memberfunc()); // undefined

객체의 외부에서 접근 가능하면서, 스스로 객체 내부의 맴버에 접근이 가능한 맴버를 Privileaged Member라고 하는데 이를 위해서는 var 대신 this를 사용한다.

    function ClassTemplate() {
        var membervar = 2;
        this.publicvar = 3;
        this.memberfunc = function() {
            return membervar;
        }
}
var obj = new ClassTemplate();
alert(obj.publicvar); // 3
alert(obj.memberfunc()); // 2

정리하면, private을 구현하기 위해서는 var를 사용하고 public을 구현하기 위해서는 this를 사용한다는 점을 기억하자.

static

static은 객체의 맴버가 아니라, 클래스의 맴버로 등록된 변수와 메소드이다. 그렇기 때문에 객체가 아닌 클래스에서 직접 접근하며, 모든 객체가 동일한 값을 공유한다.

function ClassTemplate() { }
ClassTemplate.publicstaticvar = 'public static variable';
ClassTemplate.publicstaticfunc = function() {
    return 'public static method';
}
alert(ClassTemplate.publicstaticvar); //'public static variable';
alert(ClassTemplate.publicstaticfunc()); //'public static method'

상속
객체의 상속을 위해서는 아래와 같이 prototype을 사용한다.

function Parent() {
    this.parent = 'parent';
}
function Child() {
    this.child = 'child';
}
var p = new Parent();
Child.prototype = new Parent();
var c = new Child();
alert(c.parent); // 'parent'
alert(c.child); // 'child'

Class-Based Language vs Prototype-Based Languages

Class-Based의 대표적 언어는 Java이고, Prototype-Based은 자바스크립트이다. 이 두언어의 차이를 객체를 다루는 방식으로 설명할 수 도 있을 것이다. 이 두언어의 차이는 아래와 같다.

Class-Based	Prototype-Based
class를 정의하기 위한 탬플릿이 존재함. 이 탬플릿은 추상적인 것으로써 어떠한 정보도 담고 있지 않고, 데이터 형만을 결정 함.	class를 정의하기 위한 탬플릿 없음. Generic Object를 직접 사용하거나(new Object()) constructor function를 통해 탬플릿을 정의 함.
new를 통해 instance를 생성함	동일
class chain을 통해 상속됨.	prototype chain을 통해 상속됨.
instance에 동적으로 property, method를 추가할 수 없음.(정적언어, c, c#), IDE 강력, 퍼포먼스 유리, 강력한 타입체크로 인한 오류 방지	동적으로 property, method를 추가/삭제 할 수 있음.(동적언어, 루비, 파이썬, 자바스크립트), 가독성, 간결한 코드, 유연성

Polymorphism

Polymorphism(다형성)은 OOP에서 중요한 의미를 가지고 있다. 상속은 부모 객체가 할 수 있는 일을, 자식도 할 수 있도록 하는 것을 의미한다. 그러나 부모가 하는 일을 자식도 할 수 있지만, 그 일을 처리하는 방식이 달라 질 수도 있다. 이를 인간세계에서는 개성이라고 하고 , OOP에서는 Polymorphism이라고 한다. 도둑잡기 게임을 제작한다고 가정해보자. 필요한 등장인물은 경찰, 도둑, 무고한 시민이 있을 것이다. 그런데 이들은 모두 인간이라는 공통점을 가지고 있지만, 동시에 다른 행동양식을 가지고 있다. 이를 자바스크립트의 방식으로 표현하는 아래와 같다

function Person() {}
function Cop() {}
function Robber() {}
function Bystander() {}
Cop.prototype = new Person();
Robber.prototype = new Person();
Bystander.prototype = new Person();
Person.prototype.move = function() {};
Cop.prototype.move = function() {};
Robber.prototype.move = function() {};
Bystander.prototype.move = function() {};
var cop1 = new Cop();
var cop2 = new Cop();
var robber1 = new Robber();
var robber2 = new Robber();
var robber3 = new Robber();
var bystander1 = new Bystander();
var bystander2 = new Bystander();
var bystander3 = new Bystander();
var bystander4 = new Bystander();
persons = [
        cop1,
        cop2,
        robber1,
        robber2,
        robber3,
        bystander1,
        bystander2,
        bystander3,
        bystander4
];
function moveAllPerson() {
    for(var i = 0; i < persons.length; i++) {
        persons[i].move();
    }
}

prototype은 무엇인가?

prototype은 class와 대비되는 개념이다. class가 클래스의 스팩을 매우 엄격하게 정의하는 설계도인 반면, prototype은 설계가 언제든 변경될 수 있도록 유연하게 정의된 데모라고 이해할 수 있다. 이러한 차이는 정적 언어와 동적언어의 차이에서 연유하는데, Java, C#과 같은 정적언어가 클래스에서 한번 정의되면, 런타임에서 이를 변경할 수 없는 엄격한 언어임에 반해, Javascript와 같은 동적언어는 언제든 이를 변경할 수 있는 유연한 언어이다. 이 각각의 언어간에는 장단점이 존재하며, 이는 아래의 class-based VS prototype-based에서 비교하겠다.

protype을 이야기함에 있어 prototype-chain을 빼놓을 수 없는데. 아래의 예제를 보자.

function TEST() {}
alert(typeof TEST); // function
alert(typeof TEST.prototype); // Object

TEST는 function이다. 그런데 TEST에는 prototype이라는 속성이 이미 정의되어 있다. function을 정의하면 prototype이라는 generic object가 미리 준비되는 것이다. 이 generic object는 new 연산자를 이용해 constructor function을 호출할 때 반환된다.

function TEST() {}
alert(new TEST()); // Object

즉 prototype property에는 객체의 대략적인 모습을 담고 있는 generic Object가 담겨져있는 것이다. 다음은 protype의 상속관계를 나타내는 예제이다.

function BLOG() {
    this.address = 'http://egoing.net';
}
BLOG.prototype.address = 'http://blog.naver.com/k8805';
Object.prototype.address = 'http://';
var home = new BLOG();
alert(home.address); // 'http://egoing.net'

function BLOG() {
    //this.address = 'http://egoing.net';
}
BLOG.prototype.address = 'http://blog.naver.com/k8805';
Object.prototype.address = 'http://';
var home = new BLOG();
alert(home.address); // 'http://blog.naver.com/k8805'

function BLOG() {
    //this.address = 'http://egoing.net';
}
//BLOG.prototype.address = 'http://blog.naver.com/k8805';
Object.prototype.address = 'http:';
var home = new BLOG();
alert(home.address); // 'http://'