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를 찾는다. 이로서 메모리 문제는 해결되었다.
번호 제목 글쓴이 날짜 조회 수
30 상속과 Super 로의 접근 황제낙엽 2012.09.18 64
29 inherits() 를 이용한 상속 황제낙엽 2012.07.18 129
28 Defining classes and inheritance (클래스 정의와 상속) 황제낙엽 2011.03.24 392
27 JavaScript Closures for Dummies 황제낙엽 2009.04.08 227
26 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 황제낙엽 2009.08.12 55
25 [펌] TAEYO.NET - Js OOP - 나만의 프레임워크 만들기 황제낙엽 2009.04.02 18
24 [펌] TAEYO.NET - Js OOP - 사용자 정의 객체. 그리고 상속과 재사용 황제낙엽 2009.04.02 16
23 [펌] TAEYO.NET - JavaScript OOP 코어객체와 prototype를 사용한 객체확장 황제낙엽 2009.04.02 21
22 [펌] 아사페릴의 사생활 - 싱글톤 패턴을 지향한 Javascript Module Pattern 황제낙엽 2009.04.02 90
21 [펌] 아사페릴의 사생활 - Code Conventions for the JavaScript Programming Language 황제낙엽 2009.04.02 194
20 [펌] 아사페릴의 사생활 - __proto__ 와 construct 와 prototype 황제낙엽 2009.04.02 23
19 [펌] 아사페릴의 사생활 - prototype과 __proto__ 와 constructor 황제낙엽 2009.04.02 41
18 [펌] 아사페릴의 사생활 - __proto__ 와 prototype에 대해.. 황제낙엽 2009.04.02 15
» [펌] 아사페릴의 사생활 - Javascript의 클래스에 관한 이야기 황제낙엽 2009.04.02 17
16 [펌] 아사페릴의 사생활 - Javascript의 constructor 와 prototype 황제낙엽 2009.04.02 156
15 [펌] prototype (2) 황제낙엽 2009.04.02 9
14 [펌] prototype (1) 황제낙엽 2009.04.02 12
13 [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) 황제낙엽 2008.11.04 46
12 함수와 인자값 (arguments) 황제낙엽 2008.08.12 15
11 중첩 함수, 함수 클로저 황제낙엽 2008.08.12 820