본문 바로가기

자바스크립트/객체

객체지향 프로그래밍이란? 자바스크립트에서 객체를 생성하는 4가지 방법, 프로토타입은 무엇이고 왜 사용해야하는가?

객체지향 프로그래밍이란?

 

철학적인 개념과 닮아 있어 어렵게 느껴지는 것 같다.

객체를 쉽게 말하자면 세상 곳곳에 있는 사물이라고 비유할 수 있다.

예를 들어 책에는 책만의 네모진 형태가 있고, 종이로 돼 있고, 겉 표지가 있고,

한 장씩 넘길 때마다 새로운 내용이 나오는 등의 공통된 속성이 있다.

 

여기에 세부적으로 크기는 어떤지, 종이 재질은 어떤지, 디자인은 어떤지,

내용은 어떻느냐에 따라서 개별 책들이 정의된다.

 

프로그래밍에서도 공통으로 묶을 수 있는 요소들이 존재하고

개별 사물들이 그러하듯 이 공통된 요소들에 저마다의 다른점들을 붙여 다양한 것들을 만들 수 있다.

 

책을 정의할 수 있는 공통된 요소들과 각 책을 구분할 수 있게 해주는 요소들이 합쳐져 개별 책이 되는 것이다.

전자는 모든 책에 적용되는 요소이니 한 번만 정의해 두더라도

때마다 달라지는 후자와 결합하여 개별 책을 만들 수 있다.

 

이렇듯 프로그래밍에서도 공통되는 요소들을 하나의 틀로 정의해 두면 달라지는 요소들만 신경쓰면 된다.

반복해서 코딩할 필요없이 재사용할 수 있다는 장점이 있다.

또한 재사용이 가능하기 때문에 많은 형태들을 손쉽게 만들 수 있고 (Inheritance, Polymorphism)

공통된 부분에 문제가 생겨도 하나만 수정하면 되기 때문에 유지 보수에도 용이하다. 

 

특정한 목적을 위해 공통된 요소들을 묶어서 설계했기 때문에 

사용자 측면에서도 다루기 쉽다. 

목적과 관련된 명령만 내리면 되기 때문이다. (Encapsulation, Abstraction)

 

 

 

자바스크립트에서 객체를 생성하는 4가지 방법

 

1. Functional

 

var Book = function() {

    var obj = {};

    obj.page = 1;

    obj.nextPage = function() {

        this.page += 1;

    }

    return obj;

};

 

var bible = Book();

bible.nextPage();

 

2. Functional Shared

 

var extend = function(to, from) {

    for(var key in from) {

        to[key] = from[key];

    }

};

 

var func = {};

func.nextPage = function() {

    this.page += 1;

};

 

var Book = function() {

    var obj = {};

    obj.page = 1;

    extend(obj, func); // func를 참조만 하기 때문에 메모리 절약

    return obj;

};

 

var bible = Book();

bible.nextPage();

 

3. Prototypal

 

var func = {};

func.nextPage = function() {

    this.page += 1;

};

 

var Book = function() {

    var obj = Object.create(func);

    obj.page = 1;

    return obj;

};

 

var bible = Book();

bible.nextPage();

 

4. Pseudoclassical

 

var Book = function() {

    this.page = 1;

};

 

Book.prototype.nextPage = function() {

    this.page += 1;

};

 

var bible = new Book();

bible.nextPage();

 

 

 

프로토타입은 무엇이고 왜 사용해야하는가?

 

 

자바스크립트 프로토타입(prototype) 이해하기

크롬 빈탭의 콘솔창을 열어(F12) 객체를 생성하고 console.dir() 메소드를 이용해서 객체의 속성에 뭐가 들었는지 확인해보면 정의해놓은 prop1, prop2, prop3 뿐만 아니라 __proto__라는 속성이 반투명하게 보인..

thinkforthink.tistory.com

 

프로토타입은 자바스크립트에서 상속을 가능하게 해주는 속성으로

한 객체의 프로토타입 속성에 넣은 속성들을 자식이 그대로 상속하게 된다.

속성들을 상속할 때 새로운 것을 다시 만드는 게 아니라 참조하기 때문에

메모리를 절약할 수 있고 위의 4번째 방식으로 객체를 생성할 때 반드시 사용해야 한다.