[JavaScript 강의 노트(2)] class

javascript 강의 노트 | Byte Degree [2주차]

 

클래스 (1/4)

class - ES6에 추가된 문법

 

class의 선언식 vs 표현식

 

//선언적방식
class A {}
console.log(new A());

//class 표현식을 변수에 할당
const B = class{};
console.log(new B());

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

 

 

생성자 constructor

 

//constructor 
class A {}
console.log(new A()); // A {}

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

class C
	constructor(name,age){
    	console.log('constructor',name, age);
     }
}
console.log(new C('Mark','37')); // constructor Mark 37,c{}

 

 

클래스 (2/4)

멤버 변수 - 객체의 프로퍼티

 

//멤버 변수
class A {
	constructor(name, age){
    	this.name = name;
        this.age = age;
    }
}

console.log(new A('mark',25));
//A {name: "mark", age: 25}

//런타임 주의
class A {
    	name;
        age;
}
console.log(new A('mark',25));
//A {name: "mark", age: 25}

 

 

멤버 함수

 

//멤버 함수

class A {
	//첫번째 방법
	hello1(){
       console.log('hello1', this);
    }
    //두번째 방법
	hello2 = () => {
        console.log('hello2', this);
    }
}

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

// hello1, A {hello2: ƒ} / hello2, A {hello2: ƒ}

 

 

클래스(3/4)

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"}

//set
a.name = 'heeyeon';
console.log(a); // A {_name: "heeyeon!!!"} 

//get
console.log(a.name); // heeyeon!!!@@@

 

//read only / set이 없는 경우
class A {
    _name = 'no name';

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

const a =  new A();
console.log(a); // _name:'no name'
a.name = 'heeyeon';
console.log(a.name); // _name:'no name'

 

- 세터가 없기 때문에, read only처럼 동작하게 된다

- 내부적으로만 사용할 거면 언더바 사용

 

 

static 변수, 함수 - 객체가 아니고, 클래스의 변수와 함수

- class안에 static키워드를 사용해서 static변수, static함수 설정하기

 

//static 변수, 함수
class A {
	static age = 37;
    static hello() {
     console.log(A.age);
    }
}

console.log(A, A.age)

//class A 출력
//37

//멤버변수, static변수 같이 사용

 

- 인스턴스 없이 class 호출하기

 

 

클래스(4/4)

extends 클래스의 상속

 

//상속 기본

class Parent{
  name = 'lee';
  hello(){
  	console.log('hello, 'this.name);
  }
}

class Child extends Parent{}  //extends로 부모 class 상속받기

const p = new Parent();
const c = new Child();
console.log(p,c) // 같은 출력을 보임, 멤버함수, 멤버변수 전부 접근 가능

 

 

+ 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)

//Parent {name : 'lee'}
//Child {name : 'lee', age: 37}

 

-  같은 이름으로 구현시키는 것을 오버라이드된다. 자식이 덮어씌움. 부모에 없는 내용은 추가되어 덮어짐

 

 

+ super 클래스의 상속 생성자 함수 변경, 자식이 constructor에서 뭔가 추가하고자 할때 꼭 super를 호출해야함

 

//super
class Parent{
  name;
  
  constructor(name){  //자식의 super(name)로 부모의 constructor(name) 호출
   this.name = name;  
  }
  
  hello(){
    console.log('hello, 'this.name);
  }
}

class Child extends Parent{
   age;
   
   constructor(name,age){ //부모의 name과 자식에서 추가된 age 둘다 받음
   super(name); // 부모에서 name을 받고 자식의 age가 진행될 수 있도록 super() 꼭 호출
   this.age = age;
  }
  
   hello(){
    console.log('hello', this.name, this.age);  //오버라이딩
  }
} 

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

//Parent {name : 'mark'}
//Child {name : 'mark', age: 56}

c.hello()
// hello mark 56

 

 

+static 클래스의 상속 static 상속

 

//static 상속
class Parent{
	static age 37;
}

class Child extends Parent{} 

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