Class는 객체를 만들 수 있는 새로운 방법
es6 class
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
class
- 선언적 방식
class A {}
console.log(new A());A {}
- class 표현식을 변수에 할당
const B = class {};
console.log(new B());B {}
- 선언적 방식이지만 호이스팅은 일어나지 않는다.
new C();
class C {}ReferenceError: Cannot access 'C' before initialization
function은 호이스팅이 일어나서 실행이 될 수 있지만 class는 안된다.
생성자 constructor
생성자(new)를 이용하여 초기값을 객체 안에 넣어 준다.
class A {}
console.log(new A());
class B {
constructor() {
console.log('constructor');
}
}
console.log(new B());A {}
constructor
B {}
초기값을 설정하지 않은 상태이다.
class C {
constructor(name, age) {
console.log('constructor', name, age);
}
}
console.log(new C('Mark', 37));
console.log(new C());constructor Mark 37
C {}
constructor undefined undefined
C {}
초기값을 넣은것과 넣지 않은 것 비교.
멤버 변수
객체의 프로퍼티 property(속성)
- 멤버 변수
class A {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
console.log(new A('Mark', 37));
A { name: 'Mark', age: 37 }
class A를 통해 만들어진 객체는 name과 age의 프로퍼티에 이름과 나이가 들어온다.
- class field는 런타임 확인
크롬 버전 72이상, node.js 버전 12 이상부터 가능(확인필요)
class H {
name;
age;
}
console.log(new H());H { name: undefined, age: undefined }
this.생략 가능, 그러나 비교적 최신 런타임에서만 가능하다.
class I {
name = 'no name';
age = 0;
constructor(name, age) {
this.name = name;
this.age = age;
}
}
console.log(new I('Mark', 37));I { name: 'Mark', age: 37 }
name = 'no name', age = 0은 초기값
- 멤버 함수
class J {
hello1() {
console.log('hello1', this);
}
hello2 = () => {
console.log('hello2', this);
}
}
new J().hello1();
new J().hello2();hello1 J { hello2: [Function: hello2] }
hello2 J { hello2: [Function: hello2] }
class K {
name = 'Mark';
hello() {
console.log('hello', this.name);
}
}
new K().hello();hello Mark
get, set
- 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'; // a.name에 'Mark'가 set 됨
console.log(a);
console.log(a.name); // a.name은 get 함수를 호출
console.log(a._name); //set 함수 실행A { _name: 'no name' }
A { _name: 'Mark!!!' }
Mark!!!@@@
Mark!!!
내부적으로 접근할 때 _(underbar)를 일반적으로 쓴다.
get, set은 외부에서 접근할 수 있는 퍼블릭한 접근 제어자
- read only
class B {
_name = 'no name';
get name() {
return this._name + '@@@';
}
}
const b = new B();
console.log(b)
b.name = 'Mark';
console.log(b)B { _name: 'no name' }
B { _name: 'no name' }
static 변수, 함수
객체가 아니고, 클래스의 변수와 함수
class C {
static age = 37; //클래스의 변수
static hello() { //클래스의 함수
console.log(C.age);
}
}
console.log(C);
console.log(C, C.age);
C.hello();[class C] { age: 37 }
[class C] { age: 37 } 37
37
class D {
age = 37;
static hello() {
console.log(this.age);
}
}
console.log(D, D.age);
D.hello();
new D().hello();[class D] undefined
undefined
TypeError: (intermediate value).hello is not a function
age가 static 변수가 아니라서 undefined
static 함수이기 때문에 new 함수는 에러 발생.
class E {
static name = '이 클래스의 이름은 E가 아니다'
}
console.log(E);[class 이 클래스의 이름은 E가 아니다] { name: '이 클래스의 이름은 E가 아니다' }
[class E]{ name: '이 클래스의 이름은 E가 아니다' } 값이 나오지 않는 이유는 static name변수가 class 이름을 뜻하기 때문이다.
extends
클래스의 상속 기본
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();Parent { name: 'Lee' } Child { name: 'Lee' }
hello Lee
hello Anna
class Child에 아무것도 없지만 Parent와 같게 출력 됨.
바뀐 변수로도 출력 가능.
override
클래스의 상속 멤버 변수 및 함수 오버라이딩, 추가
부모에게서 생성된 변수, 함수가 자식에게서 똑같이 구현 되면 덮어 씌워 짐.
부모에게 없는 경우에는 자식이 추가.
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();Parent { name: 'Lee' } Child { name: 'Lee', age: 37 }
hello Lee 37
hello Anna 37
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); //부모의 constructor 실행
this.age = age;
}
hello() {
console.log('hello', this.name, this.age);
}
}
const p = new Parent('Mark');
const c = new Child('Mark', 37);
console.log(p, c);
c.hello();Parent3 { name: 'Mark' } Child3 { name: 'Mark', age: 37 }
hello Mark 37
static 상속
클래스의 상속 static 상속
class Parent {
static age = 37;
}
class Child extends Parent {}
console.log(Parent.age, Child.age);37 37
static변수도 상속이 된다.
