JavaScript 클래스:가이드

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

지난 몇 년 동안 많은 JavaScript 개발자는 객체 지향 디자인을 코드에 통합하는 방법을 모색했습니다. 이것은 프로토타입을 확장하는 클래스라고 하는 JavaScript의 새로운 유형의 객체를 발생시켰습니다.

이 가이드에서는 클래스가 무엇인지, 왜 사용되는지, 코드에서 클래스를 구현하는 방법에 대해 논의할 것입니다. 수업을 시작하는 데 도움이 되는 예시를 살펴보겠습니다.

자바스크립트 클래스란 무엇입니까?

클래스는 개체에 대한 템플릿을 선언하는 방법입니다.

객체 지향 프로그래밍 언어에 익숙하다면 클래스와 객체에 크게 의존한다는 것을 알게 될 것입니다. 클래스는 데이터 유형에 대한 청사진과 같습니다. 즉, 저장할 수 있는 데이터와 액세스할 수 있는 메서드가 표시됩니다. 객체는 해당 클래스의 인스턴스입니다.

클래스의 예는 Book입니다. . 이 클래스에는 책에 저장할 수 있는 정보와 해당 데이터를 변경하는 방법에 대한 청사진이 포함됩니다. 개체는 개별 책인 A Streetcar Named Desire가 될 수 있습니다.

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

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

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

클래스 대 함수

이 기사에서 한 가지를 기억한다면 다음과 같이 하십시오. 클래스는 일반적인 함수일 뿐입니다.

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

두 개의 함수를 생성하고 프로토타입을 출력함으로써 그것들이 동일하다는 것을 알 수 있습니다:

const PlayerFunction = function() {}
const PlayerClass = class {}

console.log(Object.getPrototypeOf(PlayerFunction));
console.log(Object.getPrototypeOf(PlayerClass));

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

함수()

함수 ()

우리의 함수와 클래스는 모두 동일한 프로토타입 기반 아키텍처를 사용합니다.

클래스 정의 방법

클래스를 어떻게 정의합니까? 좋은 질문입니다.

class를 사용하여 클래스를 정의할 수 있습니다. 예어. 클래스를 정의한 후에는 생성자() 함수를 사용하여 일부 기본값으로 클래스를 초기화할 수 있습니다.

JavaScript 콘솔을 열고 다음 코드를 붙여넣습니다.

	class Book {
constructor(title, author) {
		this.title = title;
		this.author = author;
	}
}

이것은 Book이라는 클래스를 생성합니다. . 우리 클래스는 클래스 생성자 메소드에서 정의한 두 개의 값, 제목과 작성자를 저장할 수 있습니다. 이 클래스의 객체를 생성하려면 다음 코드를 사용할 수 있습니다.

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");

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

console.log(streetcar.title);

우리 코드는 A Streetcar Named Desire를 반환합니다.

클래스 메서드를 정의하는 방법

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

다음 예를 고려하십시오.

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	getDetails() {
		console.log(`${this.title} is a book written by ${this.author}.`);
	}
}

getDetails()라는 메소드를 선언했습니다. 클래스 내부에 존재합니다. 이것은 모든 코드를 함께 그룹화하기 때문에 좋습니다. getDetails() 를 호출해 보겠습니다. 함수:

var streetcar = new Book("A Streetcar Named Desire", "Tennessee Williams");
streetcar.getDetails();

코드는 다음을 반환합니다.

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

클래스 상속

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

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

class Fiction extends Book {
	constructor(title, author, fiction) {
		super(title, author);

		this.fiction = true;
	}
}

이전에 청사진으로 선언한 Book 클래스를 사용하는 Fiction이라는 클래스를 만들었습니다. 우리 코드에서는 super()를 사용했습니다. Book이라는 상위 클래스에서 title 및 author 값을 상속하는 키워드입니다. 그런 다음 새 속성인 fiction을 정의했습니다. , 그 값은 기본적으로 true로 설정됩니다.

새 Fiction 클래스의 개체를 만들어 보겠습니다.

var gatsby = new Fiction("The Great Gatsby", "F. Scott Fitzgerald");
console.log(gatsby.fiction);

우리 코드는 true를 반환합니다. Fiction 클래스는 fiction이라는 항목을 저장합니다. 기본적으로 true입니다. Book 클래스의 인스턴스에서 이 값에 액세스하려고 하면 아무 것도 반환되지 않습니다. "fiction"은 Fiction 수업에서만 접근할 수 있기 때문입니다.

게터 및 세터

클래스로 작업할 때 getter 및 setter 기능을 사용해야 합니다.

Getter 함수를 사용하면 클래스에서 메서드를 검색할 수 있습니다. Setter 함수를 사용하면 클래스의 특정 항목 값을 변경할 수 있습니다. 이러한 함수는 get을 사용하여 표시됩니다. 및 set 각각 키워드.

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

class Book {
	constructor(title, author) {
		this.title = title;
		this.author = author;
	}
	
	get author() {
		return this.author;
	}

	set author(author) {
		this.author = author;
	}
}

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

다음 코드를 사용하여 이를 실제로 볼 수 있습니다.

var streetcar = new Book("A Streetcar Named Desire", "");
streetcar.author = "Tennessee Williams";
console.log(streetcar.author);

코드 반환:Tennessee Williams.

streetcar라는 개체를 초기화했습니다. 제목을 A Streetcar Named Desire로 지정했습니다. . 그런 다음 author 값을 설정합니다. Tennessee Williams로 코드에서 정의한 setter를 사용합니다. 마지막으로 author 값을 출력했습니다. getter 메서드를 사용하여 콘솔에 연결합니다.

결론

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

클래스는 JavaScript의 프로토타입 기반 디자인을 추상화하고 더 객체 지향적으로 보이게 합니다. 클래스는 함수라는 것을 기억하십시오. 클래스는 구문상의 설탕에 지나지 않습니다.

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