들어가기전

글을 쓰면서 항상 두려운 것이 있어 먼저 밝히고 들어 갑니다.

우선 전 전산분야의 비전공자이고 전산 분야에 제대로된 교육을 별도로 받은 적이 없습니다.

아~ 물론 실무를 바탕으로 제가 전산관련 학원강의를 한 경험은 있습니다.

하지만 알고 있는 것과 책을 바탕으로 길을 안내해드리는 일과 이렇게 어떤 내용에 관해서 글로 남기며 이 길과 정의가 맞다고 이야기 해나가는 약간 다른 의미가 있는 것 같습니다.

그래서 비전공자이면서 동시에 제대로된 이론 교육없이 작성을 하다보니 개념이나 용어가 다소간 원래의 의미에 맞지 않거나 통용되는 정의와 전혀 다른 혼자만의 정의였을 가능성을 배제할 수 없습니다.

그런 부분이 있다면 너그러이 이해해주시고 그냥 지나치지 마시고 지적해주셨으면 합니다.

자 본론으로 들어가겠습니다.

이전 강좌에서 다루었던 object의 instance를 생성하고 이를 확장하는 방식으로 OOP하는 것으로 왠만하면 충분하고 그런대로 문제가 없다고 했습니다.

그리고 실제로 jQuery plugin을 만들 때 대부분 이를 응용합니다.

하지만 그냥 "대부분의 경우에 충분하고 그런대도 괜찮다"는 딱 거기 까지 한계입니다.

(후후 이전 강좌를 배신하는 이 한마디...)

결국 Javascript라는 Script언어로 모든 쓰임새를 충족하고 쉽게 만족하는 OOP를 하기에는 어느 정도 Javascript script언어자체에서부터의 한계점이 있을 것 같아보입니다.

자.. 그리고 이전 강좌에서 다룬 Object instance를 확장하는 어설픔 방법(와~~ 완전 배신이다.)으로는 쉽게 생각해도 개체형식의 상속 등이 그 태생때문에서 부터 어려워 보입니다.

결국은 이번에 다루는 function으로 class를 선언하듯 하고 이를 new 키워드를 통해서 object형으로 instance화 해서 사용하는 방법이 중요하다는 이야기를 하고 싶은 것 입니다.

function을 사용한 class 생성

기본적인 class 정의 방법와 그 정의를 확장하고 사용하는 방법까지를 간단한 예제로 살펴보도록 하겠습니다.

<script language="javascript" type="text/javascript">
//함수를 정의하는 것이 곧 class를 정의하는 행위가 되는 겁니다.
function MyCompany() {
//함수 안에서 this 키워드로 속성을 작성합니다.
this.CompanyName = "My Company";
//함수 안에서 this 키워드를 이용하여 익명함수를 할당함으로써 메서드를 작성합니다.
this.AlertCompanyName = function () {
alert(this.CompanyName);
}
}
//class 정의 밖에서 해당 형식이 object형을 상속 받아서 만들어지는데 object의 밑의 prototype을 이용하여 속성 만들기
MyCompany.prototype.Owner = "Me";
//class 정의 외부에서 익명함수를 할당함으로써 메서드 구현하기
MyCompany.prototype.AlertOwner = function () {
alert(this.Owner);
}
//위에 정의된 MyCompany형의 instance를 생성합니다.
var _company = new MyCompany();
//속성을 사용한다.
alert(_company.CompanyName);
//메서드를 호출한다.
_company.AlertCompanyName();
_company.AlertOwner();
</script>

<script language="javascript" type="text/javascript">
function MyCompany() {
this.CompanyName = "My Company";
this.AlertCompanyName = function () {
alert(this.CompanyName);
}
}
//new 키워드가 무엇을 하는지 살펴보기 위해서 new MyCompany를 분해하여 다음과 같이 코딩합니다.
var _company = new Object(); // 또는 var _company = {};
MyCompany.call(_company);

alert(_company.CompanyName);
_company.AlertCompanyName();
</script>

위의 예제를 통해서 금방 눈에 들어오는 이야기이지만 결국 new 키워드는 빈 object를 만들고 class 생성하고자는 함수 이름의 [function name].call 매서드를 통하여 해당 function을 생성자로 빈 object를 채워주는 것 입니다.

과연 그럼 new 가 빈 object에 call메서드를 동작한 걸까요?

아님을 증명하는 예제를 살펴보도록 하겠습니다.

<script language="javascript" type="text/javascript">
function MyCompany() {
this.CompanyName = "My Company";
this.AlertCompanyName = function () {
alert(this.CompanyName);
}
}
MyCompany.prototype.Owner = "Me";
MyCompany.prototype.AlertOwner = function () {
alert(this.Owner);
}
//new 키워드로 생성한 개체
var __company = new MyCompany;
alert(__company.CompanyName);
__company.AlertCompanyName();
__company.AlertOwner();
//new 키워드를 흉내낸 방법
var _company = new Object(); // 또는 var _company = {};
MyCompany.call(_company);
alert(_company.CompanyName);
_company.AlertCompanyName();
//여기서 에러 나죠.
_company.AlertOwner();
</script>

자 위의 예제를 통해서 보면 알 수 있듯 new 키워드는 function 생성자를 통해 정의된 것과 prototype을 통해서 확장된 것까지를 완전히 instance화하는 것입니다.

하지만 흉내낸 방법은 단지 빈 object에 생성자 function안 있는 내용을 instance화 해서 넣어주는 것 입니다.

하여튼 위의 예제들을 통해서 알리고자는 것은 function을 new함으로써 기본이 object형을 상속받아서 function의 내용을 instance화 하여 사용할 수 있다는 것입니다.

그럼 function을 통해서 instance화 시킬 수 있는 class를 정의할 수 있지 않을까요?

(스스로가 의구심을 가지고 대답하시기 바랍니다.)

상속

개체정의의 형의 속성, 메서드를 그대로 가지고 다른 형을 다시 정의할때 이를 상속이라고 합니다.

VS의 intellisense에서 볼 수 있는 개체의 namespace의 상하 관계와는 아무런 관련이 없습니다.

<script language="javascript" type="text/javascript">
function Company() {
this.name = "My Company";
this.AlertName = function () {
alert(this.name);
}
}

//Company를 상속 받고 새로운 생성자를 지정함으로써 Department 형을 만듭니다.
Department.prototype = new Company();
Department.constructor = Department;

function Department() {
this.name = "Dept Name";
}
//company 자신의 method가 실행됩니다.
(new Company).AlertName();
// company로 부터 상속 받은 method를 실행합니다.
(new Department).AlertName();
</script>

<script language="javascript" type="text/javascript">
function Company() {
this.name = "My Company";
this.AlertName = AlertName;
}
function Employee() {
this.name = "Person Name";
this.AlertName = AlertName;
}

function AlertName() {
alert(this.name);
}

(new Company).AlertName();
(new Employee).AlertName();
</script>

<script language="javascript" type="text/javascript">
function Company() {
this.CompanyName = "My Company";
this.AlertCompanyName = function () {
alert(this.name);
}
}

//Company를 상속 받고 새로운 생성자를 지정함으로써 Department 형을 만듭니다.
Department.prototype = new Company();
Department.constructor = Department;

function Department() {
this.DepartmentName = "Dept Name";
this.AlertDepartmentName = function () {
// 소유자인 현재의 department에는 companyname이 없습니다.
// 그러면 상속해준 개체로 찾아 간다. 계속 찾아가다 보면 object()형 까지 올라가게 되는 것 입니다.
alert(this.CompanyName + ' > ' + this.DepartmentName);
}
}
(new Department).AlertDepartmentName();
</script>

<script language="javascript" type="text/javascript">
function vitamin() {
this.name = "비타민 이름";
}
vitamin.prototype.ingredient = "C";

var vitamin1 = new vitamin();
alert(vitamin1.hasOwnProperty("name")); //true
alert(vitamin1.hasOwnProperty("ingredient")); //false
</script>

<script language="javascript" type="text/javascript">
function vitamin() {
this.name = "비타민 이름";
}
vitamin.prototype.ingredient = "C";

var vitamin1 = new vitamin();

//가격은 정의되기 이전이므로 당연히 여기까지는 undefined입니다.
alert(vitamin1.price); //undefined

// 이미 instance화 되어 있다고 해도 해당 원래 형의 정의에 prototype에 새로 추가를 하면
// 그 이미 그 형으로 instance화 되었던 것 까지 모두 해당 속성이 새로 추가되어져 있음을 확인할 수 있습니다.
// 왜냐하면 형의 정의에 해당 하는 function에 prototype이라는 속성 안에 이미 instance화되어 있는 prototype을 참조하고 있기 때문입니다.
vitamin.prototype.price = 20000;
alert(vitamin1.price); // 20000

</script>

<script language="javascript" type="text/javascript">
function vitamin() {
this.name = "비타민 이름";
}
vitamin.prototype.ingredient = "C";

var vitamin1 = new vitamin();
//prototype에 의해 상속 받아진 것이므로 당연 해당 object가 가진 속성이 아닙니다.
alert(vitamin1.hasOwnProperty("ingredient")); //false

// 해당 속성의 값을 바꿉니다.
vitamin1.ingredient = "mineral";

// 속성의 값을 바꿀려고 했을 뿐인데 ??
// 이전 까지의 강좌를 들으셨으면 감이 오실 겁니다. object는 사전이다. 해당 key가 없으니깐 새로 해당 key로 값을 할당하는 겁니다.
// 그런 과정때문에 새로운 속성이 생긴겁니다.
// 물론 prototype의 속성은 그대로 "C"가 들어 있을 겁니다. 아마도 ㅎ
alert(vitamin1.hasOwnProperty("ingredient")); //true

</script>

<script language="javascript" type="text/javascript">
// 다른 언어에서 하듯이 class를 선언하듯 하고 상속하듯 합니다.
function DrawingObject() {
this.Draw = function () {
alert('generic drawing');
}
}

Circle.prototype = new DrawingObject();
Circle.constructor = Circle;
function Circle() {
this.Draw = function () {
alert('circle');
}
}

Square.prototype = new DrawingObject();
Square.constructor = Square;
function Square() {
this.Draw = function () {
alert('Square');
}
}

//사용을 하려니 모든 형은 var 결국 object입니다. 그래서 변수를 데이터형을 지정해서 선언할 수 있는 다른 언어라면 아래와 같이 이형체의 예제를 만들 수 있겠지만
//아쉽게도 javascript는 var이라는 키워드로 형을 별도로 지정해서 선언 할 수 없습니다.ㅋ
/*
DrawingObject[] _drawing = new DrawingObject[2]
_drawing[0] = new Circle();
_drawing[1] = new Square();

_drawing[0].Draw();
_drawing[1].Draw();
*/
// 이전 강좌를 통해서 말씀 드린 적인 있는데 object는 dictionary입니다. 그걸 응용해보겠습니다.
var _drawings = new DrawingObject();
_drawings[0] = new Circle();
_drawings[1] = new Square();
_drawings[0].Draw();
_drawings[1].Draw();
</script>

<script language="javascript" type="text/javascript">
function 캐릭터() {
// 받고자하는 매개변수를 왕창 다 몰아서 하나의 함수안에서 분기 합니다.
this.외치기 = function (외칠말, 외칠횟수) {
if (외칠횟수 == null)
alert(외칠말);
else
alert(외칠말 + ' * ' + 외칠횟수);
}
}
var 나의캐릭 = new 캐릭터();
//사용할 때는 마치 이형체 처럼..
나의캐릭.외치기("야호~~");
나의캐릭.외치기("멍~", 2);
</script>

<script language="javascript" type="text/javascript">
// 자가 실행 함수 (self-invocation)
(
function () {
var str = "연습";
alert(str);
}
)();
</script>

<script language="javascript" type="text/javascript">
//각각의 js에 모두 흩어져 있는 코드들이라고 상상해보세요.

//이것은 dummycompanyutil200901.js
var str = "엄청중요한값임 흔한 변수명에다 담아버림";

//이것은 dummycompanyutil201109.js
//이 회사는 뭔 util.js가 매달 별로 만들까요? 아니면 프로젝트별, 개인별 어디서 많이 보는 저희들의 모습이죠.
//그런데 이런 흔한 이름으로 변수명을 써버리면 그것도 전역으로 당연 겹쳐쓰시는 분들이 생겨날것 입니다.
var str = "진짜 중요한것";

//이것은 mycompany.js
//그리하여 별개의 class 안에서 독립된 작업을 하고 이를 self-invocation
(
function () {
var str = "연습";
alert(str);
}
)();

//여긴 test.html
// dummycompany.js들에 의해서 결과는 뭐가 나올지 어디서 그렇게 된 건지 찾기가 참 난감해진다.
alert(str);
</script>

<script language="javascript" type="text/javascript">
//이제는 function의 예를 들어 보자

//이것은 dummycompanyutil200901.js
function test() {
alert("연습");
}

//이것은 dummycompanyutil201109.js
function test() {
alert("가나다라마바사");
}

//이것은 mycompany.js
//그리하여 별개의 class 안에서 독립된 작업을 하고 이를 self-invocation
(
function () {
function test()
{
alert("동해물과백두산이마르고");
}
test();
}
)();

test();
</script>

<script language="javascript" type="text/javascript">
var str = "문자열";

(
//이미 설명 드린봐와 같이 self-invocating function 안쪽 영역은 외부와 관련 없는 공간 입니다.
function () {
var str = "여긴 다른 세계";
alert(str);
}
)();

(
//하지만 외부의 값을 읽을 수 있죠.
function () {
alert(str);
}
)();

(
//class 영역 안에서 선언하지 않고 사용하게 되면 그 class 속한 상위 영역에서 찾게 되고 바로 함수 밖의 변수를 그대로 사용하게 되는 것 입니다.
function () {
str = "이러면 어떻게 될까요?";
alert(str);
}
)();
alert(str);
</script>