🤿 (11) 자바스크립트 - class

출처: mdn - classes
class는 객체를 생성하기 위한 템플릿이다.

개요

class는 "특별한 함수"
함수를 함수표현식과 함수 선언으로 정의할 수 있듯, class 표현식과 class 선언 두가지 방법으로 정의할 수 있다.

클래스는 호이스팅 될 때 초기화되지 않기 때문에 선언 전 호출할 경우 에러가 발생한다.

let avante = new Car('hyundai', 'avante', 'black'); // Reference Error

class Car {
	//
}

class 선언

class 키워드 + 주로 대문자로 시작하는 클래스를 정의할 단어

class Car {
  	// 속성 정의
	constructor(brand, name, color) {
    	this.brand = brand;
      	this.name = name;
      	this.color = color;
    }
  
  	// 메서드 정의
  	drive() {
    	//
    }
}

class표현식

let Car = class {
	// unnamed class
}

console.log(Car.name);
// 출력: "Car"

let Car = class Carr {
	// named
}

console.log(Car.name);
// 출력: "Carr"

클래스 본문과 메서드 정의

클래스 본문(Class body)은 다음 코드처럼 중괄호로 묶여 있는 안쪽 부분이다.

class Car {
	//
}

기본 규칙

클래스 본문은 Strict mode에서 실행된다.

contructor

class로 생성된 객세를 생성하고 초기화하기 위한 특수한 메서드

• 클래스 안에 한 개만 존재할 수 있음
• 부모 클래스에 접근하기 위해 super 키워드를 사용할 수 있음

class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  // Getter
  get area() {
    return this.calcArea();
  }
  // 메서드
  calcArea() {
    return this.height * this.width;
  }
}

const square = new Rectangle(10, 10);

console.log(square.area); // 100

this 바인딩

클래스 본문은 Strict mode에서 실행되기 때문에 this 바인딩도 Strict mode를 따른다. (전역객체를 참조하지 않음)

class Animal {
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // the Animal object

// call, apply, bind를 사용하여 해결할 수 있음
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

정적(static) 메서드와 속성

static 키워드를 사용하면 클래스의 인스턴스에서는 호출할 수 없다.
정적 메서드는 주로 유틸리티 함수를 생성하는데 사용하며, 정적 속성은 복제할 필요가 없는 기타 데이터에 유용하다.

class Car {
	constructor(brand, name, color) {
    	this.brand = brand;
      	this.name = name;
      	this.color = color;
    }
  	
  	// 정적 속성 정의
  	static privateValue = "privateValue";
  
  	// 정적 메서드 정의
  	static selfRepair() {
    	//
    }
}

let avante = new Car('hyundai', 'avante', 'black');

console.log(avante.privateValue) // undefined
console.log(avante.selfRepair()) // undefined
console.log(Car.privateValue); // privateValue

인스턴스 속성과 정적 속성 정의

인스턴스 속성은 반드시 클래스 메서드 내에 정의되어야 하며,
정적(클래스 사이드) 속성과 프로토타입 데이터 속성은 반드시 클래스 선언부 바깥쪽에 정의되어야 합니다.

Public fields와 Instance fields

출처: velog - Class Public & Private field MDN 내용 정리
Public fields

• Public static field
  • static 키워드를 사용하여 선언한 변수 또는 메서드
    static name = 'name is only value'
  • 클래스마다 고정된 단 한개의 필드가 존재하기를 원할 때 주로 사용
  • 클래스의 인스턴스에서는 접근 불가
  • 자식 클래스에서는 접근 가능
• Public instance field
  • 클래스 본문 내 키워드를 생성하지 않은 채 정의
  • 클래스의 인스턴스에서 접근 가능
  • 자식 클래스에서 접근 가능

Private fields

• Private static field
  • private static 키워드를 사용하여 선언한 변수 또는 메서드
    private static age = 0
  • 클래스가 선언된 내부의 생성자에서 접근이 가능
  • 클래스가 선언된 내부의 메서드에서 접근이 가능
  • 클래스의 인스턴스에서 접근 불가
  • 자식 클래스에서 접근 불가
• Private instance field
  • 내부 생성자에서 this로 접근이 가능
  • 내부 메서드에서 this로 접근이 가능
  • 클래스의 인스턴스에서 접근이 불가능하도록 캡슐화가 됨

은닉화(private 키워드)의 한계

클래스 내부에서만 사용하기 위한 속성과 메서드를 private 키워드를 통해 구현할 수 있지만 지원하는 브라우저가 적어 많이 쓰이지 않음

extends & super를 통한 상위 클래스 호출

클래스 상속

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

// extends 상속
class Dog extends Animal {
  constructor(name) {
    // super class 생성자를 호출하여 name 매개변수 전달
    super(name);
  }

  speak() {
    console.log(`${this.name} barks.`);
  }
}

let d = new Dog('Mitzie');
d.speak(); // Mitzie barks.

클래스는 재정의될 수 없다.