04_JS_클래스

클래스

객체를 만들 수 있는 새로운 방법

 

클래스를 생성하는 방법은 다음과 같다.

class A{

}

console.log(new A());

const B = class{};

console.log(new B());
//console.log(new B); 도 가능

//new C();
//class C{}; // 에러(호스팅이 적용되지 않음.)

 

 

constructor(생성자)

 

C++에서의 생성자 개념과 똑같았다.

 

객체를 만들때 자동으로 호출되는 함수라고 생각하면 될 꺼 같다.

class A{}

console.log(new A());

class B{
    constructor(){
        console.log('constructor');
    }
}

console.log(new B());

class C{
    constructor(name,age){
        console.log('constructor',name,age);
    }
}

console.log(new C('mingyu',24));
console.log(new C());

만약 인자를 안넣어주면 undefined로 들어가게 된다.

 

 

멤버 변수

객체의 프로퍼티를 나타낸다.

 

class A{
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}

console.log(new A('mingyu',24)); //A {name: 'mingyu', age: 24}


class B{ //지원안하는 경우도 있다.
    name;
    age;
}

console.log(new B()); //B {name: undefined, age: undefined}

class C{
    name = 'no name';
    age = 0;
    constructor(name,age){
        this.name = name;
        this.age = age;
    }
}

console.log(new C('mingyu',24)); //C {name: 'mingyu', age: 24}


class D{
    name = 'no name';
    age = 0;   
}

console.log(new D()); //D {name: 'no name', age: 0}

생성자를 쓰지않아도 값을 미리 고정적으로 정해둘 수는 있다. 

 

멤버 함수

기본적인 개념은 변수와 같다, 다만 함수도 쓸수 있다고만 생각하면 될 것 같다.

 

class A{
    hello(){
        console.log('mingyu');
    };

    hello2(){
        console.log('mingyu2');
    };
}

new A().hello();
new A().hello2();

class B{
    name = 'mingyu';
    hello(){
        console.log('hello', this.name);
    }
}

new B().hello();

확실히 C++보다 엄청 깔끔한 것 같다. 헤더파일도 필요없고..

 

get, set

클래스 안의 값을 설정하거나 가져올때 쓸 수 있다.

class A{
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }

    set name(value){
        this._name = value + '!!!';
    }
}

const a = new A();

console.log(a); //A {_name: 'no name'}
a.name = 'mingyu';
console.log(a); //A {_name: 'mingyu!!!'}
console.log(a.name); //mingyu!!!@@@ //get을통해서 가져옴
console.log(a._name);//mingyu!!! //그냥 변수를 가져옴

class B{
    _name = 'no name';

    get name(){
        return this._name + '@@@';
    }
}

const b = new B();
console.log(b); //B {_name: 'no name'}
B.name = 'mingyu';
console.log(b); //B {_name: 'no name'}

헷갈리지 않게 코드를 보려면 name 과 _name은 엄연히 다른것을 인지하고 보면 될 것 같다.

 

 

static 변수,함수

객체가 아닌,클래스의 변수와 함수

class A{
    static age = 24;
    static hello(){
        console.log(A.age);
    }
}

console.log(A,A.age);
A.hello(); //24 //new로 객체선언을 하지 않아도 사용이 가능하다 

class B{
    age = 24;
    static hello() {
        console.log(this.ago);
    }
}

console.log(B,B.age);
B.hello(); //undefined
//new B().hello(); //Uncaught TypeError: (intermediate value).hello is not a function
//static이라 객체는 hello함수가 선언된 것을 모름

class C{
    static name = "나는 C클래스이다!";
}

console.log(C); //[class 나는 C클래스이다!] { name: '나는 C클래스이다!' }

C++을 배웠을때는 클래스는 설계도면이기 때문에 항상 선언을 해야 쓸 수 있다고 배웠는데, 선언을 static으로 하면 그것은 객체가 아닌 클래스의 것이 되어 오히려 객체선언을 해도 사용할 수 없고, 클래스의 것으로만 쓸 수 있는 선언 방식이라고 생각하면 될 것 같다.

 

extends(상속)

 

만든 객체를 부모,자식관계가 되어 상속할 수 있다.

 

class Parent{
    name = 'Jeong';

    hello(){
        console.log('hello',this.name);
    }
}

class Child extends Parent {}

const p = new Parent();
const c = new Child();
console.log(p,c) //Parent {name: 'Jeong'} Child {name: 'Jeong'}

c.hello(); //hello Jeong
c.name = 'mingyu';
c.hello(); //hello mingyu

Child는 아무것도 선언하지 않았지만, 부모객체에서 설정한 것들을 모두 가져다가 쓸 수 있다.

 

override

클래스의 상속 멤버 변수 및 함수 오버라이딩, 추가

 

쉽게 말하면, 자식이 만든 함수가 부모의 함수를 덮어쓰게 되는 것을 말한다.

class Parent{
    name = 'Jeong';

    hello(){
        console.log('hello',this.name);
    }
}

class Child extends Parent {
    age = 24;
    hello(){
        console.log('hello',this.name,this.age);
    }
}

const p = new Parent();
const c = new Child();
console.log(p,c); //Parent {name: 'Jeong'} Child {name: 'Jeong', age: 24}
p.hello(); //hello Jeong
c.hello(); //hello Jeong 24

hello함수가 자식에서 선언한것으로 덮어씌여진 것을 알 수 있다.

 

super

클래스의 상속 생성자 함수 변경

 

쉽게 말하면, 자식의 생성자가 부모의 생성자를 오버라이드 하기 떄문에 부모의 생성자를 호출하기 위해 사용되는 함수이다.

class Parent{
    name = 'Jeong';

    constructor(name){
        this.name = name;
    }

    hello(){
        console.log('hello',this.name);
    }
}

class Child extends Parent {
    age = 24;

    constructor(name,age){
        super(name); //부모의 생성자를 사용
        this.age = age;
    }

    hello(){
        console.log('hello',this.name,this.age);
    }
}

const p = new Parent('mingyu');
const c = new Child('mingyu_jeong',24);
console.log(p,c); //Parent {name: 'mingyu'} Child {name: 'mingyu_jeong', age: 24}
c.hello(); //hello mingyu_jeong 24

 

static

클래스의 상속 static 상속

 

같은 개념으로, 부모의 static 선언한 것도 자식으로 넘어간다!

class Parent{
    static age = 37;
}

class Child extends Parent {}

console.log(Parent.age,Child.age); //37 37

 

오히려 클래스의 개념은 C++과 크게 다른것 같지 않고, 객체자체를 선언하거나 함수들을 자유자제로 넘기고 받을 수 있다는 점이 엄청 흥미로웠다!

 

 

++근데 예전에 C++을 공부할때 분명 객체지향 언어라고 배워서 함수로 인수전달 안되는게 말이 안되는거 같아서 검색해보니까 된다고 한다.. 생각해보니까 정말 바보였던게 그동안 프로젝트 하면서 public에서 함수선언하고 쓰고 했었는데.. 그냥 너무 자연스럽게 쓰고있어서 넘긴다는 생각도 못했던것 같다 ㅋㅋㅋㅋ 바보짓이다..