코드스테이츠 23일차

오늘의 키포인트

Class

나의 이해

Class : js를 객체지향적으로 쓰기 위한 방법

문법 및 중요

절차 지향 프로그래밍 : 일반적으로 생각하는거 ex)편의점 문을 연다. 들어 간다. 물건을 집는다. 점원한테 준다. 돈을 지불한다.....

객체 지향 프로그래밍 : 점원한테는 계산과 같은 속성 및 메소드 존재, 소비자한테는 구매 같은 속성 및 메소드 존재 인간이 세상을 보는것과 유사.

OOP(Object-oriented programming) 객체 지향 프로그래밍 : 데이터와 기능을 한 곳에 묶어 처리
속성, 메소드가 하나의 객체에 포함, 이는 js의 내장 타입인 object와 다르게 class로 부름
객체 지향은 메모리를 많이 먹으나 보기 편하고 재사용성이 좋음

 

메소드 호출때는 화살표 함수 안쓴다

let counter ={

  count : 0

  increase : function(){

  this.count ++ // 메소드 호출시 this는 counter 가리킴
  }

  getCount : function(){

    return this.count

  }

}

counter.increase() 해도 count 값은 여전히 0 이고

counter.getCount() 메소드로 호출해서 봐야함

 

위의것을 클로저 모듈을 이용해서 재활용 한다면

function makeCounter(){

  return {

    increase : function(){

    this.count ++ // 메소드 호출시 this는 makeCounter 함수가 리턴하는 익명의 객체
    }

    getCount : function(){

      return this.count

    }

  }

}

let counter1 = makeCounter()

counter1.uncrease() 처럼 쓸 수 있음

함수 안에 함수가 있고 리턴을 써야함

 

class는 암묵적 규칙으로 대문자, 일반명사로 만듦

new키워드로 클래스의 인스턴스 만듦

prototype : 모델의 청사진을 만들 때 쓰는 original form(원형 객체)
constructor : 인스턴스가 초기화될 때 실행하는 생성자 함수
this : 함수가 실행 될 때 해당 scope마다 생성되는 고유한 실행 context, new 키워드로 인스턴스를 생성했을땐 해당 인스턴스가 바로 this의 값이됨

 

속성 정의
ES5
Function o(a,b,c){
this.a=a;
}
ES6
class o{
constructor(a,b,c){
this.a=a;
}}

 

메소드 정의
ES5
Function o(man,b,c){ }
man.prototype.eat = function(){
}
ES6 // 생성자 함수와 함께 class 키워드 안에 묶음
class o{
constructor(man,b,c){}
eat(){}
}

클래스 문법을 이용한 카운터

class Counter{

  constructor(){

    this.value = 0;

  }

  increase(){

    this.value++

  }

}

let counter1 = new Counter()

counter1.increase()

 

객체 지향 프로그래밍의 4가지 컨셉
Encapsulation(캡슐화)
Inheritance(상속)
Abstraction(추상화)
Polymorphism(다형성)

캡슐화
속성(데이터)와 메소드(기능)을 하나의 객체 안에 넣어서 느슨하게 결합.
코드 실행 순서에 따라 절차적 코드 작성이 아닌 기능을 보고 묶어놓는 것.
캡슐화에는 은닉화라는 특징 포함}
은닉 : 내부 데이터 및 구현이 외부에 노출되지 않도록 만듦 내부 내용 바꿔도 외부 흐름에 영향 안미쳐서 유지보수에 좋음  그에반해 절차적 코드는 유지보수에 안좋음

상속
부모 클래스의 특징이 자식클래스에도  정확히 말하면 기본(base)클래스의 특징을 파생(derive)클래스가 상속받음

추상화
내부 구현이 복잡하더라도 외부에서 보기엔 간단한 인터페이스로 만들기
(캡슐화는 데이터의 은닉에 포커스, 추상화는 클래스를 사용하는 사람이 필요하지 않은것들을 노출시키지 않는것에 포커스 클래스 정의시 메소드와 속성만 정의한 것을 인터페이스라고 부름)

다형성
같은 이름을 가진 메소드라도 조금씩 다르게 작동하게 ex) html에서 태그들마다 용도가 다름 하지만 html element라는 클래스에서 같은 메소드로 상속받아 만든 태그들임

장점
캡슐화 : 코드 간결, 재사용성
상속 : 재사용성
추상화 : 코드 간결, 단순화된 사용으로 인해 변화에 대한 영향 최소화
다형성 : 동일한 메소드에 대해 if, else if와 같은 조건문대신 객체 특성에 맞게 작성가능

 

js는 프로토타입 기반 언어 (Prototype)은 원형 객체 의미

 

Person이라는 class에서 클래스와 프로토타입, 인스턴스의 관계. 인스턴스가 manseon일때

Person === manseon.__proto__.constructor === Person.prototype.constructor

person.protoype === mansoen.__proto__

manseon === new Person(); instantiation 

 

constructor에 super을 꼭 써야하나요? 상속 받아온다면 쓰는게좋음 // 생략하면 다 불러와져서 에러는 없는것으로 기억 아마도 메모리 문제때문인듯
extends, super같이 쓴다고 생각해도 무방

super로 상속해올경우 상속받는 속성을 적어주것은 그때그떄 다름

프로토타입 기반 언어(prototype-based language)
모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미
constructor()에서 첫번쨰로 super() 연산자를 정의하면 코드를 조금 더 읽기 쉬워집니다. 이는 상위 클래스의 생성자를 호출하며 super()의 매개변수를 통해 상위 클래스의 멤버를 상속받을 수 있는 코드
상속받을 때 만약 휴먼 아래 만선을 받는 다고 칠 때 휴먼에 이름, 나이가 있고 만선에 취미를 추가하려면
class manseon extends human{
  constructor(name, age, interests){ // 다 씀
    super(name, age) // 상위에서 상속 받은거 씀
    this.interests = interests
  }
}

새로 안것

배열 선언을 new Array('a','b') 이렇게 할 수도 있음