[JavaScript] Class

1. class

자바스크립트는 프로토타입 기반 객체지향 언어이다.

class는 0개 이상의 메서드만(생성자, 프로토타입 메서드, 정적메서드) 정의할 수 있다.

class CStudent{
     //생성자
    constructor(age, phone, city){
        this.age = age;
        this.phone = phone;
        this.city = city;
    }
    getInfo(){
        return "나이는 : " + this.age + "살, " + "핸드폰 번호는 " + this.phone + "사는곳은 : " + this.city + "입니다."
    }
}

let st = new CStudent(10,10,"서울시 강남구")
console.log(st);	//CStudent {10,10,"서울시 강남구"}
console.log(st.getInfo());	//나이는 10살, 핸드폰번호는 10 사는곳은 : 서울시 강남구
console.log(st.age);	//10

[1] getter, setter

클래스는 프로퍼티의 값을 가져오거나 값을 설정하기 위해 getter, setter를 제공한다.

클래스 필드에 접근할때 직접 변수에 접근하는 형태가 아닌 get,set을 통해 접근하는 방법이다.

외부에 값을 전달하거나 외부로부터 가지고 올때 추가적인 조작이 가능하고 내부구조를 캡슐화 하는데도 유리하다.

class Product {
    constructor(name,price){
        this.name = name;
        this.price = price;

    }
    get getName(){
        return "제품명 : " + this.name;
    }
    set setPrice(price){
        this.price = price;
    }
}

let Pr = new Product("아이폰 14 언제 출시함?" , 100000);
console.log(Pr);
console.log(Pr.getName);
Pr.setPrice = 2000;
console.log(Pr);

 

 

접근제한자 : private, public, protected

자바스크립트에서는 기본적으로 public으로 모든걸 접근할수 있다.

private : 나만 접근 가능, 외부에선 접근 불가

 

[2] 상속

extends : 키워드를 사용해서 상속 받을수 있다.

자식 클래스가 부모 클래스를 상속받아 자식클래스에서 부모클래스의 기능을 물려받아서 사용할 수 있다.

기존에 존재하던 기능을 토대로 새로운 기능을 확장시켜 만들수 있다.

 

class Animal{
    constructor(name){
        this.name = name;
        this.speed = 0;
    }
    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(5);
ani.stop();

class Cat extends Animal{
    
    //constructor가 없는 경우 비어있는 생성자가 만들어진다.

    //run함수가 없으면 Animal의 상속받은 run함수를 실행시킨다.
    //함수 오버라이딩 : 부모의 함수를 받아서 재정의 해서 사용, 상속관계에서는 공식적으로 지원함.
    run(speed){
        this.speed = speed;
        console.log(this.name+"은 " + this.speed + "로 달린다", "나는 자식")
    }

    speak(){
        console.log("야옹야옹");
    }

    stop(){
        this.speak();  //부모의 stop을 실행 ->재정의 해서 사용할수도 있지만
                        //super(상속받은 부모클래스 키워드)를 이용해 부모함수를 실행할수 있다.
    }
}

let cat = new Cat("고양이");
cat.run(2);

super : 생성자에서는 super 키워드 하나만 사용되거나 this 키워드가 사용되기 전에 호출되어야 한다.

상속을 받는 클래스에서는 반드시 부모클래스를 호출해야 하는데 super를 사용하여 호출한다.

일반적인 함수에서는 new 키워드와 함께 실행되면 빈 객체가 만들어지고 this 키워드에 이 객체를 할당한다.

반면 상속클래스의 생성자 함수가 실행되면 일반적인 함수에서 일어나는 일이 일어나지 않는다.

왜냐하면 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;
    }
}

[3] window 와 this

window는 최상위 객체이다 : 다 가지고 있음

this : c++에서는 멤버함수고 속한 클래스를 가르키는 포인터,

JS에서의 this는 실행 컨텍스트가 생성될때 결정이 되고 실행 컨텍스트는 함수를 호출할 때 생성되므로 this는 함수가 호출될때 결정된다.

function f(){
    if(window===this){
        console.log("윈도우는 this");
    }
}
f();

var student = {
    name : "hong",
    st: function(){
        console.log(this);
    },
};
student.st();

var s = student.st;
s();

//전역공간에 있으므로 실행주체는 window객체가 되기 때문에
//아래의 this는 전역객체인 window가 나오게 된다.

[4] 상속 응용

조건 

1.부모클래스(Monster)를 만든다.
2. 부모클래스를 상속을 받는다.
3. 하위 클래스 (Boss등등..) 만든다.
4. 부모클래스는 공격, 방어 기타 걸어가기 등등 가지고 있고
5. 하위클래스는 위에 해당하는 기능을 재정의한다.

//보스 방어력은 기본 방어력
class Monster{
    constructor(attack, defense, walk, stats){
        this.attack = attack;
        this.defense = defense;
        this.walk = walk;
        this.stats = stats;
    }

    getInfo(){
        return console.log("공격력 : "+ this.attack + " 방어력 : " + this.defense+" 걸음걸이 : " + this.walk + " 상태 : " + this.stats)

    }
}

let bossStat = new Monster (50,50,50, "normal")

//기본스탯이 있고 보스에 스탯변경 기능
class Boss extends Monster{
    constructor(attack,defense, walk, stats){
        let len = arguments.length;
        super(attack,defense, walk, stats);
        if(len == 0){
            this.attack = bossStat.attack;
            this.defense = bossStat.defense;
            this.walk = bossStat.walk;
            this.stats = bossStat.stats;
        }
        else if (len == 1){
            this.attack = attack;
            this.defense = bossStat.defense;
            this.walk = bossStat.walk;
            this.stats = bossStat.stats;
        }
        else if(len ==2 ){
            this.attack = attack;
            this.defense = defense;
            this.walk = bossStat.walk;
            this.stats = bossStat.stats;
        }
        else if (len ==3){
            this.attack = attack;
            this.defense = defense;
            this.walk = walk;
            this.stats = bossStat.stats;
        }
        else{
            this.attack = attack;
            this.defense = defense;
            this.walk = walk;
            this.stats = stats;
        }
	
    //stats가 up상태이면 공격력 5배까지 랜덤증가, 방어력, 걸음걸이 2배 증가
    if (stats == "up"){
        this.attack = Math.floor(this.attack*(Math.random()*5+1))
        this.defense = this.defense*2
        this.walk = this.walk*2
        this.stats = stats
    }
    }
}


let bossNum1 = new Boss
bossNum1.getInfo();  // 공격력 : 50 방어력 : 50 걸음걸이 : 50 상태 : normal

let bossNum2 = new Boss(30,70, 35, "up");
bossNum2.getInfo(); // 공격력 30~150 랜덤 방어력 : 140 걸음걸이 : 70 상태 : up

let bossNum3 = new Boss(20);
bossNum3.getInfo(); //공격력 : 20 방어력 : 50 걸음걸이 : 50 상태 : normal

 

2. html

html : 버튼 만들어서 JavaScript 와 연결하기

<h1>제목</h1>
<button id = "btn">hihi </button>
<script src="jsfilename.js">
    const btn = document.getElementById("btn");

    var student = {
    name : "hong",
    st: function(){
    console.log(this);
    },
    };

    btn.addEventListener("click", student.st);
</script>

 

디스터럭처링 할당(구조분해할당)

구조화된 배열과 같은 이터러블 또는 객체를 1개이상의 변수에 개별적으로 할당하는것

배열 구조분해할당의 기본은 배열의 인덱스다.

const arr = [1,2,3];
const [one, two, three] = arr;
console.log(one,two,three);  //1 2 3

const [a,b] = [1,2];
console.log(a,b)  // 1 2

const [d,e] = [1,2,3];
console.log(d,e); // 1 2 3 


const [apple, banana, potato = 3] = [1,2];
console.log(apple,banana, potato); // 1 2 3

const user = {firstName : "hong", lastName : "soon"};
const{ lastName, firstName} = user;
console.log(firstName,lastName); // hong soon

[1] id, onclick 활용

 

버튼을 누르면 1씩 더하기 빼기 되는 것을 구현하기

 

html

<p><h1 id = numberCal>0</h1></p>
<button id  = "plus">더하기</button>
<button id = "minus">빼기</button>


<script src="07.homework.js"></script>

JavaScript

const numberCal = document.getElementById("numberCal")


const plus = document.getElementById("plus")
plus.addEventListener("click",function(){
    numberCal.innerText = Number(numberCal.innerText) + 1;
})

const minus = document.getElementById("minus")
minus.addEventListener("click", function(){
    numberCal.innerText = Number(numberCal.innerHTML) - 1;
})

 

결과