230526 자바스크립트 클래스

230526 자바스크립트 클래스

클래스는 많은 프로그래밍 언어에서 기본적으로 제공하는 기능이다. 클래스는 공통 속성을 같은 객체를 여러 개 생성 할 때 생성하기 편하도록 일종의 템플릿을 만들어 놓은 것이다. 자바스크립트는 이와 비슷한 Prototype이라는 객체 상속 개념이 있었고 클래스라는 기능은 없었다. 그러다 ES6 (2015)에서 class 기능이 추가되었다. 내부적으로는 Prototype과 비슷하게 동작한다고 해서 Syntactic sugar라고도 한다.

클래스 만들기

클래스는 class를 통해 만들어지며, new 연산자를 통해 클래스를 호출하면

constructor()에 의해 초기화를 수행하고 인스턴스를 반환한다.

class NewClass {
	constructor(){
    	//클래스 초기화
    }
    method1() {
		//클래스 메서드
    }
}
const NewInstance = new NewClass();

 

클래스 예시

아래 클래스는 문자열을 인자로 받아서 private한 변수로 저장하여 사용하는 예시이다.

class MyClass {
    #PrivateStr;
    constructor(str) {
        this.#checkStr(str);
        this.#PrivateStr = str;
    }

    printStr() {
        console.log(`my string is ${this.#PrivateStr}`);
    }

    #checkStr(str) {
        if (typeof str !== "string" || str.length === 0)
        throw new TypeError("유효한 문자열이 아닙니다.");
    }

    changeStr(str) {
        this.#checkStr(str);
        this.#PrivateStr = str;
    }

    get PrivateStr() {
        return this.#PrivateStr;
    }
}

클래스 외부에서 내부변수 변경 막기

• #기호를 붙인 변수나 메서드는 클래스 내부에서만 접근이 가능하다.
• 따라서 클래스 외부에서 #PrivateStr은 쓰기작업(변경)을 할 수 없다.
• 변경을 위해서는 changeStr() 함수를 이용해야만 한다.
• getter를 통해 읽기는 가능하다.

const A = new MyClass("foo"); // MyClass의 객체를 생성
console.dir(A); // [Object]
console.log(A.PrivateStr); // 'foo'
A.printStr(); // my string is foo
A.#checkStr(""); // Private field '#checkStr' must be declared in an enclosing class
console.log(A.#PrivateStr); // Private field '#PrivateStr' must be declared in an enclosing class

 

인스턴스의 프로토타입 확인

인스턴스의 프로토타입은 해당 클래스의 메서드와 생성자 정보를 가지고 있는 객체이다.

같은 클래스로 만들어진 다른 인스턴스는 같은 클래스 객체를 프로토타입으로 참조하고 있는 것이다.

생성자(constructor)는 prototype 변수로 해당 클래스 객체를 가지고 있고

인스턴스를 만들 때 이를 이용해 프로토타입을 바인딩시킨다.

 

클래스

const APrototype = Object.getPrototypeOf(A);
console.dir(APrototype); // MyClass 클래스 정보가 담긴 [Object]
console.dir(APrototype.printStr); // MyClass의 printStr()
console.dir(APrototype.constructor); // [class MyClass] 사실은 함수다

const B = new APrototype.constructor("baz"); //MyClass의 객체 생성
console.dir(B.PrivateStr); // baz
B.printStr(); // my string is baz

//같은 클래스를 사용해 만든 인스턴스 간 프로토타입 비교
console.dir(Object.getPrototypeOf(A) === Object.getPrototypeOf(B));true
//constructor는 클래스와 일치
console.dir(APrototype.constructor === MyClass); // true
//모든 클래스의 프로토 타입은 내장객체 Object
console.dir(Object.getPrototypeOf(APrototype)); // 내장객체 Object
//내장객체 Object의 프로토타입은 null(없다)
console.dir(Object.getPrototypeOf(Object.getPrototypeOf(APrototype))); // null

APrototype.printABC = () => console.log("ABC"); // My class에 함수 추가
B.printABC(); // ABC

 

이해를 위한 그림