[JavaScript] class 정리

Kyle·2020년 11월 5일

javascript

목록 보기

2/18

JavaScript ES6의 class

javascript class의

함수 선언과 클래스 선언의 가장 큰 차이는 호이스팅입니다.

함수의 경우 -> 호이스팅 발생 -> 호출보다 아래에 선언해도 문제 없음

클래스 -> 호이스팅 X -> 클래스를 사용하기 전에 선언해야 한다.

poiemaweb 에서는 호이스팅 된다고하고 예제를 보면 되는것같긴하다 근데 잘모르곘다.

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Class 표현식

class내부의 this 는 그 클래스 아래의 예시에서는 Person을 가르킨다.
constructor은 1번만 선언가능하다.

class Person {
  constructor(name, city) {
    this.name = name;
    this.city = city;
  }
  sayHello = (name) => console.log(`hello! ${name}`);
  printThis = () => console.log(this);
}

const kyle = new Person("kyle", " seoul");
console.log(kyle.name); //kyle
console.log(kyle.printThis()); //Person{...} undefined(printThis return없기 때문)

class body

class body는 {}로 묶인 부분
class body에서 constructor, method 과 같은 class members를 정의

class에서의 상속

class에서는 super,extends를 사용해 상속을 구현시켜 놓았다.

class에서의 상속도 prototype체이닝을 이용한 방식이다.

class Animal {
  constructor(name) {
    this.name = name;
  }
  bark() {
    console.log(`${this.name} : wall!wall!wall!`);
  }
}

class Dog extends Animal {
  constructor(name, age) {
    super(name);
    this.age = age;
  }
  bark() {
    super.bark();
  }
}

const pome = new Animal('pome');
const dungii = new Dog('dungii', 7);