자바스크립트 클래스 구현시 고민할 부분 – 1
* 이 글은 자바스크립트에서 클래스를 흉내내는 방법에 대해 설명하지 않습니다.
아래는 prototype을 이용하여 클래스를 만들고 객체를 생성하여 사용한 코드 입니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function A() { this.n = 10; } A.prototype.run = function () { alert(this.n); }; var a = new A(); // CASE1: undefined setTimeout(a.run, 1); // CASE2: 10 setTimeout(function () {a.run();}, 1); // CASE3: 11 a.n = 11; setTimeout(function () {a.run();}, 1); |
위의 코드에서 보는 바와 같이 CASE1은 쓸 수 없습니다.
alert(this.n)의 this는 a를 가르켜는 것이 아니기 때문입니다.
그리고 CASE3 처럼 n의 값을 임의로 바꿀 수 있습니다.
CASE1, CASE2가 모두 동작하도록 아래와 같이 구현하는 방법도 있습니다.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function A() { var n = 10; this.run = function () { alert(n); }; } var a = new A(); // CASE1: 10 setTimeout(a.run, 1); // CASE2: 10 setTimeout(function () {a.run();}, 1); // CASE3: 10 a.n = 11; setTimeout(function () {a.run();}, 1); |
이번에는 CASE1, CASE2 모두 원하는대로 동작하고 CASE3도 n의 값이 변경되지 않았습니다.
그런데 이렇게 prototype을 사용하지 않으면 생성되는 객체 각각마다 run()을 가지게 되어 prototype을 사용한 방법보다 메모리를 더 차지하게 됩니다.
워드프레스 댓글 알리미 1.1 (티스토리/텍스트큐브 호환) 워드프레스 티스토리/텍스트큐브 이사도구 1.9.3
Banner
