2023.03.31 class 개념

이무헌·2023년 7월 19일
0

html,css,js

목록 보기
19/21
post-thumbnail

Class

//Class ES 6부터 지원했고
//class를 사용하면 상속을 지원한다.
//코드의 재사용을 더 높일수 있다...

// 클래스의 생성자 함수
class student {
  // 클래스의 생성자 함수 constructor가 있다.
  //constructor()생성자 함수를 작성안하면 constructor()
  // 빈 생성자 함수가 자동으로 생긴다.
  constructor(age, phone, city) {
    this.age = age;
    this.phone = phone;
    this.city = city;
  }
  getInfo() {
    return (
      "나이는:" +
      this.age +
      ",폰번호는:" +
      this.phone +
      ",사는곳은:" +
      this.city +
      "이다"
    );
  }
}

let st = new student(30, 30, "seoul");
console.log(st.getInfo());//나이는:30,폰번호는:30,사는곳은:seoul이다
  • java와 다른 객체지향 언어에서 많이 사용한 class이다. 사실 리액트에서 함수지향을 사용했기 때문에
    js에서 class는 사용해본적이 별로없다
  • 생성자를 이용해 this로 객체를 생성할시 해당 변수에 할당되도록 한다.
class Character {
  constructor(hp, mp, atk) {
    this.hp = hp;
    this.mp = mp;
    this.atk = atk;
  }
  getState() {
    return this.hp + this.mp + this.atk;
  }
  //정적 메소드:일반적으로 공용함수를 마들기위해 사용.
  //클래스의 인스턴스에서 호출x
  //   static 메소드는 클래스를 동적할당 할 때마다 생성되지않는다.
  // 한개만 있음
  //   인스턴스를 생성할 때 더 생성되지 않는다.
  static getAtk(n) {
    return n.atk;
  }
}

let ca = new Character(100, 100, 100);
console.log(ca);
// 생성한 클래스의 instance가 아닌 클래스 자체에서 호출
console.log(Character.getAtk(ca));
  • static으로 전역 함수를 만들면 java와 마찬가지로 class에서 직접 호출이 가능하다.
  • 공용함수를 만들 때 매우 유용하다!
  • js에서도 이게 되네 ㄷㄷ
class Product {
  constructor(name, price) {
    //생성자 함수 만들고 시작하자
    this.name = name;
    this.price = price;
  }
  //getter,setter
  //   get:값을 호출할 때 네이밍
  //   set:값을 수정할 때 네이밍
  //   클래스의 값을 가져오거나 설정할 때 getter와 setter를 제공해준다.
  //   클래스의 값을 접근할 때 직접 변수에 접근하는 형태가 아닌 get과 set을 통한 접근방법
  //     내부구조를 캡슐화 시키는게 좋다.
  //   전역적으로 데이터가 사용되지 않게 위험성을 방지해준다.
  //   객체지향
  get getName() {
    return "production" + this.name;
  }

  set setPrice(price) {
    this.price = price;
  }
}

let pr = new Product("갤럭시 노트", 1000000);
console.log(pr);
// getter를 확인해보자
console.log(pr.getName);
// setter를 사용해보자
pr.setPrice=2000;
console.log(pr);
  • 왜! 인텔리제이에선 getter setter자동으로 해주는데! vsc엔 없어!
  • get,set 선언자를 붙임으로서 getter,setter를 만들 수 있다.
  • setPrice에서 매개변수를 안에 파라미터로 전달하는 방식이 아닌 일반 오브젝트 객체를 바꾸는 식으로 바꾼다.
  • 마찬가지로 getName도 함수형식인 getName()이 아니다
class Mother {
  constructor(name, age) {
    //생성자 함수
    this.name = name;
    this.age = age;
  }
  getInfo() {
    return console.log(`내 이름은:${this.name} 나이는:${this.age}입니다.`);
  }
}
let temp = new Mother("아무개", 30);
temp.getInfo();

//클래스의 상속 자식클래스가 부모클래스를 상속받아서 부모 클래스의 기능을
// 사용 할 수 있다.
// 클래스를 사용하는 이유
//extends 키워드를 사용해서 클래스를 상속 시킬 수 있다.

//부모클래스의 기능을 상속 받아서 사용 할 수 있다.
class Child extends Mother {
  // 비워놓자
  //비워놓으면 자동으로 생성자가 만들어진다 했음
  //생성자 자동 생성
}

let temp2 = new Child("나는 자식 ", 30);
temp2.getInfo();
  • 상속이다.
  • java와 마찬가지로 extends를 쓴다. 또한 함수를 공유하는것도 똑같다.
class Animal {
  //동물이라는 클래스
  constructor(name) {
    this.name = name; //초기화
    this.speed = 0;
    this.age = 20;
  }
  run(speed) {
    this.speed += speed;
    console.log(`${this.name}${this.speed}로 달리는중 나는 부모의 함수임`);
  }
  stop() {
    this.speed = 0;
    console.log(`${this.name}이 멈춤`);
  }
}

let ani = new Animal("동물");
ani.run(10);//동물은 10로 달리는중 나는 부모의 함수임
ani.stop(); //동물이 멈춤

class Cat extends Animal {
  //부모의 함수를 받아서 오버라이딩
  //함수를 받아서 기능을 재정의 할 수 있다.
  // run이라는 함수가 없으면 부모에서 상속받은 run 함수를 실행하고
  // run이라는 함수가 재정의 되면 재정의된 함수를 사용할 수 있다.(함수 오버라이딩)
  run(speed) {
    this.speed = speed;
    console.log(
      `${this.name}${this.speed}로 달리는 중 나는 자식의 오버라이딩 함수임`
    );
  }
  speak() {
    console.log("take a look");
  }
  stop() {
    //부모의 stop을 실행 재정의해서 사용할 수는 있는데
    // 상속받은 부모의 클래스 키워드로 부모위 함수를 실행 시킬 수 있다.
    //상속받은 부모의 클래스 키워드는 super
    super.stop();
    this.speak();
  }
}

let cat = new Cat("떼껄룩");
cat.run(10); //떼껄룩은 10로 달리는 중 나는 자식의 오버라이딩 함수임
cat.stop();//떼껄룩이 멈춤
  • 상속을 받을 당시 overriding을 이용해 부모함수를 변경할 수 있다.
  • 또한 super()를 사용하여 부모의 함수를 호출할 수 있다.
class Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
class Man extends Human {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

let ma= new Man('gg',30);
console.log(ma)
  • 당연한 말이지만 자식이 이중으로 생성자를 생성하면 안된다!
profile
개발당시에 직면한 이슈를 정리하는 곳

0개의 댓글