클래스 생성자 함수

이재영·2023년 4월 4일
0

HTML CSS JS

목록 보기
16/22
클래스 생성자 함수에는 construtor 가 있다
class student{
 
    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,10,"서울");
console.log(st.getInfo()); 
//나이는 : 30살임 핸드폰 번호는 10 사는곳은 서울 라고 출력된다.

class Character{
    constructor(hp,mp,atk){
        this.hp = hp;
        this.mp = mp;
        this.atk = atk;

    }
    getstate(){
        return this.hp + this.mp + this.atk
    }
    // 정적 메소드 : 일반적으로 공용함수를 만들기 위해 사용
    // 인스턴스 호출이 아닌 클래스로 호출
    
    // static 메소드는 클래스를 동적할당 할때마다 생성되지 않는다.
    // 1개만 있다.
    // 인스턴스를 생성할 때 더 생성되지 않는다.
    static getAtk(n){
        return n.atk;
    }

}

let ca = new Character(100,101,102);
console.log(ca);

// 이렇게 생성한 인스턴스에서 호출하면 안됨
// console.log(ca.getAtk(1)); 

console.log(Character.getAtk(ca));

클래스의 get, set
class Product{
    constructor(name,price){ 

        this.name = name;
        this.price = price;

    }
    //get : 값을 가져올때 네이밍
    //set : 값을 수정할때 네이밍
    //클래스의 값을 가져오거나 설정할때 getter, setter를 제공해준다.
    //클래스의 값에 접근할 때 직접 변수에 접근하는 형태가 아닌
    //get과 set을 통한 접근방법
    //내부구조를 캡슐화 하는데 좋다.
    //전역적으로 데이터가 사용되지 않게 위험성을 방지해준다.
    //객체지향 캡슐화
    
    get getName(){
        return "제품이름: " + this.name;
    }

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

let pr = new Product("갤럭시 노트", 1000000);

console.log(pr); // {name: '갤럭시 노트', price: 1000000} 출력된다.

console.log(pr.getName); // 제품이름: 갤럭시 노트 출력된다.

pr.setPrice = 2000; 
console.log(pr); // {name: '갤럭시 노트', price: 2000} 출력된다.

프로토타입 메소드를 백틱으로 사용
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(); // 이름은 : 아무개 나이는 : 30 입니다. 출력된다.
클래스의 상속

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

class Child extends Mother{

    //비워놓으면 constructor 자동으로 생성된다.
}

let temp2 = new Child('나는 자식',30);

temp2.getInfo();// 이름은 : 나는 자식 나이는 30 입니다. 출력된다.

자식 함수 오버라이딩(재정의)
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("야옹")
    }
    stop(){
        //재정의 했음
        //부모의 stop을 실행 -> 재정의해서 사용할수 있는데
        // 상속받은 부모의 클래스 키워드로 부모의 함수를 실행시킬 수 있다.
        // 상속받은 부모의 클래스 키워드는 super
        super.stop();
        this.speak();// 

    }
}
let cat = new Cat("때껄룩");
cat.run(10); //때껄룩은 10로 달리는중 나는 자식의 오버라이딩 함수임 출력된다.
cat.stop();// 때껄룩이 멈춤	
		   // 야옹 이 출력된다.

이렇게 정의하면 안된다.
// 이렇게 하면 안된다.
// 생성자 함수를 밑에 처럼 정의하면 안된다.
// 상속받은 클래스는 반드시 부모 클래스를 호출해서 사용하자.
// 일반적인 함수는  new 키워드를 함께 사용하면 빈객체가 만들어 지는데 this라는
// 키워드에 객체를 참조 시킨다.
// 상속 클래스는 Man 생성자 함수가 실행되면 일반함수에서 일어나는 일이 발생하지 않는다.
// this는 객체를 할당하는 일을 부모 클래스의 생성자가 처리해주길 바람.
class Human{
    constructor(name, age){
        this.name = name;
        this.age = age;
    }
}

class Man extends Human{
    constructor(name,age){
        super(name,age);
        this.name = name;
        this.age = age;
    }
}

let ma = new Man("ㅎㅎ" ,30);
console.log(ma);
profile
한걸음씩

0개의 댓글