JavaScript의 새로운 개인 클래스 필드 및 사용 방법
- Joseph Gordon-Levitt원래의
- 2025-02-10 14:30:15757검색
ES6은 JavaScript 용 클래스를 소개하지만 복잡한 응용 프로그램의 경우 너무 간단 할 수 있습니다. 클래스 필드 (
라고도 함)는 개인 및 정적 멤버로 생성자를 단순화하도록 설계되었습니다. 이 제안은 현재 TC39 3 단계 : 후보 단계에 있으며 ES2019 (ES10)에 추가 될 것입니다. Node.js 12, Chrome 74 및 Babel은 현재 개인 필드를 지원합니다. 클래스 필드가 어떻게 구현되는지 이해하기 전에 ES6 클래스를 검토하는 것이 유용합니다. 이 기사는 2020 년에 업데이트되었습니다. 보다 심층적 인 JavaScript 지식을 보려면 "JavaScript : Newbie에서 Ninja, Second Edition"을 읽으십시오. 키 포인트 ES6은 JavaScript 용 클래스를 소개하지만 복잡한 응용 프로그램의 경우 너무 간단 할 수 있습니다. ES2019의 클래스 필드는 ES2019 (ES10)에 추가 될 수있는 개인 및 정적 멤버로 생성자를 단순화하도록 설계되었습니다.
ES2019의 클래스 필드를 사용하면 해시# 접두사를 사용하여 개인 클래스 필드를 선언 할 수 있습니다. 이를 통해 필드는 클래스 외부가 아닌 클래스의 내부 방법에서만 액세스 할 수 있습니다.
클래스 필드에서 사유성을 나타내는 # 사용은 비판을 받았으며, 주로 개인 키워드만큼 직관적이지 않기 때문입니다. 그러나 # 기호는 클래스 정의 외부에서 유효하지 않아 개인 필드가 비공개로 유지되도록합니다.
- es6 카테고리 기본 사항
- 클래스 를 소개했습니다. 그들은 대부분 구문 설탕이지만 객체 지향 프로그래밍의보다 친숙한 개념을 제공합니다. 클래스는 해당 유형의 객체가 작동하는 방식을 정의하는 객체 템플릿
- 입니다. 다음 동물 계급은 일반 동물을 정의합니다 (클래스는 일반적으로 대상 및 기타 유형과 구별하기 위해 초기 대문자로 표시됩니다) :
- 클래스 선언은 항상 엄격한 모드로 실행됩니다. 'Strict 사용'을 추가 할 필요가 없습니다.
- getter and setter
는 값을 정의하는 데만 사용되는 특수 메소드입니다. 마찬가지로, getter 는 반환 값에 대한 특별한 방법입니다. 예를 들면 :
서브 클래스 또는 서브 클래스
ES2019 클래스 필드 ( new )
개인 클래스 필드
es6 클래스의 모든 속성은 기본적으로 공개되며
클래스 필드 : 개선?
JavaScript의 개인 클래스 필드는 객체 지향 프로그래밍의 기본 원칙 인 클래스에서 데이터를 캡슐화하거나 숨길 수있는 방법을 제공합니다. 이 캡슐화는 객체의 내부 상태가 명시 적으로 정의 된 클래스에 의해서만 변경 될 수 있도록합니다. 이로 인해 코드는 외부 코드가 실수로 객체 상태를 예기치 않은 방식으로 변경하는 것을 방지하기 때문에 코드를보다 강력하고 예측할 수 있습니다. 또한 개인 필드는 외부 세계에 노출 된 속성 및 방법의 수를 줄이기 때문에 클래스 인터페이스를 단순화하는 데 도움이 될 수 있습니다.
JavaScript에서
<code class="language-javascript">class Animal {
constructor(name = 'anonymous', legs = 4, noise = 'nothing') {
this.type = 'animal';
this.name = name;
this.legs = legs;
this.noise = noise;
}
speak() {
console.log(`${this.name} says "${this.noise}"`);
}
walk() {
console.log(`${this.name} walks on ${this.legs} legs`);
}
}</code> 정적 메소드 및 속성 <code class="language-javascript">let rex = new Animal('Rex', 4, 'woof');
rex.speak(); // Rex says "woof"
rex.noise = 'growl';
rex.speak(); // Rex says "growl"</code> 클래스의 정적 카운트 getter는 그에 따라 인간의 수를 반환합니다.
<code class="language-javascript">class Animal {
constructor(name = 'anonymous', legs = 4, noise = 'nothing') {
this.type = 'animal';
this.name = name;
this.legs = legs;
this.noise = noise;
}
speak() {
console.log(`${this.name} says "${this.noise}"`);
}
walk() {
console.log(`${this.name} walks on ${this.legs} legs`);
}
// setter
set eats(food) {
this.food = food;
}
// getter
get dinner() {
return `${this.name} eats ${this.food || 'nothing'} for dinner.`;
}
}
let rex = new Animal('Rex', 4, 'woof');
rex.eats = 'anything';
console.log( rex.dinner ); // Rex eats anything for dinner.</code>
<code class="language-javascript">class Human extends Animal {
constructor(name) {
// 调用Animal构造函数
super(name, 2, 'nothing of interest');
this.type = 'human';
}
// 重写Animal.speak
speak(to) {
super.speak();
if (to) console.log(`to ${to}`);
}
}</code>
다른 언어는 일반적으로 개인 속성을 선언 할 수 있습니다. ES6에서는 불가능하므로 개발자는 종종 밑줄 컨벤션 (_propertyName), 클로저, 기호 또는 약점을 사용 하여이 문제를 해결합니다. 밑줄은 개발자에게 힌트를 제공하지만 부동산에 접근하는 것을 막을 수는 없습니다. ES2019에서 개인 클래스 필드는 해시# 접두사를 사용하여 정의됩니다.
<code class="language-javascript">let don = new Human('Don');
don.speak('anyone'); // Don says "nothing of interest" to anyone
don.eats = 'burgers';
console.log( don.dinner ); // Don eats burgers for dinner.</code>
<code class="language-javascript">class Animal {
constructor(name = 'anonymous', legs = 4, noise = 'nothing') {
this.type = 'animal';
this.name = name;
this.legs = legs;
this.noise = noise;
}
speak() {
console.log(`${this.name} says "${this.noise}"`);
}
walk() {
console.log(`${this.name} walks on ${this.legs} legs`);
}
}</code>
예, JavaScript 클래스는 개인 및 공공 분야를 모두 가질 수 있습니다. 공공 분야는 개인 분야와 같은 방식으로 선언되지만 해시 (#) 접두사는 없습니다. 클래스 내부에서만 액세스 할 수있는 개인 필드와 달리 공공 필드에 액세스하고 클래스 내부 및 외부에서 수정할 수 있습니다.
이 응답은 원래 이미지 형식과 배치를 유지하고 원래의 의미를 보존하면서 텍스트를 역설적으로 표현합니다.
위 내용은 JavaScript의 새로운 개인 클래스 필드 및 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!