Javascript

05.Javascript class 이론

프론트개미 2022. 2. 22. 18:11

01. class란?

속성(field)와 행동(method)이 종합적으로 모여있는 것.

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log(`${this.name}: hello!`);
    };
}

class라는 키워드를 이용해서 사람이라는 class를 만들고 constructor이란 생성자를 이용하여

나중에 오브젝트를 만들어 정보를 대입한다.

 

 

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log(`${this.name}: hello!`);
    };
}

const ant = new Person('ant', 27);
console.log(ant.name);
console.log(ant.age);
ant.speak();

const를 이용하여 ant라는 변수에 new Person( );이란 오브젝트를 생성해주는데, 새로운 오브젝트를 생성할 때는

new라는 키워드를 사용해준다. 이후 new Person( );라는 오브젝트에 정보를 입력해주면,

class안에 있는 field와 method에 입력한 정보가 들어가 출력이 된다.

 

 

02. extends(상속)

이미 작성된 class에 같은 값을 사용하면서 상속을 할때 사용한다.

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log(`${this.name}: hello!`);
    };
}

class User extends Person{}

이러면 User라는 class는 Person안에 있는 모든 값이 대입된다.

 

 

class Person{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
    speak(){
        console.log(`${this.name}: hello!`);
    };
}

class User extends Person{
	action(){
    	console.log(`${this.name}은 달린다.`);
    };
}

상속받은 User에만 따로 method값을 추가하고 싶다면 class User extends Person{ } 안에 입력을 해주면,

Person에는 적용이 되지 않고 User에만 적용되는 method가 생성된다.

*method가 같은 이름으로 추가를 할 경우 상위 class에 있는 정보는 기본적으로 출력이 안된다.

 이를 동시에 출력하고 싶으면 상속받은 class의 method 안에 super.method명( ); 을 입력하면 부모에 있는

 class와 상속 받은 class의 값이 동시에 출력된다.