[포스코x코딩온] 웹개발자 입문 과정 8주차 | 클래스

1.클래스란? 

 클래스는 객체 지향 프로그래밍에서 특정 객체를 생성하기 위해

 변수와 메소드를 정의하는 일종의 틀로,

 객체를 정의하기 위한 상태(멤버 변수)와 메서드(함수)로 구성된다.

 왜 필요한가? 실무에선 사용자나 물건같이 동일한 종류의 객체를 여러 개 생성해야 하는 경우가 잦다.

 예를 들면 아래 코드와 같이 동일한 형식의 객체를 계속 생성했어야한다.

 만약 객체 안에 실수로 키값을 정의하지 않으면 다음처럼 price 값이 undefined가 된다.

let tv1 = {
  name: "aaa tv",
  price: 2000,
  size: "56inch",
};

let tv2 = {
  name: "bbb tv",
  price: 3000,
  size: "27inch",
};

let tv3 = {
  name: "ccc tv",
  size: "27inch", //price가 빠짐
};

console.log(tv1.price, tv2.price, tv3.price); //2000 3000 undefined

 

 이때 아래처럼 클래스를 정의해 놓으면 계속해서 동일한 종류의 객체를 

 별도의 추가적인 코드 생성 없이 생성 가능하다.

 일종의 붕어빵(객체) - 붕어빵틀(클래스) 관계라고 생각하면 된다.

class TV {
  constructor(name, price, size) {
    this.name = name;
    this.price = price;
    this.size = size;
  }
  getPrice() {
    return this.price + "만원";
  } //값 가져오기
  setPrice(price) {
    this.price = price;
  } //값 바꾸기  -> 'class의 캡슐화' 라고 함 // 추상화
}

const tv1 = new TV("aaa tv", 2000, "56inch"); //class로 틀을 만들어 사용가능
const tv2 = new TV("bbb tv", 3000, "27inch"); 
const tv3 = new TV("ccc tv", 2000, "27inch"); 
console.log(tv1.price, tv2.price, tv3.price); //2000 3000 2000

 

 

 가.기본 문법

  클래스는 다음과 같은 기본 문법을 사용해 만들 수 있다.

class MyClass {
  // 여러 메서드를 정의할 수 있음
  constructor() { ... }
  method1() { ... }
  method2() { ... }
  method3() { ... }
  ...
}

  구체적인 예시는 아래와 같다. 

 

  이렇게 Cat이라는 클래스를 만들고, new Cat()를 호출하면

  내부에서 정의한 메서드가 들어 있는 객체가 생성된다.

  객체의 기본 상태를 설정해주는 생성자 메서드 constructor()는 

  new에 의해 자동으로 호출되므로, 특별한 절차 없이 객체를 초기화 할 수 있다.

class Cat {
  //생성자
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  //method1
  mew() {
    console.log("야옹~");
  }
  //method2
  eat() {
    console.log("밥먹자!!");
  }
}
//선언
let navi = new Cat("나비", 1);
//메소드 이용
navi.mew();
navi.eat();

 

 나. 상속

  상속이란? 부모 클래스로부터 변수, 메소드들을 가져와서 사용하는 개념이다.

  부모 클래스의 변수, 메소드들은 자식 클래스에서 모두 사용이 가능하다.

  그러나, 자식 클래스의 변수, 메소드들은 부모 클래스에서 사용이 불가하다.

//부모 클래스 (Product)
class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
  getPrice() {
    return this.price + "만원";
  }
}

//자식 클래스 (Laptop)
//부모 클래스의 상속을 extends [부모클래스 이름]으로 표현한다.
class Laptop extends Product {
  constructor(name, price, weight) {
    //상속 받는 부모 클래스 가져옴
    //this 가 아니라 super사용
    super(name, price);
    this.weight = weight;
  }
}
let laptop = new Laptop("삼성tv", 5000, "55");
console.log(laptop.price);
//부모의 메소드도 사용 가능
console.log(laptop.getPrice());
//반대로 부모는 자식의 변수. 메소드 사용불가함
let parent = new Product("tv", 1000);
console.log(parent.weight); //undefined

  여기서 상속할 때에는 class [자식 클래스 이름] extends [부모 클래스 이름] 으로 상속을 표기한다.

 

  또한 상속받는 부모클래스의 변수를 가져올 시에는 this가 아닌

  super([부모 클래스 변수1],[부모 클래스 변수2])로 

  부모 클래스의 변수를 가져온다.

 

  마지막으로, 부모 클래스에서 자식 클래스의 변수를 가져올 때 undefined로, 사용이 불가함을 확인할 수 있다.