JavaScript의 클래스: 기초
11658 단어 codenewbiejavascriptwebdevbeginners
소개
JavaScript로 작업하는 개발자는 다양한 코딩 스타일을 선호합니다. 기능적이거나 객체 지향적일 수 있습니다. 클래스 또는 클래스 구성은 객체 지향 프로그래밍의 일부입니다. 클래스는 객체 생성을 위한 템플릿으로 볼 수 있습니다. 이 템플릿 클래스는 클래스의 구성원에 대한 초기 값을 설정하고 특정 다른 구성원(메서드)에 동작을 제공하는 데에도 유용합니다.
JavaScript는 함수와
new
연산자를 사용하여 이러한 템플릿을 완벽하게 제공할 수 있습니다. 이것이 대부분의 사람들이 JavaScript의 클래스를 구문상의 설탕으로 간주하는 주된 이유입니다. 완전히 사실이 아니며 이 JavaScript 블로그 시리즈를 진행하면서 알게 될 것입니다.🚨 ES2015/ES6에서 Classes 또는 class 키워드가 도입되었습니다.
통사론
class EmployeeRecord {
name = "New User";
id = 0;
constructor(firstName, lastName, id) {
this.name = `${firstName} ${lastName}`;
this.id = id;
}
}
const employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);
console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
클래스 선언은
class
키워드와 클래스 이름을 사용하여 이루어집니다. 클래스 본문은 두 중괄호 사이에 있습니다. 누락된 인수를 제외하고는 함수 선언과 유사합니다.인수는 클래스가 인스턴스화될 때 값을 초기화하는 데 사용되는 생성자로 이동합니다. 클래스를 사용하여 새 객체를 생성하는 즉시 실행되는 클래스의 메서드라고 생각하십시오. 클래스에는 "생성자"라는 이름의 고유한 메서드가 하나만 있을 수 있습니다.
클래스 표현
클래스에 감속이 있으면 함수와 같은 표현식도 있습니까? 당신은 그들이 할 내기! 이러한 클래스 표현식은 이름이 지정되거나 지정되지 않을 수 있습니다. 대부분의 사람들은 감속 구문을 사용하여 클래스를 선언하는 경향이 있습니다.
let EmployeeRecord = class {
name = "New User";
id = 0;
constructor(firstName, lastName, id) {
this.name = `${firstName} ${lastName}`;
this.id = id;
}
}
const employee1 = new EmployeeRecord("Parwinder", "Bhagat", 1);
const employee2 = new EmployeeRecord("Lauren", "L", 2);
console.log(employee1.name); // Parwinder Bhagat
console.log(employee2.name); // Lauren L
게터와 세터
속성을 검색하거나 속성에 값을 설정하기 위해 객체에서 getter와 setter를 사용합니다. 우리는 수업에서도 똑같이 할 수 있습니다.
let EmployeeRecord = class {
firstName = "";
lastName = "";
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get employeeFullName() {
return `${this.firstName} ${this.lastName}`;;
}
set employeeFirstName(firstName) {
this.firstName = firstName;
}
set employeeLastName(lastName) {
this.lastName = lastName;
}
}
const employee1 = new EmployeeRecord("Parwinder", "Bhagat");
const employee2 = new EmployeeRecord("Lauren", "L");
// With a getter you do not need the () brackets
console.log(employee1.employeeFullName);
console.log(employee2.employeeFullName);
// A setter will prohibit someone from outside the class from changing the setter
employee1.employeeFullName = "Ricky Ricardo"; // Cannot assign to 'employeeFullName' because it is a read-only property.
// But we can use our helpful setter to do so!
// Keep in mind that a setter only takes one value
employee1.employeeFirstName = "Ricky";
employee1.employeeLastName = "Ricardo";
console.log(employee1.employeeFullName); // Ricky Ricardo
오늘은 그게 다야! 클래스가 단순한 구문 설탕이 아닌 방법과 함수와 어떻게 다른지에 대해 논의하는 다음 블로그 게시물을 주목하세요.
즐거운 코딩 👋🏼
Reference
이 문제에 관하여(JavaScript의 클래스: 기초), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bhagatparwinder/classes-in-javascript-basics-10ip텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)