JavaScript에서 클래스 만들기

Anika Tabassum Era 2024년2월15일
  1. JavaScript의 클래스
  2. JavaScript에서 클래스 만들기
  3. JavaScript에서 클래스의 메서드 선언
  4. JavaScript의 클래스에서 getset 사용
JavaScript에서 클래스 만들기

JavaScript에는 특정 작업을 가능하게 하는 기본 함수 선언 프로세스가 있지만 함수는 객체를 생성하는 작업의 개념으로 진행되지 않습니다. 기능에 더 가까운 것은 특정 작업을 수행하기 위한 독립적인 코드 블록입니다.

JavaScript의 클래스

수업은 무엇을 하나요? 클래스의 개념은 ES6 업데이트를 통해 도입되었으며, 이는 가치 있는 것을 구축하기 위한 적극적인 접근 방식을 가지고 있습니다.

여러 캐릭터로 게임을 만든다고 가정해 보겠습니다. 캐릭터는 인간과 같은 모습, 두 눈, 두 귀, 두 손 등을 가지고 있습니다.

각 캐릭터에 대해 명시적인 기능을 정의하면 혼란스럽고 수정이 불편합니다. 그래서 우리는 그림의 공통된 특징을 담을 클래스를 만듭니다. 따라서 클래스는 개체의 청사진으로 작동합니다.

여기에서는 클래스의 기본 초기화에 대해 논의하고 그것이 작동하는 몇 가지 중요한 방법을 보여줍니다. 또한 주목해야 할 몇 가지 사항이 있습니다. 이 클래스는 JavaScript에서 엄격 모드로 작동하므로 드라이버 코드보다 먼저 시작할 것입니다.

또 다른 요점은 함수와 달리 클래스가 선언되기 전에 호출할 수 없다는 것입니다. 함수와 메소드에서 먼저 메소드를 호출하고 나중에 세부사항을 설명할 수 있습니다.

그러나 클래스에서는 항상 내용과 선언을 설명하고 명시적으로 호출해야 합니다. 그렇지 않으면 referenceError가 발생합니다.

따라서 주제를 더 잘 미리 보기 위해 코드 행으로 이동하겠습니다.

JavaScript에서 클래스 만들기

우리는 항상 class 키워드를 사용하여 JavaScript에서 클래스를 생성합니다. 그런 다음 클래스에 부여할 이름이 정의됩니다.

이 예에서는 value 매개변수가 있는 constructor 메서드가 있는 abc 클래스를 사용합니다. 이는 다른 메서드나 표현식이 선언되지 않은 경우에도 클래스가 항상 이 생성자를 콘텐츠로 갖는다는 것을 의미합니다.

생성자는 기본 또는 기본 부분과 같습니다.

나중에 클래스와 해당 생성자가 완료된 후 클래스에 대한 인스턴스 또는 개체를 시작합니다. 그리고 생성자 매개변수와 함께 객체를 호출하면 클래스의 속성인 값이 됩니다.

따라서 클래스 아래에서 생성된 객체는 해당 클래스 abc의 모든 속성을 소유하고 있음을 의미합니다. 코드를 확인해 봅시다.

코드 조각:

'use strict';

class abc {
  constructor(value) {
    this.value = value;
  }
}

var x = new abc(5);
console.log(x.value)

출력:

JavaScript에서 클래스 만들기

JavaScript에서 클래스의 메서드 선언

이전 코드 예제에서는 생성자가 어떻게 작동하는지 살펴보았습니다. 그 외에 개인 속성과 기본 메서드를 시작할 수도 있습니다.

비공개 선언의 경우 인스턴스에서 액세스할 수 없습니다. 그러나 명시적인 private 선언 없이 선언된 메서드는 인스턴스에서 액세스하고 변경할 수 있습니다.

아래 예는 위의 진술을 뒷받침합니다.

코드 조각:

'use strict';

class abc {
  constructor(value) {
    this.value = value
  }
  math() {
    return this.value + 5
  }
}
var x = new abc(5);
console.log(x.value);
console.log(x.math());

출력:

클래스 내 메서드 선언

JavaScript의 클래스에서 getset 사용

getter 및 setter라고도 하는 getset 키워드는 함수를 보다 명시적으로 정의하는 데 사용됩니다. 여기에서 세터 부분은 값을 설정하거나 요구 사항에 따라 계산을 수행합니다.

나중에 getter는 클래스에 값을 반환합니다. 이 프로세스는 작업을 보다 유연하게 만듭니다.

예를 들어 이 개념을 시각화해 보겠습니다.

코드 조각:

'use strict';

class abc {
  constructor(val) {
    this.val = val
  }

  get math() {
    return this.value
  }

  set math(y) {
    this.val = y + 10
  }
}

var x = new abc()
x.math = 32
console.log(x.val)

출력:

클래스에서 get 및 set 사용

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

관련 문장 - JavaScript Class