[JS]객체지향 프로그래밍 과 생성자

객체지향 프로그래밍 ?

• 프로그래밍의 방법론 중 하나.
• 구체적인 사물을 추상화하여 표현 => 최소한의 정보로 대상을 표현
• 객체를 만들어 서로 소통 할수있게 코드를 작성.
• 객체지향의 장점 
  • 모듈성: 각 객체마다 독립적인 기능과 데이터를 가짐 => 재사용률이 높아진다.
  • 재사용성: 다른 프로그램에서  재사용과 확장기능을 넣어 사용 할 수 있음.
  • 확장성: 기존 객체를 수정하지 않고 기능 확장
  • 유지보수성: 각객체가 독립적으로 작동, 코드의 중복이 적기 때문에 유지 보수하기가 편하다.
  • 직관성: 사물을 객체로 모델링하여 데이터와 메서드를 가지고 있음 > 구조 이해가 직관적이다.
  • 캡슐화: 데이터와 메서드를 하나의 단위로 묶어 객체의 세부 구현내용을 숨긴다.

 

1. 추상화 해보기

    const bank = [
      {
        name:'펭귄은행',
        account: 100,
        vipAccount: 6,
        allAccount: function allAccount(){
          console.log(`${this.name} 계좌 수 : ${this.account + this.vipAccount}`);
        }
      }
    ]

 

 

2. 각 다른 객체끼리 상화작용하게 해보기 

   const bank =
    {
      name: '펭귄은행',
      account: 100,
      vipAccount: 6,
      allAccount: function allAccount() {
        console.log(`${this.name} 계좌 수 : ${this.account + this.vipAccount}`);
      },
      makeAccount: function (customer) {
        customer.join();
        console.log(customer);
      }
    }

    const customer = {
      cusAccount: 1,
      join: function () {
        this.cusAccount++;
        // === this.account = account +1;
      }
    }

    bank.makeAccount(customer);
    //cusAccount가 2로 증가함

 

객체와 객체가 서로 메소드를 통해 상호작용 할수가 있다 .

 

 

생성자?

• new 연산자와 함께사용

const me = new Arrry ('펭귄', '희준', '패캠');
//['펭귄', '희준, '패캠']
//Array 는 JS 의 기본 내장 생성자 이다

• 생성자를 통해 생성된 객체는 같은 프로퍼티와 매서드를 공유한다.

 

1. 커스텀 생성자 만들기

//function (커스텀생성자 이름)(){}
//Java 의 class 이름과같이 첫문자가 대문자인것이 권고 사항이다
function Bank(){}

2. 프로토타입

• 객체를 생성하는건 쉽지만, 객체를 생성할때마다 새로운 함수도 같이 생성하게된다
  • 메모리 등 자원낭비가 심해진다.
• 특정 객체에대한 참조 : 생성자 함스로 인스턴스를 생성하게되면 prototype 을 자동으로 참조하게된다.
  • new 키워드를 통해 생성자 함수의 prototype과 __proto__ 가 연결되어 prototype 을 쓸수있게된다 (상속 받는다.)

const bank = [
      {
        name:'펭귄은행',
        account: 100,
        vipAccount: 6,
        allAccount: function allAccount(){
          console.log(`${this.name} 계좌 수 : ${this.account + this.vipAccount}`);
          //펭귄 은행 계좌수 106
        }
      },
      {
        name:'남극은행',
        account: 200,
        vipAccount: 4,
        allAccount: function allAccount(){
          console.log(`${this.name} 계좌 수 : ${this.account + this.vipAccount}`);
          //남극은행 계좌수 204
        }
      },
      {
        name:'추워은행',
        account: 800,
        vipAccount: 5,
        allAccount: function allAccount(){
          console.log(`${this.name} 계좌 수 :  ${this.account + this.vipAccount}`);
          //추워은행 계좌수 805
        }
      }]

      bank[0].allAccount(); //펭귄 은행 계좌수 106
      bank[1].allAccount(); //남극은행 계좌수 204
      bank[2].allAccount(); //추워은행 계좌수 805

 

이 코드를 커스템 생성자와 프로토 타입을 사용하며 변환시켜보자 

    // 프로토 타입으로 정의 해보기
    // 커스텀 생성자 생성
    // 생성자 함수는 화살표함수 사용불가(class 는가능)

    function Bank(name, account, vipAccount) {
      this.name = name;
      this.account = account;
      this.vipAccount = vipAccount;
    }

    //프로토타입 지정해주기
    Bank.prototype.allAccount = function () {
      console.log(`${this.name} 계좌 수 :  ${this.account + this.vipAccount}`);
    }

    const penBank = new Bank('펭귄은행', 100, 6);
    const souBank = new Bank('남극은행', 200, 4);
    const coldBank = new Bank('추워은행', 800, 5);

    penBank.allAccount();
    souBank.allAccount();
    coldBank.allAccount();