[JavaScript] 4. 클래스

 

1. 클래스

class는 자바스크립트에 최근에 생겼다. ES6때 생겼다.

그럼 그전에는 어떻게 썼을까? 

 

class 생기기 전에는 class를 정의하지 않고, 바로 object(객체)를 만들었다.

 

class person {


        name; //속성
        age; //속성
        
        speak(); //행동(method)

    }
        

사람이라는 틀 속에 이름과 나이가 있다 거기에 행동(메소드)을 추가 그것이 class다.

속성만 있는 클래스로도 만들 수 있다. 

즉, 클래스는 실제로 사물,물체들을 클래스로 만든 것이다.

하지만 클래스는 정의만 내리지 데이터는 없다. 그 데이터를 object이다.

 

붕어빵으로 예를 들면

 

class는 붕어빵 틀

object(객체)는 붕어빵안에 넣을 재료들 팥,피자,녹차(?) 따라 팥붕어빵,피자붕어빵이 되는 것이다.

 

 

class	object
class는 object(인스턴스)를 만들 수 있는 틀	class를 이용해서 data를 넣어서 만드는 것이 object
class 자체에는 data가 들어 있지 않다	class를 이용해서 새로운 instance를 생성하면 그게 바로 object가 되는 것
틀을 정의해서 한번만 선언	object는 class를 이용해서 무수히 많이 만들 수 있다
class는 정의만 한 것이라서 실재 메모리에 올라가지 않음	class는 이용해 만든 object는 실재 메모리에 올라간다

 

 

• Class 선언과 Object 생성

 

class Person {
  // constructor
  constructor(name, age) {
    // fields
    this.name = name;
    this.age = age;
  }

  // methods
  speak() {
    console.log(`${this.name}: hello!`);
  }
}

const ellie = new Person(`ellie`, 20); // 인스턴스(object) 생성
console.log(ellie, typeof ellie); // > Person {name: "ellie", age: 20} "object"
console.log(ellie.name); // > ellie
console.log(ellie.age); // > 20
ellie.speak(); // > ellie: hello!

 

• Getter & Setter

 

class User {
	// 생성자 필드
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

	// getter
  get age() {
    return this._age;
  }

	// setter
  set age(value) {
    // if (value < 0) {
    //   throw Error(`-1은 안됩니다..`);
    // }
    this._age = value < 0 ? 0 : value; // 생성자 필드명 앞에 _ 를 붙이는게 관습
  }
}
const user1 = new User(`Steve`, `job`, -10); // set
console.log(user1.age); // get

//get을 이용해서 리턴 할 수 있고, set을 이용해서 값을 설정 할 수 있다.

 

 

• 상속(Inheritance)

1. 부모 class에 있는 모든 것들이 자식 class에 포함이 됨.
2. 공통되어지는 값들을 extends 키워드로 재사용 할 수 있다
3. 부모 class의 값을 변경하면 자식(상속 받은) class의 값들도 자동으로 변경됨

 

• 다형성(Polymorphism)

1. 필요한 메서드를 재정 해서 사용 할 수 있다.(오버라이딩)
2. 오버라이딩 한 상태에서 부모 class의 메서드를 사용하고 싶으면 super 키워드를 사용 하면 된다.

 

// 부모 class
class Shape {
  constructor(width, height, color) {
    this.width = width;
    this.height = height;
    this.color = color;
  }

  draw() {
    console.log(`drawing ${this.color} color of`);
  }

  getArea() {
    return this.width * this.height;
  }
}

class Rectangle extends Shape {}
class Triangle extends Shape {
  draw() {
    super.draw(); // 오버라이딩 해도 부모 class 메소드 호출 가능
    console.log(`📐`);
  }

	// 오버라이딩(다형성)
  getArea() {
    return (this.width * this.height) / 2;
  }
}

const rectangle = new Rectangle(20, 20, `blue`);
rectangle.draw();
console.log(rectangle.getArea());

const triangle = new Triangle(20, 20, `red`);
triangle.draw();
console.log(triangle.getArea());