메뉴 건너뛰기


Developer > Web Application

HTML,CSS,JS JavaScript - OOP 와 prototype

2013.12.28 03:43

푸우 조회 수:8144



제목:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

Javascript - OOP 와 prototype

작성자

DEV.WON ( http://blog.naver.com/jadin1 )

작성일

2007-11-30

배포

PUBLIC (출처는 밝혀 주세요)

 

 

 

 

시작하기전)

web 2.0 흐름에 맞춰, 여러 차세대 웹 플랫폼 스펙이 명시되고 있습니다.

갠적으로 silverlight 를 좋아합니다만, 아직까지 제약사항이 많네요..

어쨋거나, WEB RIA 를 구축하기 위한 화두는 역시 Javascript 라고 생각듭니다.

구글에서 Ajax Framework 를 발표하였는데요. 괜찮더군요.

또한 Ruby의 Ajax 지원또한 맘에 듭니다.

Javascript도 Ajax의 흐름에 부응(?)하여 다시 재조명 할 필요가 있다고 생각듭니다.

필자는 처음 제대로(?) 프로그래밍 언어에 입문한 언어가 바로 이 Javascript라죠..

그래서 정석코스라 할수있는 C언어를 처음 접했을때 자료형에 난감했었다는 우스운 경우가..^^;;;

시간이 지나 Javascript를 다시 바라보면, 참 감회가 새롭습니다.

언어 스팩은 그대로 인것 같은데 , 이 Javascript 처럼 시대의 흐름에 따라 다르게 재조명 되는 언어도 드물지 않을까요?

횡설수설..ㅋ

Javascript도 공부할 양이 적지 않습니다. 적어도 웹프로그래밍 클라이언트 개발에는 없어서는 안될 존재지요..

Javascript에 친숙해지면, 성능이슈라던가, 개발할수있는 방향 폭도 넓어 지는것 같습니다.

Javascript 좋은 책을 추천해 달라는 소리가 요즘 부쩍 늘고있는데요, 아주 가벼운 Javascript입문책 을 보신후

DOM,JSON,XML관련 API등을 보시라 추천드리고 싶네요.

하지만 역시나 MSDN이 최고라 생각듭니다만...IE쪽으로 없는게 없으니까요..

 

아울러 Javascript는 IDE라든가, 디버깅등의 미지원으로 매우 힘들어 하시는 분들이 있는데요.

apatana.com의 IDE 매우 좋습니다. 특히 eclipse 유저시면 eclipse plug-in을 추천합니다.

잡담이 길었네요. 사실 제가 Javascript 를 좋아합니다.

각설하고 , 오늘은 Javascript의 OOP기능을 알아 볼것입니다.

아니, 스크립트 언어에 웬 객체지향이냐 말씀하시는 분도 있으실테고, 완벽한 객체지향이 아니지않냐 하시는 분도

있을실텐데요... 일단 한번 Javascript OOP를 접해보시는것도 나쁘지않지 않을까요?

Copy&Paste Javascript도 있지만, 때론 RIA환경을 위한 Javascript도 존재하기 마련이고 그만큼 복잡도가 올라가는

경우도 요즘같은 Ajax 의 중요성이 강조되는 시기에는 흔하니까요^^;

 

자 시작해 보죠. 편의상 짧은 말투 양해 바랍니다.

 

 

 

 

 

 

 

 

Javascript OOP, Prototype)

1. 객체에 속성이용

man.name="홍길동";

Man["name"] = "홍길동";

 

 

 

2. 함수 추가

1) 익명의 함수 이용

(함수의 이름이 없고 몸체만있는 함수) 

Man.getName = fuction(){

       return this.name;

}

 

 

 

 

 

2) 객체 외부 함수 이용

function printName()

{

       alert(this.name);

}

Man.getName = printName; // 괄호를 사용하지 않음

 

 

 

3. 객체 생성

 

1) new Object(); 방식

 new Object();

 var man = new Object();

 man.name = "홍길동";

 

 

2) 생성자이용

function ManObject(name, height){

       this.name = name;

       this.height = height;

}

Var man = new ManObject("홍길동", 170);

Alert(man.name + / " + man.height);

 

3) 생성자를 이용한 방식에서 클래스에 메소드 추가

function ManObject(name, height){

 this.name = name;

 this.height = height;

 

this.getName = function(){

       return this.name

} // 생성자에 직접 함수 정의

}

 

Prototype 속성은 모든 자바스크립트 객체의 기본속성이다.

--어떤 객체의 prototype 속성이나 함수를 정의 한다는 것은 앞으로  객체에 공통적으로 적용되는 속성이나 함수를 정의한다는 의미

 

 

 

 

4.Prototype  이용

function ManObject(name, height){

       this.name = name;

       this.height = height;      

} // 생성자를 만들고 함수는 생성자 안에 지정하지 않음

 

ManObject.prototype.getName = function(){

       return this.name;

} // prototype 속성에 새로운 함수를 붙임

 

 

생성자에 함수 정의

인스턴스를 여러  만들때 인스턴스는 메모리로 상주. 인스턴스마다 함수와 같이 생김

Prototype 이용

함수가 단한번 만들어지고 모든 인스턴스는  프로로타입 함수를 공유한다.

객체안에 내장된 함수가 객체의 지역변수를 자신의 지역변수처럼 사용할 경우 이러한 함수를 클로저라 한다.

 

 

 

 

5.클로저

1-1) 클로저 발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = function(){

              var now = new Date();

              var elapsed = now - startTime;

              return elapsed;

       }

}      // 클로저 : startTime  함수 안에 없고클래스 변수         //startTime 참조함

       //클로저발생 => 함수 안에서 사용하는 외부의 지역변수는

       //깨긋이 지워지지 않고 함수에 묶여있어 메모리 누수현상발생.

  

 

 

 

 

1-2) 참조할수 있는 startTime이 없어 오류발생 하는 경우

function MyObject(){

       var startTime = new Date();

       this.elapsedTime = getElapsed;

}

function getElapsed(){

     var now = new Date();

     var elapsed = now + startTime();        return elapsed;

}

 

 

 

1-3) 클로저 발생안되게 사용하는 방법

function MyObject(){

       this.startTime = new Date();

}

MyObject.prototype.elapsedTime = function(){

      var now = new Date();

      var elapsed = now + this.startTime;      

      return elapsed;

}

 

 

 

 

 

 

6.Prototype  성질 

 

1) Prototype 속성 변경  

 이전에 만들 객체의 속성은 자동으로 변경

 프로토 타입 영역의 속성은 모든 인스턴스간에 공유

function MyObject(){ }

 

MyObject.prototype.color = "blue";

var obj1 = new MyObject();

alert(obj1.color); // blue

MyObject.prototype.color = "red";

car obj2 = new MyObject();

alert(obj1.color + " / " + obj2.color); // red / red

 

 

 

 

2) Prototype 이용한 내장객체 확장

Object.prototype.log = function(){

document.write("this:" + this);

//최상위 객체인 Object 프로토타입에 log함수 추가 => 모든 자바스크립트 객체변수에 대해서 log메소드 사용가능

}

var arr = new Array(0,1,2);

arr.log(); // this : 0, 1, 2

var name = "mike";

name.log(); // this : mike

var sum = 1 + 3;

sum.log();       //this : 4

 

 

 

 

 

 

7. 자바스크립트 객체의 상속

1-1) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 없는경우)

function ManObject(){ }

       ManObject.prototype.eyeCnt = 2;

       ManObject.prototype.getEyeCnt = function(){

              return this.eyeCnt;

}

function AsianMan(){

       this.eyeColor = "black";

}

AsianMan.prototype = new ManObject();//AsianMan  부모클래스는 ManObject

 

 

function WesternMan(){

       this.eyeColor = "blue";

}

WesternMan.prototype = new ManObject();//WesternMan  부모클래스는 ManObject

 

 

var HongGilDong = new AsianMan();

var smith = new WesternMan();

 

alert(HongGilDong.eyeCnt); // 2

alert(HongGilDong.eyeColor); // black

alert(HongGilDong.getEyeCnt()); // 2

alert(smith.eyeCnt); //2

alert(smith.eyeColor); // blue

alert(smith.getEyeCnt()); // 2

 

 

 

 

 

 

 

1-2) 상속 - prototype 을 이용한 부모 클래스 지정방법 (부모클래스 생성자 매개변수 있는경우)

/**

 * 사람 클래스

 * @param {String} name

 * @param {String} age

 */

function Person(name){

       this.name = name;

 

       this.getName = function(){

              return this.name;

       }

}

 

var gradeEnum = {

       one        : 1 ,

       two        : 2,

       tree       : 3

}

 

function Student(name, schoolName){      

       this.schoolName = schoolName;      

       this.getSchoolName = function (){

              return this.schoolName;

       }      

             

       this.grade;

       this.getGrade = function(){

              return this.grade;

       }      

}

Student.prototype = new Person("홍길동"); //순서가 중요.제일 먼저Student.prototype을 지정해야함.

 

/**

 * prototype 이용한 setGrade 메소드 확장

 * @param {gradeEnum} grade

 */

Student.prototype.setGrade = function (grade){

       this.grade = grade;

}

var student = new Student("홍길동" ,  "홍길동대학교");

alert(student.getName());                    //홍길동

alert(student.getSchoolName());              //홍길동대학교

student.setGrade(gradeEnum.tree);      

alert(student.getGrade());                   //3

 

 

 

 

 

 

 

2-1) 상속 - base 속성,메소드를 이용한 방법(부모클래스 생성자 매개변수 없는경우)

function ManObject(){

       this.eyeCnt = 2;

       this.getEyeCnt = function(){

              return this.eyeCnt;

       }

}

 

 

// AsianMan  부모클래스는 ManObject;

function AsianMan(){

       this.base = ManObject;

       this.base();

       this.eyeColor = "black";

}

 

 

 

 

 2-2) 상속 - base 속성,메소드를 이용한 방법(부모클래스 생성자 매개변수 있는경우) 

/**

 * 사람 클래스

 * @param {String} name

 * @param {String} age

 */

function Person(name){

       this.name = name;

 

       this.getName = function(){

              return this.name;

       }

} 

 

var gradeEnum = {

       one        : 1 ,

       two        : 2,

       tree       : 3

} 

function Student(name, schoolName){      

       this.base = Person;             //부모클래스 지정

       this.base(name);                //부모클래스 생성자호출

 

       this.schoolName = schoolName;      

       this.getSchoolName = function (){

              return this.schoolName;

       }      

             

       this.grade;

       this.getGrade = function(){

              return this.grade;

       }      

}

  

/**

 * prototype 이용한 setGrade 메소드 확장

 * @param {gradeEnum} grade

 */

Student.prototype.setGrade = function (grade){

       this.grade = grade;

}

 

var student = new Student("홍길동" ,  "홍길동대학교");

alert(student.getName());                    //홍길동

alert(student.getSchoolName());              //홍길동대학교

student.setGrade(gradeEnum.tree);      

alert(student.getGrade());                   //3

 

 

 

 

 

 

 

 

9. for 문의 재발견 

for(var param in args){

       alert(param);

}

 

 

 

 

 

 

 

 

마치며)

이로써 간단하게나마 Javascript OOP와 더불어 prototype속성에 대해서도 알아보았습니다.

아참, prototype.js 라는 Javascript 프레임워크 추천합니다.

하지만 코드의 가독성이 떨어진다, 맘에 안든다 하시는분은 prototype.js 에서 지원하는

Ajax쪽만 활용하셔도 괜찮을듯 싶네요..

 

아울러 Javascript로 XML관련 핸들링하는것도 제 블로그에 있으니 참고하시구요.

(http://blog.naver.com/jadin1/70008395017)

 

 

오타나, 부족한 점있으시면 언제나 댓글이나 쪽지 주세요.

 

아참, 그리고 필자의 이번 강좌 편집을 도와준 Dev.Lion(http://blog.naver.com/panelion)에게 감사함을 표합니다.

 

 

 

 

부족한 강좌 끝까지 읽어주셔서 감사합니다.