예제가 포함된 완전한 가이드

JavaScript는 기능적, 객체 지향적, 명령형 프로그래밍 스타일을 따르는 프로그램을 작성할 수 있는 다중 패러다임 언어입니다.

객체 지향 패턴을 지원하기 위해 JavaScript에는 클래스가 있습니다. 이를 이해하는 것이 중요하기 때문에 이 기사는 JavaScript 클래스가 무엇인지, 어떻게 사용하는지에 대한 가이드입니다.

JavaScript의 클래스란 무엇입니까?

객체 지향 프로그래밍에서는 시스템을 서로 상호 작용하는 객체 그룹으로 모델링합니다. 기능을 수행하기 위해 개체는 속성에 데이터를 저장하고 해당 메서드로 정의된 작업을 수행합니다. 클래스는 동일한 유형의 객체가 전달하는 속성과 메서드를 정의합니다. 따라서 클래스는 객체의 청사진입니다.

수업에 사용되는 용어

같은 내용인지 확인하기 위해 이 기사에서 사용할 주요 용어와 함께 클래스에 대한 설명을 제공합니다. 객체 지향 프로그래밍에 이미 익숙하다면 다음 섹션으로 건너뛰셔도 됩니다.

❇️ 클래스는 객체의 청사진입니다. 해당 유형의 개체를 만들 수 있는 템플릿을 제공합니다. 클래스가 제공하는 템플릿에서 객체를 생성하는 것을 인스턴스화라고 합니다.

❇️ 클래스 멤버는 클래스에 속한 모든 것입니다. 클래스 멤버에는 메서드와 속성이라는 두 가지 종류가 있습니다.

❇️ 속성은 값을 저장하는 것이 주요 목적인 클래스 멤버입니다. 이는 숫자, 문자열과 같은 간단한 값일 수 있습니다. 복잡한 객체나 배열일 수도 있습니다.

❇️ 일부 속성은 클래스 내부에서만 액세스할 수 있으며 개인 속성이라는 이름이 적절합니다. 일부는 수업 내외에서 모두 접근 가능합니다. 이러한 속성을 공공 속성이라고 합니다.

❇️ 메소드는 클래스 내부에 정의된 함수입니다. 따라서 클래스에 속하며 공용 및 개인 속성에 액세스할 수 있습니다. 속성과 마찬가지로 공개 메소드와 비공개 메소드도 있습니다.

❇️ 클래스 외부의 코드가 클래스 내부의 속성과 상호 작용할 수 있도록 인터페이스를 제공하는 일부 메서드가 있습니다. 이를 수행하는 메소드에는 getter와 setter라는 두 가지 그룹이 있습니다. Getter는 클래스 속성 값을 가져오고, Setter는 클래스 속성 값을 설정합니다.

❇️ 일부 회원은 정적입니다. 즉, 클래스에서만 액세스할 수 있고 클래스 인스턴스에서는 액세스할 수 없습니다.

이와 대조적으로 일부 클래스 멤버는 정적이 아닙니다. 즉, 클래스 인스턴스에서만 액세스할 수 있습니다. 비정적 멤버에 액세스하려면 먼저 클래스를 인스턴스화해야 합니다.

클래스를 인스턴스화하면 인스턴스의 속성을 설정하기 위해 특수 메서드가 호출됩니다. 이 메소드를 생성자 함수라고 합니다.

클래스 인스턴스화 설명

JavaScript에서 클래스를 인스턴스화하기 위해 new 키워드와 클래스 이름을 사용합니다. 예를 들어 Array 클래스를 인스턴스화해 보겠습니다.

const myArr = new Array()

JavaScript로 클래스 만들기

이 섹션에서는 우리가 다룬 모든 개념을 구현하는 클래스를 만드는 방법에 대해 설명합니다. 용어 섹션. 각 예제는 이전 예제를 기반으로 하는 일련의 예제에서 이 작업을 수행할 것입니다.

빈 클래스 선언

JavaScript에서 클래스를 선언하려면 class 키워드를 사용하고 클래스에 이름을 지정합니다. 다음으로 클래스의 본문을 정의합니다. 본문은 중괄호로 둘러싸여 있으며 모든 클래스 멤버를 포함합니다.

다음은 본문이 비어 있는 클래스 선언의 예입니다.

class Dog {

}

이제 다음과 같이 클래스를 인스턴스화하고 인쇄할 수 있습니다.

const pet = new Dog;
console.log(pet);

공공 자산 생성

공용 속성은 식별자와 선택적 값으로 정의됩니다.

class Dog {
    name = "Roy";
    age;
}

여기서는 이름을 문자열 값으로 정의하고 나이를 값 없이 정의했습니다.

const pet = new Dog();

console.log(pet.name);
console.log(pet.age);

공개 메소드 정의

클래스 본문 내부에 메서드를 추가할 수 있습니다. 함수를 정의하는 것과 같은 방식으로 메소드를 정의합니다. 그러나 function 키워드는 생략합니다.

class Dog {
    name = "Roy";
    age;

    walk () {
        console.log("Walking");
    }
}

위의 예에서는 walk 메서드를 정의했습니다. Animal 클래스의 모든 인스턴스에는 해당 메서드가 있습니다.

const pet = new Dog();
pet.walk();

메서드에서 속성에 액세스

JavaScript에서는 일반적으로 점 연산자를 사용하여 객체의 속성에 액세스합니다. 예를 들어, person이라는 객체가 있고 name 속성에 액세스하려는 경우 다음과 같이 수행합니다.

person.name

그러나 객체 내에서 속성에 액세스하려면 객체 이름 대신 this 키워드를 사용합니다. 예는 다음과 같습니다.

this.name

this 키워드는 객체를 참조합니다. 따라서 클래스 메서드 내에서 클래스 속성에 액세스하려면 this. 구문을 사용합니다.

사유 재산 생성

앞서 정의한 이름 및 연령 속성을 비공개로 설정하고 싶다고 가정해 보겠습니다. 클래스를 다음과 같이 재정의하겠습니다.

class Dog {
    #name = "Roy";
    #age;

    walk () {
        console.log("Walking");
    }
}

보시다시피 사유 재산은 파운드 기호를 사용하여 지정됩니다. 해당 항목에 액세스하려고 하면 오류가 발생합니다.

const dog = new Dog();

dog.#name

Getter 및 Setter 메서드 만들기

이제 클래스의 이름과 연령 속성은 비공개입니다. 따라서 클래스 내부의 메소드로만 접근이 가능합니다.

클래스 외부의 코드에서 이러한 속성에 액세스할 수 있도록 하려면 getter 및 setter를 정의합니다. name 속성에 대해 그렇게 해보겠습니다.

class Dog {
    #name = "Roy";
    #age;

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

    set name (value) {
        this.#name = value;
    }

    walk () {
        console.log("Walking");
    }
}

위에 정의된 클래스를 사용하면 아래 코드를 사용하여 이름을 설정하고 표시할 수 있습니다.

const pet = new Dog();

// Setting the name
pet.name = "Rex";

// Getting the name
console.log(pet.name);

비공개 메소드 생성

프라이빗 속성과 마찬가지로 프라이빗 메서드 앞에는 파운드 기호가 붙습니다. 따라서 개인 메소드를 선언하는 방법은 다음과 같습니다.

class Dog {
    #name = "Roy";
    #age;

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

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

클래스 외부에서 이러한 메서드에 액세스하려고 하면 작동하지 않습니다.

const pet = new Dog();
pet.#increaseAge();

생성자 메서드 만들기

생성자 메서드를 정의할 수도 있습니다. 이 메서드는 새 클래스를 인스턴스화할 때마다 자동으로 호출됩니다. 생성자 메서드를 사용하여 속성을 초기화할 수 있습니다. 이 예에서는 인스턴스화 중에 사용자가 제공하는 인수에 따라 나이와 이름을 초기화합니다.

class Dog {
    #name;
    #age;

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

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

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

클래스를 인스턴스화할 때 이름과 나이를 제공할 수 있습니다.

const pet = new Dog('Roy', 3);
console.log(pet.name);

정적 속성 및 메서드 만들기

언급한 대로 정적 멤버는 클래스를 먼저 인스턴스화하지 않고도 액세스할 수 있습니다. 아래 예에서는 정적 속성과 메서드를 만듭니다.

class Dog {
    #name;
    #age;
    static genus = "Canis";

    constructor (name = "Dog", age = 0) {
        this.#name = name;
        this.#age = age;
    }

    static bark() {
        console.log("Woof");
    }

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

    set name (value) {
        this.#name = value;
    }

    #increaseAge() {
        this.#age ++;
    }

    #decreaseAge () {
        this.#age --;
    }

    walk () {
        console.log("Walking");
    }
}

이제 인스턴스화 없이 정적 속성과 메서드에 액세스할 수 있습니다.

console.log(Dog.genus);
Dog.bark();

계승

클래스는 다른 클래스로부터 속성을 상속받을 수 있습니다. 다른 클래스로부터 멤버를 상속받는 클래스를 슈퍼클래스라고 하고, 멤버를 상속받는 클래스를 기본 클래스 또는 서브클래스라고 합니다.

JavaScript에서 슈퍼클래스를 생성하려면 확장 키워드를 사용합니다. 다음은 Dog 클래스에서 상속받은 예입니다.

class Rottweiler extends Dog {
    constructor (name, age) {
        super(name, age);
        this.breed = 'rottweiler';
    }
}

보시다시피 수업은 이전과 거의 동일합니다. 그러나 생성자 내부에서는 super 함수를 호출했습니다. super 키워드는 기본 클래스의 생성자를 참조합니다. 따라서 우리는 슈퍼클래스 내에서 기본 클래스의 생성자를 호출하여 이름과 나이를 전달했습니다.

const myPet = new Rottweiler();
console.log(myPet);

결론

이번 글에서는 수업을 다루었습니다. 우리는 그들이 무엇인지, 보유할 수 있는 회원, 회원에 대한 다양한 분류를 다루었습니다. 그런 다음 예제를 통해 이 모든 것을 설명했습니다.

다음으로 객체지향 프로그래밍 인터뷰 질문을 읽어보세요.