자바스크립트 새 클래스

| | | | | |

JavaScript는 프로토타입을 기반으로 합니다. 개체를 선언할 때마다 해당 개체와 관련된 속성 및 메서드를 확장하는 프로토타입 속성이 생성됩니다.

최근 몇 년 동안 많은 JavaScript 개발자는 개체를 포함할 방법을 찾고 있습니다. 코드에서 객체를 디자인합니다. 이것은 프로토타입을 확장하는 클래스라는 JavaScript의 새로운 유형의 객체를 탄생시켰습니다.

이 가이드에서는 클래스가 무엇인지, 클래스가 사용되는 이유 및 구현 방법에 대해 설명합니다. 코드의 클래스. 클래스를 시작할 수 있도록 예제를 제공하겠습니다.

JavaScript 클래스란 무엇입니까?

클래스는 객체에 대한 모델을 선언하는 방법입니다.

객체 지향 프로그래밍 언어에 익숙하다면 클래스와 객체에 크게 의존한다는 것을 알게 될 것입니다. 클래스는 데이터 유형에 대한 템플릿과 같습니다. 어떤 데이터를 저장할 수 있고 어떤 메서드에 액세스할 수 있는지 알려줍니다. 개체는 이 클래스의 인스턴스입니다.

클래스의 예는 Book입니다. 이 클래스에는 책에 저장할 수 있는 정보와 해당 데이터가 어떻게 변경될 수 있는지에 대한 청사진이 포함됩니다. 개체는 개별 책인 Desire라는 전차일 수 있습니다.

자바스크립트에서 클래스는 구문적 설탕이라고 부르는 것입니다. 클래스의 구문은 있으면 좋지만 반드시 새로운 기능을 추가할 필요는 없습니다.

클래스는 React 및 Next.js와 같은 최신 JavaScript 프레임워크에서 일반적으로 사용됩니다.

함수와 관련된 수업

이 기사에서 한 가지를 기억한다면, 이것만 하십시오. 클래스는 매우 정상적인 함수입니다.

클래스와 함수 표현식의 유일한 차이점은 선언 방식이며, 함수는 키워드 를 사용하고 클래스는 클래스를 사용합니다. 기술적으로 키워드를 사용하면 class 키워드를 사용하지 않고도 클래스를 선언할 수 있습니다.

두 함수를 만들고 프로토타입을 인쇄하여 동일하다고 말할 수 있습니다.

p>

클래스 및 함수 표현식은 다음을 반환합니다.

function()

function()

두 개의 함수 및 클래스는 프로토타입을 기반으로 동일한 호 읽기를 사용합니다.

클래스를 어떻게 정의하나요? 좋은 질문입니다.

키워드를 사용하여 클래스를 정의할 수 있습니다. 클래스를 정의했으면 생성자() 함수를 사용하여 기본값으로 초기화할 수 있습니다.

JavaScript 콘솔을 열고 다음 코드를 붙여넣으세요.

p>

Book이라는 클래스를 생성합니다. 우리 클래스는 클래스 생성 메소드에서 정의한 Title과 Author라는 두 가지 값을 저장할 수 있습니다. 이 클래스의 개체를 만들려면 다음 코드를 사용할 수 있습니다.

객체와 마찬가지로 클래스의 값을 검색할 수 있습니다.

코드는 다음을 반환합니다. 프로토타입에서 클래스를 사용하는 장점 중 하나는 클래스 내부에서 메서드를 선언할 수 있다는 것입니다. 즉, 기존 함수에 새 메서드를 추가하기 위해 prototype 구문을 사용할 필요가 없습니다.

이 예를 들어보겠습니다.

클래스 내에 존재하는 GetDetails()라는 메소드를 선언했습니다. 모든 코드를 함께 그룹화할 수 있기 때문에 좋습니다. GetDetails() 함수를 호출합니다.

코드 반환:

전차라는 욕망은 테네시 윌리엄스가 쓴 책입니다.

강의 상속

객체 지향 구조에서와 마찬가지로 클래스는 다른 클래스의 속성을 상속할 수 있습니다.

상속은 다음과 같은 프로세스를 말합니다. 자식 클래스는 부모 클래스의 메서드와 데이터에 액세스할 수 있습니다. 클래스에서 상속하려면 Extend 키워드를 사용할 수 있습니다. JavaScript 파일을 생성하거나 JavaScript 콘솔을 열고 다음 코드를 붙여넣습니다.

우리는 이전에 프로젝트로 선언한 책의 클래스를 사용하는 소설이라는 클래스를 만들었습니다. 우리 코드에서는 super() 키워드를 사용하여 Book이라는 상위 클래스의 작성자로부터 제목과 값을 상속했습니다. 그래서 새로운 속성 fiction을 정의했습니다. 이 속성의 값은 기본적으로 true로 설정되어 있습니다.

새로운 소설 클래스의 개체를 만들 것입니다.

코드는 다음을 반환합니다. true. 픽션 클래스는 기본적으로 true인 fiction이라는 요소를 저장합니다. Book 클래스의 인스턴스에서 이 값에 액세스하려고 하면 아무 것도 반환되지 않습니다. 실제로 "fiction"은 우리의 소설 클래스에서 액세스할 수 있습니다.

Getter 및 Setter

클래스로 작업할 때 getter 및 setter 함수를 사용해야 합니다.

Get 함수를 사용하면 클래스의 메서드를 검색할 수 있습니다. Setter 함수를 사용하면 클래스의 특정 요소 값을 변경할 수 있습니다. 이러한 기능은 각각 gettogether 키워드를 사용하여 표시됩니다.

다음 코드를 고려하십시오.

이 예에서는 author라는 두 개의 메소드를 선언했습니다. 이 방법 중 하나를 사용하여 author의 값을 검색할 수 있습니다. 이것은 get 메소드입니다. 다른 방법을 사용하면 author 값을 변경할 수 있습니다.

다음 코드를 사용하여 작동 중인 것을 볼 수 있습니다.

우리 코드는 다음을 반환합니다: Tennessee Williams

우리 tra m라는 개체를 초기화하고 욕망이라는 이름의 전차라는 제목을 부여했습니다. 그런 다음 코드에서 정의한 작곡가를 사용하여 authorTennessee Williams가 있습니다. 마지막으로 다음을 사용하여 콘솔에 author 값을 출력했습니다. play 메소드.

결론

클래스는 새로운 JavaScript 기능에 해당하지 않지만 객체 지향 프로그래밍에 익숙하다면 클래스를 사용하면 함수 작성을 더 쉽게 이해할 수 있습니다.

JavaScript 프로토타입을 기반으로 하는 디자인 클래스를 추상화하고 보다 객체 지향적으로 보이도록 합니다. "look"이라는 단어는 중요합니다. 클래스는 함수라는 것을 기억하십시오. 클래스는 구문상의 설탕에 불과합니다.

이제 JavaScript 전문가와 같은 클래스를 사용할 준비가 되었습니다!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers

News


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method