JS 고급-(7) Class

김수민·2022년 12월 1일
0

JavaScript

목록 보기
19/27

Class

객체 지향 프로그래밍에서 특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀
객체를 정의하기 위한 상태(멤버 변수)와 메소드(함수)로 구성된다.

//클래스 생성
class Student{
  //생성자
  constructor(name,score1,score2){
    this.name=name;
    this.score1=score1;
    this.score2=score2;
  }
  //함수 메소드
  sayHi(){
    console.log(this.name);
  }
}

//클래스 사용
let stu1= new Student("Green",60,80);
let stu2= new Student("Blue",70,50);

class 상속

정의된 class를 상속받아 새로운 class를 생성한다.
상속받은 부모에 해당하는 클래스에 정의된 변수, 함수등을 모두 상속받아 사용할 수 있다.

class 부모클래스 extends 클래스명{}

class Rectangle extends Person{
  //메소드의 재정의(오버라이딩) : 필요한 함수만 재정의한다.
  //Person 함수로부터 상속(extends)받았다.
	speak(){
    	console.log(`${this.name}:${this.tel}`)
      //👉 이 요소(Rectangle)의 name 및 tel을 출력한다.
    }
}
const rectangle = new Rectangle("Hella",20,"010-0000-0000",true);  
//위 Rectangle에 적용될 name,age,tel,check를 입력했다.

super(부모요소 호출)

class Rectangle2 extends Person{
	constructor(name, age, tel, check){
      super(name); //👉부모요소의 호출
      this.age= age; //👉요소의 호출
    }
  //👉 상속 클래스의 생성자를 부를 때에는 반드시 super()를 호출해야한다.
}

은닉화

class Car{
  	#price; //👉price를 class 내에서만 접근 가능하게 지정했다.
      constructor(modelName, modelYear, type, price){
        this.modelName=modelName;
        this.modelYear=modelYear;
        this.type=type;
        this.price=price;
      }
      getPrice(){
        return this.price;
      }
      setPrice(price){
        this.price= price;
      }
    }

Static

		class Article{
			constructor(articleNumber) {
				this.articleNumber= articleNumber;
			}
			static printPublisher(){
				console.log(this.articleNumber);
			}
		}
		const article1= new Article(1);
		console.log(article1.articleNumber);
		// static이 붙지 않았을 경우, 함수의 요소를 호출한다.

		Article.printPublisher();
		// static이 붙었을 경우, class 명으로 호출한다.

오버라이딩

상속관계에 있는 부모 클래스에서 이미 정의된 메소드를, 자식 클래스의 메소드로 다시 재정의 하는 것

		class Shape{
			constructor(color) {
				this.color= color;
			}
			draw(){
				console.log(`${color}로 그립니다.`);
			}
		}
		class Rectangle extends Shape{
			draw(){
				console.log(`사각형을 그립니다.`);
				// 이렇듯, 자식 요소에서 메소드를 재정의 하는 것. = 오버라이딩
			}
		}
		
profile
sumin0gig

0개의 댓글