JavaScript 클래스

es6에서 새로 추가된 문법이다.

//class
// 선언적 방식
class A {}

console.log(new A());

// class 표현식을 변수에 할당
const B = class {};

console.log(new B());

// 선언적 방식이지만 호이스팅은 일어나지 않는다.
new C();

class C {}

결과

// constructor

class A{}

console.log(new A());// 객체 생성

// B객체를 만들면 안에 있는 constructor() 가 실행됨
class B{
    constructor() {
        console.log('constructor');
    }
}

console.log(new B());

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

console.log(new C('Mark', 27));
console.log(new C());

결과

class C의 constructor의 매개변수에 값을 안넣어주면 undefined로 출력되게 된다.

 

// 멤버 변수

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

console.log(new A('Mark', 27));

// class field 는 런타임 확인

class B {
    name;
    age;
}

console.log(new B());

class C {
    name = 'no name';
    age = 0;

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

console.log(new C('Mark', 27));

결과

B는 name과 age를 초기화 해주지 않고 호출해서 undefined로 나옴

// 멤버 함수

class A {
    hello1() {
        console.log('hello1', this);
    }

    hello2 = () => {
        console.log('hello2', this);
    };
}

new A().hello1();
new A().hello2();

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

new B().hello();

결과

// 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 = 'Mark';    // setter
console.log(a);
console.log(a.name);    // getter
console.log(a._name);

//readonly

class B {
    _name = 'no name';

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

const b = new B();
console.log(b);
b.name = 'Mark'; // 클래스B안에 setter함수가 없기 때문에 name에 'Mark'가 초기화 되지 않음
console.log(b);

결과

클래스를 new()를 사용해서 객체를 생성하는게 아니라 클래스를 통해서 변수와 함수를 사용하는 방식

 

// static 변수, 함수

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

console.log(A, A.age);
A.hello();

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

console.log(B, B.age);
B.hello();
//new B().hello();

class C {
    static name = '이 클래스의 이름을 C 가 아니다.'
}

console.log(C);

결과

static name은 그 클래스의 이름을 뜻하기도 한다.

// 상속 기본

class Parent {
    name = 'Lee';

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

class Child extends Parent {

}

const p = new Parent();
const c = new Child();
console.log(p, c);

c.hello();
c.name = 'Anna';
c.hello();

결과

자식클래스는 부모클래스에서 상속받았기때문에 부모클래스에 있는 변수와 함수들을 그대로 가지고 있다.

// 변수, 함수 추가 및 오버라이딩

class Parent {
    name = 'Lee';

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

class Child extends Parent {
    age = 37;

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

const p = new Parent();
const c = new Child();

console.log(p, c);
c.hello();
c.name = 'Anna';
c.hello();

결과

// super

class Parent {
    name;

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

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

class Child extends Parent {
    age;

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

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

const p = new Parent('Mark');
const c = new Child('Mark', 27);

console.log(p,c);
c.hello();

결과

// static 상속

class Parent {
    static age = 37;
}

class Child extends Parent {}

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

결과