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를 찾는다. 이로서 메모리 문제는 해결되었다.
번호 제목 글쓴이 날짜 조회 수
66 position스타일과 top, left스타일 황제낙엽 2008.09.24 410
65 URI 인코딩을 해야 하는 문자들 황제낙엽 2009.09.02 409
64 YUI Logger(Yahoo) 를 동적으로 로드하는 북마크릿 황제낙엽 2010.10.03 408
63 [펌] 아사페릴의 사생활 - prototype과 __proto__ 와 constructor 황제낙엽 2009.04.02 405
62 [key:value] 형태로 object를 저장할 수 있는 Static영역의 해쉬맵 클래스 (Map) 황제낙엽 2008.11.04 403
61 JavaScript 재입문 황제낙엽 2012.05.29 402
60 Strict 모드 황제낙엽 2020.08.23 401
59 env.js 사용시 부족한 부분 file 황제낙엽 2012.02.15 401
58 체인 생성자(생성자 체인), 프로토타입 체인 그리고 생성자 재지정 황제낙엽 2009.08.12 399
57 XML+JS 연동 다중셀렉트박스 (1) - <font color="brown">(MS Explorer 전용)</brown> 황제낙엽 2005.12.02 397
56 ECMA 스크립트의 JSON 황제낙엽 2019.10.16 395
55 잘못된 종속관계 해지에 따른 메모리 누수 예제 황제낙엽 2009.04.03 394
54 파이어폭스로 스크립트 디버깅하기 황제낙엽 2009.01.14 389
53 모바일 브라우저에서 file input element 를 이용하여 여러장의 이미지를 서버에 전송하려 할때 [1] 황제낙엽 2023.08.21 388
» [펌] 아사페릴의 사생활 - Javascript의 클래스에 관한 이야기 황제낙엽 2009.04.02 388
51 연산자 this 황제낙엽 2014.12.30 387
50 개요 황제낙엽 2009.03.11 386
49 [검토 완료] 디바이스 카메라로 촬영한 사진을 서버에 업로드하기 샘플 황제낙엽 2024.11.21 385
48 CORS(Cross-Origin Resource Sharing) - 3 file 황제낙엽 2017.03.07 384
47 withCredentials 관련 황제낙엽 2020.07.29 383