JavaScript - OOP Object 생성

nRecode·2020년 5월 9일

JavaScript

목록 보기

9/12

(학습을 진행하면서 내가 이해하고 공부한 부분을 기록합니다!)

JavaScript 객체지향

비록 C++, JAVA와 같은 언어들과의 차이점에 대한 논쟁이 있지만, JavaScript는 강력한 객체지향 프로그래밍을 할 수 있다고 합니다.

프로토타입기반 프로그래밍은 객체지향 프로그래밍의 한 형태로 클래스가 없고, 클래스 기반언어에서 상속을 하는 것과 다르게, 객체를 원형(Prototype) 으로 복제의 과정을 통하여 객체의 동작방식을 다시 사용합니다!

객체 생성하기

그럼 JavaScipt에서 객체를 생성하는 방법을 알아보겠습니다.
지금은 ES6 class키워드가 나왔지만, 나오기 전에 JavaScript를 객체 지향적으로 사용하기 위해 다양한 시도가 있었다고 하네요!

1.Functional

함수를 이용하여 찍어내는 방식입니다.

생성자 함수에 모든 속성값과 메소드를 할당합니다.

// Notebook이라는 함수를 만듭니다
var Notebook = function(){ 
  //함수를 실행 했을 때, 찍어내 줄 객체를 선언합니다. return 을 해주어야 함수의 결과로 객체가 나옵니다.
  var someInstance = {}; 
  // number를 0으로 초기화 해줍니다. Notebook 함수가 실행되어 나온 인스턴스의 초기값은 항상 0입니다. 
  //Notebook에 매개변수가 있다면 초기 number를 지정할 수 있습니다.
  someInstance.number = 0; 
  // someInstance에 buy라는 매소드를 추가합니다. 
  //function내부에 있는 this는 someInstance를 뜻하고 실행시 number 값이 1 씩 증가합니다.
  someInstance.buy = function(){ 
    this.number += 1;
  }

  return someInstance;
};

//콘솔 실행
var notebook1 = Notebook();
var notebook2 = Notebook();
notebook1.buy();
notebook1 // {number: 1, buy: ƒ}

2.Functional Shared

// 3. extend함수를 만들어서 someInstance와 someMethod를 Notebook 함수 내부에서 합쳐줍니다.
var extend = function(to, from){
  for (var key in from){
    to[key] = from[key]; 
  }
};
// 2. 메소드를 담아줄 객체를 생성합니다. 모든 메소도는 someMethods에 담습니다.
var someMethods = {};
someMethods.buy = function(){
  this.number += 1;
};
// 1. 먼저 Notebook 함수를 선언해 줍니다. 바로 number를 someInstance의 property로 넣어준 것 외에 다른 부분이 없습니다.
var Notebook = function(number){
  var someInstance = {
    number: number,
  };
  // 3 부분
  extend(someInstance, someMethods);
  return someInstance;
};

//콘솔 실행
var notebook1 = Notebook(10);
var notebook2 = Notebook(5);
notebook1 // {number: 10, buy: ƒ}
notebook2 // {number: 5, buy: ƒ}

뭔가 Functional보다 번거롭고 귀찮기만 한 것 같습니다. 그럼 굳이 왜 이런 방법을 사용 했을까요?

Functional 방식은 인스턴스를 생성할 때마다 모든 메소드를 someInstance에게 할당하므로 , 각각의 인스턴스들이 메소드의 수 만큼의 메모리를 더 차지합니다.

하지만 Functional Shared방식을 사용한다면, someMethods라는 객체에 있는 메소드의 메모리 주소만을 참조합니다. 메모리 효율이 좋아지겠죠

3.Prototypal

// 1. Functional Shared 방식과 비슷하게 코드를 작성합니다.
var someMethods = {};
someMethods.buy = function(){
  this.number += 1;
};
var Notebook = function(number){
  // 2. Functional Shared 와는 다르게 Object.create를 사용합니다.
  var someInstance = Object.create(someMethods);
  someInstance.number = number;
  return someInstance;
}

//콘솔 실행
var notebook1 = Notebook(5);
notebook1 //{number: 5}

Object.create의 역할은 그럼 무엇일까요?
특정 객체를 프로토타입으로 하는 객체를 생성해 주는 함수입니다. 위의 코드에서는 새로 만들어질 객체의 프로토타입이 되는 객체는 someMethods가 되겠죠?

4.Pseudoclassical

// 1. 아래와 같이 코드를작성해 줍니다.
var Notebook = function(number){
 this.number = number;
};
// 2. 메소드를 프로토 타입으로 만들어 줍니다.
Notebook.prototype.buy = function(){
  this.number += 1;
};

//콘솔 실행
//new operator를 사용하여 객체를 찍어냅니다.
var notebook1 = new Notebook(5);
notebook1 // Notebook {number: 5}

new연산자는 사용자 정의 객체 타입 또는 내장 객체 타입의 인스턴스를 생성합니다.

5. ES6 Class keyword

그럼 ES6 class 키워드를 사용해서는 어떻게 만들 수 있을까요?

// 1. class 키워드를 사용합니다.
class Notebook{
  // 2.  constructor 메서드를 사용하여 초기화 합니다.
  constructor(number){
    this.number = number;
  }
  // 3. 메소드도 간단히 지정할 수 있습니다.
  buy(){
  this.number++;
  }
};