FE/리뷰
[모던 자바스크립트 딥다이브] 25장 클래스
따봉치치
2024. 4. 25. 19:01
객체지향 프로그래밍 언어인 자바스크립트
- 자바스크립트는 프로토타입 기반 객체지향 언어. 따라서 클래스가 필요 없음
- 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속 구현 가능함
- ES6에서 도입된 클래스는 기존 프로토타입 기반 객체지향 프로그래밍보다 자바나 C#에 익숙한 프로그래머가 빠르게 학습할 수 있는 객체 생성 매커니즘 제시
var Person = (function () {
//생성자 함수
function Person(name) {
this.name = name;
}
//프로토타입 메서드
Person.prototype.sayHi = fuction () {
console.log('Hi, My name is '+this.name);
};
return Person;
}());
var me = new Person('lee');
me.sayHi();
클래스와 생성자 함수 차이점
| 클래스 | 생성자 함수 |
| new 연산자 없이 호출하면 에러 발생 | new 연산자 없이 호출하면 일반 함수로서 호출 |
| 상속을 지원하는 extends와 super 키워드 제공 | extends, super 키워드 X |
| 호이스팅이 동작하지 않는 것처럼 동작 | 함수 선언문으로 정의된 생성자 함수는 함수 호이스팅이, 함수 표현식으로 정의한 생성자 함수는 변수 호이스팅이 발생 |
| 클래스 내의 모든 코드에는 암묵적으로 strict mode가 지정되어 실행되며 해제할 수 없음 | 암묵적으로 strict mode 지정되지 않음 |
| constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어튜리뷰트 [[Enumerable]] 값이 false임 | constructor, 프로토타입 메서드, 정적 메서드는 모두 프로퍼티 어튜리뷰트 [[Enumerable]] 값이 true임 |
클래스
- class 키워드를 사용해 정의
- 이름을 가질 수도, 가지지 않을 수도 있음
- 클래스는 함수다 = 일급 객체다
- 클래스 몸체에 정의할 수 있는 메서드는 constructor(생성자), 프로토타입 메서드, 정적 메서드임
class Person {
// 생성자
constructor(name) {
this.name = name;
}
// 프로토타입 메서드
sayHi() {
console.log(`Hi! My name is ${this.name}`);
}
//정적 메서드
static sayHello() {
console.log('hello');
}
}일급 객체의 특징
- 무명의 리터럴로 생성할 수 있음. 즉, 런타임에 생성 가능함
- 변수나 자료구조에 저장 가능
- 함수의 매개변수에 전달 가능
- 함수의 반환값으로 사용 가능
클래스 호이스팅
- 클래스는 함수로 평가됨
- 클래스 선언문으로 정의한 클래스는 함수 선언문과 같이 런타임 이전에 먼저 평가되어 함수 객체를 생성함 + 프로토아입도 더불어 생성함
- 클래스가 평가되어 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수인 constructor 임
- 클래스는 클래스 정의 이전에 참조할 수 없음 => ReferenceError 발생
- 함수 호이스팅이 발생하지만 일시적 사각지대인 TDZ에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작함
인스턴스 생성
- 클래스는 new 연산자와 함께 호출되어 인스턴스 생성 => 없다면 TypeError 발생
class Person{]
// 인스턴스 생성
const me = new Person();
메서드
- constructor
- 인스턴스를 생성하고 초기하하기 위한 특수 메서드
- constructor 이름을 변경할 수 없음
- 프로토타입 객체의 constructor 프로퍼티는 클래스 자신을 가리킴 => 클래스가 인스턴스를 생성하는 생성자 함수라는 것을 의미
- constructor는 메서드로 해석되는 것이 아님. 클래스가 평가되면 constructor의 기술된 동작을 하는 함수 객체가 생성됨
- constructor는 클래스 내에 최대 한개만 존재 가능
- 생략 가능 => 클래스에 빈 constructor가 암묵적으로 정의됨
- constructor 내에서 인스턴스의 생성과 동시에 인스턴스 프로퍼티 추가를 통해 인스턴스의 초기화 진행
- 별도의 반환문 갖지 않아야 함
프로토타입의 constructor 프로퍼티는 모든 프로토타입이 가지고 있는 프로퍼티, 생성자 함수를 가리킴
클래스의 constructor와는 다름
- 프로토타입 메서드
- 생성자 함수를 사용해 인스턴스를 생성하는 경우 프로토타입 메서드를 생성하기 위해서는 prototype 프로퍼티가 필요
- 클래스 몸체에서 정의한 메서드는 prototype 프로퍼티에 메서드를 추가하지 않아도 기본적으로 프로토타입 메서드가 됨
- 클래스가 생성한 인스턴스도 프로토타입 체인의 일원이 됨
- 클래스 몸체에서 정의한 메서드는 인스턴스의 프로토타입에 존재하는 프로토타입 메서드가 되기 때문에 인스턴스는 프로토타입 메서드를 상속받아 사용 가능함
- 정적 메서드
- 인스턴스를 생성하지 않아도 호출할 수 있는 메서드
- static 키워드를 붙이면 정적 메서드가 됨
- 정적 메서드는 클래스에 바인딩된 메서드
- 정적 메서드는 인스턴스로 호출하지 않고 클래스로 호출함 => 인스턴스로 호출 불가능, 인스턴스의 프로토타입 체인 상에는 클래스가 존재하지 않기 때문
class Person {
//정적 메서드
static sayHello() {
console.log('hello');
}
}
// 정적 메서드는 클래스로 호출함.
Person.sayHello();ES11에 따르면 인스턴스 프로퍼티는 반드시 constructor 내부에 정의해야 함
정적 메서드와 프로토타입 메서드의 차이
- 정적 메서드와 프로토타입 메서드는 자신이 속해 있는 프로토타입 체인이 다름
- 정적 메서드는 클래스로 호출, 프로토타입 메서드는 인스턴스로 호출
- 정적 메서드는 인스턴스 프로퍼티를 참조할 수 없지만, 프로토타입 메서드는 인스턴스 프로퍼티를 참조 가능
- 정적 메서드는 클래스로 호출해야 하기 때문에 내부의 this는 인스턴스가 아닌 클래스를 가리킴
- 정적 메서드는 애플리케이션 전역에서 사용할 유틸리티 함수를 전역 함수로 정의하지 않고 메서드로 구조화할 때 용이함
클래스에서 정의한 메서드의 특징
- function 키워드를 생략한 메서드 축약 표현 사용
- 객체 리터럴과 달리 클래스에 메서드를 정의할 때 콤마 필요 없음
- 암묵적으로 strict mode 실행됨
- for ... in 문이나 Object.keys 메서드 등으로 열거 불가
- 내부 메서드 [[Construct]] 를 갖지 않는 non-constructor. 따라서 new 연산자 없이 호출 불가능
클래스의 인스턴스 생성 과정
- 인스턴스 생성과 this 바인딩 : new 연산자와 함께 클래스를 호출하면 cosntructor 내부 코드가 실행되기에 앞서 빈 객체가 생성 (인스턴스) => 인스턴스의 프로토타입으로 클래스의 prototype 프로퍼티가 가리키는 객체가 설정됨 => 인슨턴스는 this에 바인딩
- 인스턴스 초기화 : constructor 내부 코드가 실행되어 this에 바인딩된 인스턴스 초기화됨
- 인스턴스 반환 : 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩딘 this가 암묵적으로 반환됨
프로퍼티
- 인스턴스 프로퍼티
- constructor 내부에서 정의해야함
- constructor 내부에서 this에 추가한 프로퍼티는 언제나 클래스가 생성한 인스턴스의 프로퍼티가 됨
- 인스턴스 프로퍼티는 언제나 public
class Person {
constructor(name) {
// 인스턴스 프로퍼티
this.name = name;
}
}
- 접근자 프로퍼티
- 자체적으로는 값을 갖지 않고 다른 데이터 프로퍼티의 값을 읽거나 저장할 때 사용하는 접근자 함수로 구성된 프로퍼티 => getter, setter 함수로 구성됨
- getter : 인스턴스 프로퍼티에 접근할 때마다 프로퍼티 값을 조작하거나 별도의 행위가 필요할 때 사용
- setter : 인스턴스 프로퍼티에 값을 할당할 때마다 프로퍼티 값을 조작하거나 별도의 행위가 필요할 때 사용
- 클래스의 메서드는 기본적으로 프로토타입 메서드이므로 클래스의 접근자 프로퍼티 또한 프로토타입의 프로퍼티가 됨
클래스 필드 정의 제안
- 클래스 필드 : 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어
- 자바의 클래스 필드는 마치 클래스 내부에서 변수처럼 사용됨
- 원래는 안되는데 최신 브라우저와 Node.js에서는 클래스 필드를 자바처럼 클래스 몸체에서 정의 가능함
private 필드 정의 제안
- ES6 클래스는 접근 제한자를 지원하지 않기 때문에 인스턴스 프로퍼티는 인스턴스를 통해 클래스 외부에서 언제나 참조 가능한 public임
- 원래 안되는데 최신 브라우저와 Node.js에서는는 private 가능 => #을 붙여서 사용 가능
static 필드 정의 제안
- 위와 마찬가지로 static 키워드를 사용해 정적 필드 정의 가능
상속에 의한 클래스 확장
- 상속에 의한 클래스 확장은 기존 프로토타입 상속과는 달리 기존 클래스를 상속받아 새로운 클래스를 확장하여 정의하는 것
클래스 상속과 생성자 함수 상속
- 생성자 함수와 달리 클래스는 기존 클래스를 확장할 수 있는 기본 문법이 제공됨 => extends 키워드
- 생성자 함수를 의사 클래스 상속 패턴을 사용해 상속에 의한 클래스 확장을 흉내 낼 수는 있음
extends 키워드
- extends 키워드를 사용해 상속받을 클래스를 정의함, 수퍼클래스와 서브클래스 간의 상속 관계 설정하는 것
- 서브클래스 : 상속을 통해 확장 된 클래스. 파생클래스, 자식 클래스
- 수퍼클래스 : 서브클래스에게 상속된 클래스. 베이스클레스, 부모클래스
- 인스턴스의 프로토타입 체인뿐만 아니라 클래스 간의 프로토타입 체인도 생성해 프로토타입 메섣, 정적 메서드 모두 상속 가능함
동적 상속
- extends 키워드는 클래스뿐만 아니라 생성자 함수를 상속받아 클래스 확장 가능함
- 단, extends 키워드 앞에는 반드시 클래스가 와야함
- extends 키워드 다음에 클래스 뿐만 아니라 [[Constructor]] 내부 메서드를 갖는 함수 객체로 평가될 수 있는 모든 표현식 사용 가능함
- 동적으로 상속받을 대상 결정 가능
function Base1() {}
class Base2 {}
let flag = true;
class Derived extends (flag ? Base1 : Base2) {}
서브클래스의 constructor
constructor(...args) { super(...args); }- 서브클래스에서 constructor를 생략하면 위의 constructor가 암묵적으로 정의됨
- args는 new 연산자와 함께 클래스를 호출할 때 전달한 인수의 리스트
- super() 는 수퍼클래스의 constructor를 호출해 인스턴스 생성함
super 키워드
- 함수처럼 호출할 수 있고 this와 같이 식별자처럼 참조 가능한 특수한 키워드
- 동작
- super를 호출하면 수퍼클래스의 constructor를 호출함
- super를 참조하면 수퍼클래스의 메서드를 호출 가능함
super 호출
- super를 호출하면 수퍼클래스의 constructor를 호출함
- 인스턴스 초기화를 위해 전달한 인수는 수퍼클래스와 서브클래스에 배분되고 상속 관계의 두 클래스는 서로 협력해 인스턴스 생성함
class A {
constructor(a,b) {
this.a = a;
this.b = b;
}
}
class B extends A {
constructor(a,b,c) {
super(a,b);
this.c = c;
}
}
const item = b(1,2,3);- super 호출시 주의 사항
- 서브클래스에서 constructor를 생략하지 않는 경우 서브클래스의 constructor에서는 반드시 super를 호출해야 함
- 서브클래스의 constructor에서 super를 호출하기 전에는 this 참조 불가
- super는 반드시 서브클래스의 constructor에서만 호출. 서브클래스가 아닌 클래스의 constructor이나 함수에서 super 호출 시 에러 발생
super 참조
- 메서드 내에서 super를 참조하면 수퍼클래스의 메서드를 호출 가능
class A {
constructor(a) {
this.a = a;
}
sayHi() {
console.log(this.a);
}
}
class B extends A {
sayHi() {
return super.sayHi;();
}
}
const item = b('Lee');- 서브클래스의 프로토타입 메서드 내에서 super.sayHi는 수퍼클래스의 프로토타입 메서드 sayHi를 가리킴
class A {
constructor(a) {
this.a = a;
}
static sayHello() {
console.log(this.a);
}
}
class B extends A {
static sayHi() {
return super.sayHello();
}
}
const item = b('Lee');- 서브클래스의 정적 메서드 내에서 super.sayHello는 수퍼클래스의 정적 메서드 sayHello를 가리킴
상속 클래스의 인스턴스 생성 과정
- 서브클래스의 super 호출
- 수퍼클래스의 인스턴스 생성과 this 바인딩
- 수퍼클래스의 인스턴스 초기화
- 서브클래스 constructor 복귀와 this 바인딩
- 서브클래스의 인스턴스 초기화
- 인스턴스 반환
1. 서브클래스의 super 호출
- 자바스크립트 엔진은 수퍼클래스와 서브클래스를 구분하기 위해 "base" , "derived"를 값으로 갖는 내부 슬롯 [[ConstructorKind]]를 갖음
- 다른 클래스를 상속받지 않는 클래스와 생성자 함수 = "base"
- 다른 클래스를 상속받는 서브클래스 = "derived"
- 서브클래스는 자신이 직접 인스턴스를 생성하지 않고 수퍼클래스에게 인스턴스 생성을 위임함 => super 호출 이유
- 서브클래스가 new 연산자와 함께 호출되면 서브클래스의 constructor 내부의 super 키워드가 함수처럼 호출됨
- super 호출이 없으면 에러 발생
2. 수퍼클래스의 인스턴스 생성과 this 바인딩
- 수퍼클래스의 constructor 내부의 코드가 실행되기 전에 암묵적으로 빈 객체(인스턴스)가 생성되고 this에 바인딩됨
- 이때 인스턴스는 수퍼클래스가 생성한 것
- 하지만 인스턴스는 new.target이 가리키는 서브클래스가 생성한 것으로 처리됨!
3. 수퍼클래스의 인스턴스 초기화
- 수퍼클래스의 constructor가 실행되어 this에 바인딩되어 있는 인스턴스가 초기화됨
4. 서브클래스 constructor로의 복귀와 this 바인딩
- super의 호출이 종료되고 제어 흐름이 서브클래스 constructor로 돌아옴
- 이 때 super가 반환한 인스턴스가 this에 바인딩됨
- 서브클래스는 별도의 인스턴스를 생성하지 않고 super가 반환한 인스턴스를 this에 바인딩해 그대로 사용함
- super가 호출되지 않으면 인스턴스 생성도 불가하며 this 바인딩도 할 수 없음!
5. 서브클래스의 인스턴스 초기화
- super 호출 이후, 서브클래스의 constructor에 기술되어 있는 인스턴스 초기화가 실행됨
6. 인스턴스 반환
- 클래스의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환됨
표준 빌트인 생성자 함수 확장
- String, Numbr, Array 같은 표준 빌트인 객체도 [[Constructor]] 내부 메서드를 갖는 생성자 함수이므로 extends 키워드를 사용하여 확장 가능함