블로그 이미지
초딩입맛제주아재
하고 싶은 것만 하며 살고 싶다

calendar

 «  » 2025.1
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
2008. 4. 8. 18:07 카테고리 없음

Javascript OOP - method

Method

지난 포스트에서 Car객체를 만들어봤습니다.

function Car(name){
    this.name = name;
}

name 프로퍼티 하나만 가지고 있는 간단한 객체죠?

우리가 만든 이 Car라는 객체는 아직까지는 아무것도 할 수 없습니다.

이름만 갖고 있을 뿐 시동을 켜는것도 안되고, 문을 열 수도 없습니다.
이제 우리가 만든 이 Car에 하나하나 능력을 부여해 보도록 하겠습니다.
우선은 문을 여는 것 부터 해볼까요? (그래야 문을 열고 들어가서 시동을 걸 수 있겠죠? ^^)

먼저 문이 열린것을 확인 할 수 있는 상태변수를 하나 추가해야겠습니다.

function Car(name){
    this.name = name;
    this.isOpen = false;
}

Car.prototype.opendoor = function(){
    this.isOpen = true;
    alert('문이 열렸습니다.');
}

이제 Car의 문을 열 수 있습니다~
그런데 생소한 키워드 [prototype]이 등장했습니다.
프로토타입...시제품? prototype.js?
자바스크립트는



posted by 초딩입맛제주아재
2008. 4. 7. 15:01 Programing/HTML/JavaScript/CSS

Javascript OOP - 객체 생성과 property

Javascript OOP

최근 javascript로 OOP를 구현 하는 사례가 증가하고 있습니다.
AJAX와 함께 JSON이라는 효율적인 표기법과, prototype.js 이나 ExtJS같은 걸출한 javascript 프레임웍, 라이브러리 등이 출현하면서 javascript OOP는 점점 더 대중화가 되어가고 있습니다.
extjs sample

ExtJS 샘플

prototype.js

prototype.js


다시 말하면 javascript로 OOP를 구현하는 기술은 더이상 스페셜리스트들만 알고 있는 고급기술이 아니란거죠. 이를 다시 바꿔말하면 이제는 javascript OOP를 모르면 안된다는 말이기도 합니다~^^;;

가끔 웹서핑을 하다 페이지 소스를 보면 여기저기 많은 js 소스들에서 심심치 않게 'new' 연산자(operator)나 '{}' 같은 리터럴(object literal)을  볼 수가 있습니다.

'new'와 '{}' 은 javascript에서 객체를 생성할때 쓰는 연산자와 리터럴 입니다.


객체 생성하기

객체를 한 번 만들어 볼까요?

var car = new Car();

car라는 변수에 Car객체를 생성하여 대입하는 코드입니다.
실행하면 Car를 찾을 수 없다는 오류가 발생합니다.
클래스가 있어야겠죠?
클래스를 만들어보겠습니다.
javascript에서는 'function' 키워드를 써서 클래스 정의를 합니다. 함수 하나 만든다고 생각하시면 됩니다~

function Car(){
   
}

이제 Car객체가 만들어집니다.


Property

그런데 Car객체는 아무것도 가진게 없네요~^^ 껍데기만 있는 빈클래스는 의미가 없죠?
이제 Car에게 책임을 좀 지어줄까요?
먼저 이름을 주어야겠습니다. '애마1호기','달려라번개호' 같은 이름을 붙여준다면 더욱 애착이 가는 객체가 되겠죠?
이름은 객체의 속성(property)으로 볼 수 있습니다. javascript에서 객체의 속성은 '객체.속성이름 = 속성 값' 이렇게 할당 할 수 있습니다.

function Car(){
    this.name = '달려라번개호';
}

var car = new Car();
alert(car.name);

'달려라번개호'가 메세지 박스에 출력되네요~

그런데 저 this는 뭘까요?
이것의 이름은 달려라 번개호다?
네, 맞습니다~^^
여기서 this라는 키워드는 'new' 연산자를 통해 만들어진 Car객체의 인스턴스(instance)를 뜻합니다.

var car1 = new Car();
var car2 = new Car();
var car3 = new Car();

new 연산자가 실행될때마다, 붕어빵 기계에서 붕어빵이 나오듯 Car객체가 하나씩 만들어져서 나오게 됩니다. 이렇게 만들어진 하나하나의 객체를 인스턴스라고 하며 this란 그 인스턴스를 가리키는 것이지요~

this가 붙은 변수, 즉 객체의 property는 객체가 살아있는 동안 객체의 어느 곳에서든 사용 할 수 있습니다. 객체의 전역변수라고 생각하시면 되겠죠?

this 대신에 'var'를 붙여주면 지역 변수로 사용할 수 있습니다.

function Car(){
    var engineSize = '5000cc';
    this.name = '달려라번개호' + engineSize;
}

var car = new Car();
alert(car.name);
alert(car.engineSize);

'달려라번개호5000cc'라는 이름은 출력이 되는데, engineSize은 'undefined' 라고 나오네요~
engineSize는 객체를 만들때 name 속성을 위해 희생하고는 지역변수의 비참한 최후를 맞이한듯 합니다.
var와 this의 차이랍니다~^^

그런데 Car를 세대(car1,car2,car3) 만들었는데 이름이 모두 똑같습니다.
달려라번개호
달려라번개호
달려라번개호
이제 그만 달리고 싶네요 ㅡ.ㅡ;;

Car 객체를 생성할때 이름을 따로따로 지어주고 싶습니다.
생성자인 function Car() 를 조금 손봐줘야겠군요.

function Car(name){
    this.name = name;
}

이렇게 해주면 Car를 생성할때 원하는 이름을 지어줄 수 있습니다.

var car1 = new Car('번개호');
var car2 = new Car('천둥이');
var car3 = new Car('폭풍3호');

alert(car1.name);
alert(car2.name);
alert(car3.name);

이제 만들어진 Car객체들이 저마다 다른 이름을 가질 수 있게 되었습니다.^^


javascript로 객체 만들기~ 참 쉽죠? ^^
다음엔 Car를 움직여보도록 하겠습니다. 이름만 있는 차 보다는 타고 다닐 수 있는 차가 더 좋겠죠?
javascript object's method를 기대해 주세요~!!


'Programing > HTML/JavaScript/CSS' 카테고리의 다른 글

객체 초기화의 중요성  (1) 2008.05.23
오페라,사파리의 DOM Inspector  (6) 2008.04.15
URL, 도메인 추출 정규식 (2)  (5) 2008.02.22
URL, 도메인 추출 정규식  (0) 2008.02.20
javascript의 클로저(closure)  (2) 2007.09.21
posted by 초딩입맛제주아재
2007. 7. 4. 23:33 Programing

웹과 객체지향 설계의 어려움

OOP를 알게 된 후 부터....

아니 정확하게는 Smalltalk와 디자인 패턴이라는것을 알게 된 후 부터 코딩에 어려움을 겪고 있다.
어떠한 문제가 주어졌을때(코딩 할 일이 생겼을때) 이전에는 머릿속에 생각 나는 것들을 쓱쓱 타이핑 했었지만, 요즈음은 그게 잘 안된다.

아주 간단한 주소록이나 INSERT-SELECT의 단순한 작업에도 OOP를 생각하며 머릿속이 바쁘게 움직인다.
바쁘게만 움직이는걸로 끝난다면 좋겠지만 문제는 여기서 발생한다.
스스로 너무 복잡하게 생각을 끌고가게 되어 손끝으로 생각이 발산되질 못한다.
OOP의 특징인 단순함과 재사용성은 훨씬 뒤의 문제다.

절차지향적으로,Top-Down방식으로 코딩을 하면 금방 마무리 될 작업이지만 OOP로 만들려면 여간 힘든게 아니다.
만들어지고 난 후의 유지 보수를 생각해야 하고 확장을 생각해야 한다.
손쉽게 다른 객체와 융합될 수 있도록 유연하게(느슨하게) 만들어야 하고 그러함에 따라 보다 더 안정하게 만들어야한다.

무엇보다도 힘이 드는 것은 웹이라는 플래폼의 특성 때문이다.

같은 문제라도 윈도우 어플리케이션으로 만드느냐 웹 어플리케이션으로 만드느냐에 따라 생각의 복잡성이 판이하게 달라진다.

Java를 예로 든다면 어플리케이션의 MVC객체를 전부 Java로 만들겠지만 웹의 경우 각각 다른 언어로 만들어야 한다.
물론 Javascript로 만 만들 수 있는 어플리케이션도 있지만 여기서 말하는 웹 어플리케이션이란 PHP,ASP,JSP,Ruby 같은 서버쪽 프로그래밍과 HTML,Javascript,Flash 같은 클라이언트 프로그램과의 결합으로 인해 만들어지는 어플리케이션을 말하는 것이다.
이럴 경우 모델은 서버 프로그래밍으로 컨트롤러는 Javascript로 뷰는 HTML + Javascript로, 각각 다른 언어로 만들어야 하고 최종 어플리케이션은 이들의 결합으로 만들어진다.

클라이언트 프로그램은 사용자가 브라우저로 해당 페이지를 보고 있는 한 그 생명을 유지해야 한다. 특히나 AJAX어플리케이션의 경우 사용자가 작업을 마칠때까지 한 페이지만을 사용하는 경우도 있고 이 경우 단 한번 로딩된 클라이언트쪽 객체들의 역할이 크기 때문에 OOP의 잇점을 최대한 끌어 올릴 수 있다.
그에 반해 서버프로그램은 한번의 HTTP접속으로 일처리를 마친후 생명을 다하고 그 이후의 일은 클라이언트 프로그램의 몫이다. 서버쪽의 객체가 살아서 움직이는 시간이 많지 않다는 것이다.
생명의 주기가 짧은 서버 프로그램에서도 OOP는 필요한 것인가 하는 의문이 들게 되고 바로 이 부분이 내가 겪는 가장 큰 어려움이다.

과연
웹에서(서버 프로그램) OOP는 필요한것인가? 적합한 것인가?
내일도 이 문제로 머리를 싸메야 할 것 같다...

'Programing' 카테고리의 다른 글

JCO 오픈소스 컨퍼런스 후기  (0) 2007.10.13
스크립트언어의 재발견  (0) 2007.03.09
[펌]포인터  (0) 2007.02.22
윈도우 스크립팅 맛들이기 - Smalltalk 이미지 파일 백업 배치파일  (2) 2007.02.07
윈도우 스크립팅 걸음마  (3) 2007.02.07
posted by 초딩입맛제주아재
prev 1 next

티스토리툴바