JS | class

김보훈·2021년 8월 26일

목록 보기

6/16

1. class 정의

class를 선언하는 것은 하나의 틀을 만드는 것과 비슷하다.

class라는 틀 안에 찍어내고 싶은 내용들의 정보들을 저장 후 new 객체를 생성하여 class 안의 내용들을 꺼내와서 여러 형태로 찍어낸다.

// 클래스 선언문
class Person {
  // constructor(생성자)
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  introduce() {
    console.log(`Hi ${this.name}`);
  }
}

const me = new Person('bohun', 25); //instance
const you = new Person('brown', 30); //instance

console.log(me.name, me.age); //bohun 25
console.log(you.name, you.age); //brown 30
me.introduce(); //Hi bohun

1-1. instance (생성된 object)

instance 는 클래스의 정의를 통해 새롭게 생성되는 object 객체 를 의미한다.

instance 는 new 연산자를 꼭 사용해야한다.

class Person { }

const a = new person()

1-2. constructor

constructor 는 인스턴스를 생성하고 클래스 필드를 초기화 하기 위한 메소드이다.

클래스 필드 란 클래스 내부의 캡슐화된 변수를 말하며,
constructor 함수에서 this에 추가한 프로퍼티를 클래스 기반 객체지향 언어에서 클래스 필드라고 한다.

class Person {
  constructor(name) {
    // this는 클래스가 생성할 인스턴스를 가리킨다.
    // name은 클래스필드 이다.
    this.name = name;
  }
  
  // 클래스 몸체
}

const a = new Person('brown')
console.log(a) // Person {name: 'brown'}

특징

constructor 는 클래스 내에 한 개만 존재 해야한다.
인스턴스에서 new 연산자와 같이 호출한 것은 constructor 이며 constructor 파라미터는 클래스필드에 할당된다.
클래스 몸체에는 메소드만 선언할 수 있다.

2. getter , setter

getter , setter 가 필요한 이유는

사용자 누구나 값을 바꿀 수 없도록 캡슐화 하여 정보를 숨겨야 하는 역할과

객체로써 말이 되지 않는 값을 넣었을 때 사전에 알려 미리 방지 할 수 있도록

정보를 보호 할 수 있는 역할을 할 수 있도록 하는 것이 getter , setter 이다.

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }
}

const a = new User('bohun', 'kim', -1);
console.log(object);

const a = new User('bohun', 'kim', -1); 부분에서 사람의 나이 부분의 매개변수를 -1 로 지정했을 경우를 가정했을 때 사람의 나이가 -1 은 말이 되지 않는다.

이 때 getter , setter 를 이용하여 수정을 거쳐 출력할 수 있는데

수정하면 이러하다.

class User {
  constructor(firstName, lastName, age) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.age = age;
  }

  //값을 리턴
  get age() {
    return this._age;
  }

  //값을 설정
  set age(value) {
    if (value < 0) {
      throw Error('age can not be negative');
    }
    this._age = value;
  }
}

const a = new User('bohun', 'kim', -1);
console.log(a.age); //main.js:16 Uncaught Error: age can not be negative

get 을 이용하여 값을 받아 set 으로 넘긴 후 안에서 값을 설정한다.

개발자가 set 에서 미리 조건을 넣어 생성된 인스턴스에서 말이 안되는 값을 넣으려고 할 때 막을 수 있도록 해줄 수 있다.

이렇게 되면 사용자는 나이의 값만 바꿀 수 있을 뿐 옳지 않은 값을 넣을 수 있는 경우는 없게 된다.

3. 상속과 다양성

3-1. extends

extends 는 부모클래스를 상속받는 자식클래스를 정의할 때 사용한다.

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

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

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

//부모클래스에서 상속받은 자식 클래스 Rectangle
class Rectangle extends Shape {}

//새로 인스턴스시킨 자식클래스 Rectangle
const rectangle = new Rectangle(20, 20, 'blue');
rectangle.draw(); //drawing blue color!
console.log(rectangle.getArea()); //400

class Rectangle extends Shape {} 에서 부모클래스 Shape 를 상속받아 새로 인스턴스를 만들어 매개변수를 입력하면 Shape 와 동일하게 사용 가능하다.

3-2. 오버라이딩 (overriding)

overriding 은 부모 클래스에 있던 기존의 함수를 상속받은 자식 클래스 안에 재정의하여 사용할 수 있는 방식이다.

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

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

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

//부모클래스에서 상속받은 자식 클래스 Triangle
class Triangle extends Shape {
  getArea() {
    return (this.width * this.height) / 2;
  } // overriding : 필요한 함수만 재정의하여 사용할 수 있다.
}

const triangle = new Triangle(20, 20, 'red');
triangle.draw(); //drawing red color!
console.log(triangle.getArea()); //200

상속받은 Triangle 안에 부모클래스 Shape 의 필요한 함수를 가져와 새로 정의하여 계산에 사용한 모습니다.

3-3. super

super 키워드는 부모클래스를 호출하고 싶을 때 사용한다.

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

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

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

//부모클래스에서 상속받은 자식 클래스 Rectangle
class Triangle extends Shape {
  draw() {
    super.draw(); //drawing red color!
    console.log('🇨🇷'); //🇨🇷
  }
}

const triangle = new Triangle(20, 20, 'red');
triangle.draw();