sitelink1  
sitelink2  
sitelink3  
sitelink4 http://1 
extra_vars4 ko 
extra_vars5 http://faidcy.tistory.com/68 
extra_vars6 sitelink1 
Javascript 에서 클래스를 만드는 방법은 몇가지 방법이 있다..

그중에 기본적인 2가지만 하겠다.
첫번째로

var Position = function(x, y) {
    this.xpos = x;
    this.ypos = y;
};


위와 같이 생성자가 있으면 메소드를 정할 수 있다.

메소드를 정의 하는 방법은 2가지가 있다.

지금은 쓰지 않고 예전에 많이 썻던 방법이 있다.

var Position = function(x,y) {
    this.xpos = x;
    this.ypox = y;
    this.distance = function() {
        var x2 = this.xpos * this.xpos;
        var y2 = this.ypos * this.ypos;
        return Math.sqrt(x2 + y2);
    };
};


위와 같이 this 를 사용해서 distance 라는 멤버 메소드를 정의했다.
var p = new Position(3, 4);
var d = p.distance();

이렇게 클래스를 만들었는데 여기는 한가지 문제가 있다.

Position 오브젝트를 만들 때마다 바로 멤버 메소드 (여기서는 distance())의 포인터가 매회 만들어진다.
불필요한 메모리가 만들어지는 것이다.

이를 해결하기 위해 prototype 이라는 프로퍼티를 사용한다.

생성자는 함수다. 이것도 오브젝트의 일종이라서 prototype이라는 프로퍼티를 가진다.
new 연산자로 만들어지는 오브젝트의 prototype 오브젝트는 생성자의 prototyp 프로퍼티의 값이 된다.


new Position(3, 4)

가 실행되면 우선 Position.prototype을 prototype 오브젝트가 this 로서 생성자 함수에게 건내져 초기화된다.

덧붙여 prototype 프로퍼티의 초기치는 constructor라고 하는 프로퍼티만을 가지는 오브젝트이다.
constructor 의 값은, 생성자 자신이다. 즉.

Position.prototype.constructor == Position

이 된다. Position.prototype이 가리키는 오브젝트에는 constructor 이외의 프로퍼티는 없다.


동일한 생성자에 의해서 만들어지는 오브젝트는 모두 같은 prototype 오브젝트를 가진다. 따라서 prototype 오브젝트의 프로퍼티로서 메소드를 추가하면, 생성자로 만들어진 오든 오브젝트는, 그 메소드를 이용할 수 있게 된다.

var Position = function(x, y) {
    this.xpos = x;
    this.ypos = y;
}

Position.prototype.distance = function() {
    var x2 = this.xpos * this.xpos;
    var y2 = this.ypos * this.ypos;
    return Math.sqrt(x2 + y2);
};

이렇게 하면 Position 오브젝트를 만들 때마다 distance 메소드가 새롭게 만들어지는 것은 없어진다.
메소드는 Position 오브젝트의 prototyp 오브젝트에 추가된다.
하지만 distance 의 호출하는 방법은 바뀌지 않는다.
  var p = new.Position(3, 4);
  var d = p.distance();

오브젝트 p가 가지는 프로퍼티에 distance 가 포함되지 않으면 p의 prototyp 오브젝트의 프로퍼티 안에 distance를 찾는다. 이로서 메모리 문제는 해결되었다.
번호 제목 글쓴이 날짜 조회 수
77 [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype 황제낙엽 2009.04.02 23
76 [펌] 아사페릴의 사생활 - prototype과 __proto__ 와 constructor 황제낙엽 2009.04.02 41
75 [펌] 아사페릴의 사생활 - __proto__ 와 prototype에 대해.. 황제낙엽 2009.04.02 15
» [펌] 아사페릴의 사생활 - Javascript의 클래스에 관한 이야기 황제낙엽 2009.04.02 17
73 [펌] 아사페릴의 사생활 - Javascript의 constructor 와 prototype 황제낙엽 2009.04.02 156
72 [펌] prototype (2) 황제낙엽 2009.04.02 9
71 [펌] prototype (1) 황제낙엽 2009.04.02 12
70 unshift() Method 황제낙엽 2009.03.02 287
69 javascript replaceall의 방법에 따른 처리 속도 비교 황제낙엽 2009.02.11 97
68 파이어폭스로 스크립트 디버깅하기 황제낙엽 2009.01.14 22
67 숫자 여부와 자리수를 체크 하는 예제 황제낙엽 2009.01.12 5265
66 익스플로러용 스크립트 디버거 (Script Debugger for Windows NT 4.0 and Later) 황제낙엽 2008.12.11 176
65 소숫점을 포함한 반올림 황제낙엽 2008.12.11 62
64 int * float 연산 오류 file 황제낙엽 2008.12.11 95
63 JavaScript Form Validation file 황제낙엽 2008.11.24 186
62 정규식 정리 황제낙엽 2008.11.24 252
61 setTimeout() / setInterval() 메소드 황제낙엽 2008.11.05 111
60 [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) 황제낙엽 2008.11.04 46
59 String xml 파싱 황제낙엽 2008.11.03 23
58 innerHTML 황제낙엽 2008.11.03 93