Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |
Tags
- 인스턴스 생성과 this 바인딩
- 전역 코드 평가
- 인스턴스 초기화
- 클로저
- 중첩 함수
- 정적 메서드와 프로토타입 메서드의 차이
- 새로운 객체 생성 메커니즘
- 전역 코드 실행
- 함수 레벨 스코프
- 변수 중복 선언 허용
- 상위 스코프 결정
- 클래스에서 정의한 메서드의 특징
- 원시 값과 객체의 비교
- 인스턴스 반환
- 변수 호이스팅
- 일급 객체
- 정적 메서드
- Number의 정적 메서드
- 렉시컬 환경
- var 키워드로 선언한 변수의 문제점
- 외부 함수
- 상태 은닉
- 전역 변수의 문제점
- 프로토타입 메서드
- 전역 객체 생성
- 문법적 설탕
- 즉시 실행 함수
- 환경 레코드
- 전역 코드 실행 종료
- 정의 방식
Archives
- Today
- Total
YJSTAR
클래스 정의 본문
클래스는 class 키워드를 사용하여 정의한다. 클래스 이름은 생성자 함수와 마찬가지로 파스칼 케이스를 사용하는 것이 일반적이다. 파스칼 케이스를 사용하지 않아도 에러가 발생하지는 않는다.
// 클래스 선언문
class Person {}
일반적이지는 않지만 함수와 마찬가지로 표현식으로 클래스를 정의할 수도 있다. 이때 클래스는 함수와 마찬가지로 이름을 가질 수도 있고, 갖지 않을 수도 있다.
// 익명 클래스 표현식
const Person = class {};
// 기명 클래스 표현식
const Person = class MyClass {};
클래스를 표현식으로 정의할 수 있다는 것은 클래스가 값으로 사용할 수 있는 일급 객체라는 것을 의미한다. 즉, 클래스는 일급 객체로서 다음과 같은 특징을 갖는다.
- 무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성이 가능하다.
- 변수나 자료구조(객체, 배열 등)에 저장할 수 있다.
- 함수의 매개변수에게 전달할 수 있다.
- 함수의 반환값으로 사용할 수 있다.
좀 더 자세히 말하자면 클래스는 함수다. 따라서 클래스는 값처럼 사용할 수 있는 일급 객체다.
클래스 몸체에는 0개 이상의 메서드만 정의할 수 있다. 클래스 몸체에서 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드의 세 가지가 있다.
// 클래스 선언문
class Person {
// 생성자
constructor(name) {
// 인스턴스 생성 및 초기화
this.name = name; // name 프로퍼티는 public하다.
}
// 프로토타입 메서드
sayHi() {
console.log(`Hi! My name is ${this.name}`);
}
// 정적 메서드
static sayHello() {
console.log('Hello!');
}
}
// 인스턴스 생성
const me = new Person('Yu');
// 인스턴스의 프로퍼티 참조
console.log(me.name); // Yu
// 프로토타입 메서드 호출
me.sayHi(); // Hi! My name is Yu
// 정적 메서드 호출
Person.sayHello(); // Hello!
클래스와 생성자 함수의 정의 방식을 비교해 보면 다음과 같다.
이처럼 클래스와 생성자 함수의 정의 방식은 형태적인 면에서 매우 유사하다.
'모던 자바스크립트 Deep Dive > 클래스' 카테고리의 다른 글
클래스의 인스턴스 생성 과정 (0) | 2023.01.17 |
---|---|
메서드 (0) | 2023.01.16 |
인스턴스 생성 (0) | 2023.01.16 |
클래스 호이스팅 (0) | 2023.01.16 |
클래스는 프로토타입의 문법적 설탕인가? (0) | 2023.01.14 |
Comments