JavaScript Basic #6

JavaScript #6 – Object-Oriented (객체지향)

 

Object-Oriented Programming

객체지향프로그래밍(OOP): 로직을 상태와 행동(변수와 메소드)로 나누고 연관된 것들끼리 그룹핑한 것을 객체라 하고 이를 조립해 프로그래밍을 하는 것.

객체지향의 여러 가지 특성

1.     부품화: 프로그램의 로직들을 기능별로 나눠 부품화하는 것

2.     은닉화, 캡슐화: 로직을 온전히 부품화하기 위해 내부동작법은 숨기고 사용법만 노출하는 것

3.     인터페이스: 부품들간의 접점에서의 규칙, 약속

4.     객체지향은 코드의 재활용성을 높임.

 

객체

객체: 서로 연관된 변수와 함수를 묶은 것

메소드: 객체를 구성하는 함수

생성자: 객체를 만드는 역할을 하는 함수. JavaScript에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자임.

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('BinZIP');

document.write(p1.introduce()+"<br />");

 

var p2 = new Person('supernice');

document.write(p2.introduce());

생성자 내에서 객체의 Properties를 정의하는 작업을 초기화라고 함.

생성자 함수는 일반 함수와 구분하기 위해 첫 글자를 대문자로 표시.

 

전역객체

모든 객체는 전역객체의 Property임. 그리고 모든 전역변수와 함수는 window 객체의 Properties. 객체를 명시하지 않으면 임시적으로 window의 property로 간주됨.

var o = {'func':function(){

    alert('Hello?');

}}

o.func();

window.o.func();

Hello?가 두 번 alert 되는 것을 확인할 수 있음. 이에 따라 모든 객체가 기본적으로 전역객체의 property임을 알 수 있음.

 

This

This는 함수 내에서 Context of Calling Function(함수 호출 맥락)을 의미함. 맥락이라는 의미에 따라서, 함수를 어떻게 호출하느냐에 따라 this가 가리키는 대상이 달라짐.

함수를 호출했을 때 this는 전역객체인 window와 같음.

function func(){

    if(window === this){

        document.write("window === this");

    }

}

func();

참고로, 웹브라우저 JavaScript의 전역객체는 window이지만, node.js의 전역객체는 global임. 이들의 구성 메소드는 차이가 있기 때문에 알고 있어야 함.

 

객체 소속의 메소드의 this는 그 객체를 가리킴.

 

var o = {

    func : function(){

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();

 

아래 코드는 함수를 호출했을 때와 new를 이용해서 생성자를 호출했을 때의 차이임

var funcThis = null;

 

function Func(){

    funcThis = this;

}

var o1 = Func();

if(funcThis === window){

    document.write('window <br />');

}

 

var o2 = new Func();

if(funcThis === o2){

    document.write('o2 <br />');

}

생성자는 빈 객체를 만듬. 그리고 이 객체 안에서 this는 만들어진 객체를 가리킴.

생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없음.

Apply, call 함수 메소드를 사용하면 this의 값을 제어할 수 있음

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;         

    }

}

func();

func.apply(o);

func.apply(p);

 

상속

객체의 로직을 그대로 물려 받는 또 다른 객체를 만들 수 있는 기능. 하지만 단순히 물려받는 것이라면 의미가 없음. 기존의 로직을 수정하고 변경해서 파생된 새로운 객체를 만들 수 있게 해줌.

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('BinZIP');

document.write(p1.introduce()+"<br />");

 

이 코드는 위에서 다뤘던 코드임. 이 코드를 다음과 같이 수정함.

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

 

수정한 코드에 새로운 Programmer라는 생성자를 만들고 이 생성자의 prototype과 Person 객체를 연결해봄.

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

 

function Programmer(name){

    this.name = name;

}

Programmer.prototype = new Person();

 

var p1 = new Programmer('BinZIP');

document.write(p1.introduce()+"<br />");

Person 객체의 메소드 introduce를 Programmer 객체도 사용할 수 있음을 확인함. Programmer가 Person의 기능을 상속하고 있는 것. 하지만 단순히 똑같은 기능을 갖게 되는 것이 아니라, 부모의 기승을 계승 발전할 수 있는 것이 상속의 가치임.

 

function Person(name){

    this.name = name;

}

Person.prototype.name=null;

Person.prototype.introduce = function(){

    return 'My name is '+this.name;

}

 

function Programmer(name){

    this.name = name;

}

Programmer.prototype = new Person();

Programmer.prototype.job = function(){

    return "Job : Programmer";

}

 

var p1 = new Programmer('BinZIP');

document.write(p1.introduce()+"<br />");

document.write(p1.job()+"<br />");

Programmer는 Person의 기능을 가지면서 job이란 메소드를 부가적으로 가지고 있음을 확인할 수 있음.