용 prototypal 상속:모든 객체의 속성을 상속 및 방법에서 프로토타입 개체입니다.

java 또는 Swift 와 같은 언어로 사용되는 객체를 만드는 청사진으로서의 전통적인 클래스는 JavaScript 에 존재하지 않습니다. 프로토 타입 상속은 객체만을 처리합니다.

프로토 타입 상속은 클래식 클래스 상속을 에뮬레이션 할 수 있습니다. 을 가지고 전통적인 수업을 자바스크립트,ES2015 표준 소개classsyntax:구문 위에 설탕 prototypal 상속입니다.,

이 게시물을 검토할 수 JavaScript 클래스:정의하는 방법은 클래스를 초기화하고,인스턴스의 정의 분야와 방법을 이해하고,민간 및 공공 분야,이해 정적 필드와 방법을 마련하고 있습니다.

1. 정의:class 키워드

특별한 키워드class정의 클래스에서 JavaScript:

class User { // The body of class}

이 코드는 위의 클래스를 정의User. 중괄호{ }클래스 본문을 구분합니다. 이 구문은 클래스 선언으로 명명됩니다.,

클래스 이름을 나타낼 의무가 없습니다. 클래스를 사용하여 표현을 할당할 수 있습니다 클래스의 변수:

const UserClass = class { // The body of class};

쉽게 내보낼 수 있습니다 클래스의 일부분으로 ES2015 모듈이 있습니다. 여기에는 구문에 대한 기본 수출:

export default class User { // The body of class}

및 라는 수출:

export class User { // The body of class}

클래스가 유용할 때 인스턴스를 만들어의 클래스입니다. 인스턴스는 클래스에서 설명하는 데이터 및 동작을 포함하는 객체입니다.,

new운영자 인스턴스화하는 클래스에서 JavaScript:instance = new Class().

예를 들어,인스턴스화할 수 있습니다User클래스를 사용하는new사를 진행하고 있습니다.

const myUser = new User();

new User()의 인스턴스를 만듭니다User클래스입니다.

2. 초기화:constructor()

constructor(param1, param2, ...)는 인스턴스를 초기화하는 클래스 본문의 특별한 메소드입니다., 즉,필드의 초기 값을 설정하거나 모든 종류의 객체 설정을 수행하는 곳입니다.

다음 예에서 생성자 초기 값을 설정합 분야의name

class User { constructor(name) { this.name = name; }}

User‘s 생성자가 하나의 매개 변수를name, 하는 데 사용되는 초기 값을 설정의 필드this.name.

생성자 내부this값은 새로 생성 된 인스턴스와 같습니다.,

인수를 사용하여 클래스를 인스턴스화가 생성자의 매개 변수:

class User { constructor(name) { name; // => 'Jon Snow' this.name = name; }}const user = new User('Jon Snow');

name매개 변수 내에 생성자가 값을'Jon Snow'. 클래스에 대한 생성자를 정의하지 않으면 기본 생성자가 생성됩니다. 기본 생성자는 인스턴스를 수정하지 않는 빈 함수입니다. 동시에 JavaScript 클래스는 최대 하나의 생성자를 가질 수 있습니다.

3. 필드

클래스 필드는 정보를 보유하는 변수입니다., 필드에 연결할 수 있체 2:

  1. 필드에 이 클래스의 인스턴스
  2. 필드에 이 클래스 자체(일명 static)

분야 또는 2 개의 레벨이 접근성:

  1. 공용:필드가 어디서나 액세스 할 수 있
  2. 개인용: 야만 액세스할 수 있는 내 몸의 등

3.1 공용 인스턴스 필드

자의 모습에서 다시 이전 코드:

class User { constructor(name) { this.name = name; }}

식this.name = name인스턴스를 만듭니다드name고 할당하여 그것은 초기 값입니다.,

나중에 액세스할 수 있습니다name를 사용하여 현장 속성 접근

const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name공공기 때문에 액세스할 수 있습니다 그것은 외부의User클래스는 몸입니다.

필드인 경우가 만든 암시적으로 내부에 생성자에서 같은 이전나리오 그것이 어려울 수 있을 파악하는 분야 목록입니다. 당신은 생성자의 코드에서 그들을 해독해야합니다. 더 나은 방법은 클래스 필드를 명시 적으로 선언하는 것입니다., 생성자가 무엇을하든 인스턴스는 항상 동일한 필드 집합을 갖습니다.

클래스 필드 제안을 사용하면 클래스 본문 내부의 필드를 정의 할 수 있습니다. 게다가,당신을 나타낼 수 있는 초기값이다.

class SomeClass { field1; field2 = 'Initial value'; // ...}

자 수정을User클래스고 선언하는 공개장name:

class User { name; constructor(name) { this.name = name; }}const user = new User('Jon Snow');user.name; // => 'Jon Snow'

name;내 몸의 클래스를 선언하는 공개장name.,

공용 분야를 선언한 방법으로 표현:빠른 보드의 선언은 이해하기 위해 충분히 클래스의 데이터 구조입니다.

또한 선언시 클래스 필드를 바로 초기화 할 수 있습니다. 

class User { name = 'Unknown'; constructor() { // No initialization }}const user = new User();user.name; // => 'Unknown'

name = 'Unknown'안에체 클래스를 선언 필드name와 초기화 값으로'Unknown'.

공개 필드의 액세스 또는 업데이트에 대한 제한이 없습니다., 생성자,메소드 내부 및 클래스 외부의 공용 필드에 값을 읽고 할당 할 수 있습니다.

3.2 개인 인스턴스 필드

캡슐화는 클래스의 내부 세부 사항을 숨길 수있는 중요한 개념입니다. 누군가가 사용하는 캡슐화된 클래스에 따라 대중에 인터페이스는 클래스가 제공되지 않을 구현 정보의 클래스입니다.

캡슐화를 염두에두고 구성된 클래스는 구현 세부 사항이 변경 될 때 업데이트하기가 더 쉽습니다., 객체의 내부 데이터를 숨기는 좋은 방법은 개인 필드를 사용하는 것입니다. 이들은 자신이 속한 클래스 내에서만 읽고 변경할 수있는 필드입니다. 클래스의 외부 세계는 개인 필드를 직접 변경할 수 없습니다.

개인 필드는 클래스 본문 내에서만 액세스 할 수 있습니다.

Prefix 필드 이름을 가진 특별한 기호#하는 것이 아니라,협력을 통해,예를 들어,#myField., 접두사#는 필드로 작업 할 때마다 보관해야합니다:선언하거나 읽거나 수정하십시오.

자는지 확인하는 필드#name설정할 수 있습면에서 인스턴스를 초기화:

#name는 프라이빗 필드입니다. User의 본문 내에서#name에 액세스하고 수정할 수 있습니다. 방법은getName()(더 많은 방법에 대해서는 다음 섹션)에 액세스할 수 있는 프라이빗 필드#name.,

지만 경우에 당신은에 액세스하려고 하는 프라이빗 필드#name외부의User등 신체,구문 오류가 발생합니다:SyntaxError: Private field '#name' must be declared in an enclosing class.

3.3Public static fields

클래스 자체의 필드 인 정적 필드를 정의 할 수도 있습니다. 이것들은 클래스 상수를 정의하거나 클래스에 특정한 정보를 저장하는 데 유용합니다.

를 만드는 정적 분야에서 JavaScript 를 클래스를 사용한 특별한 키워드static다음에 이름 필드:static myStaticField.,

사용자 유형을 나타내는 새 필드type를 추가합시다:admin 또는 regular. 정적 필드TYPE_ADMIN및TYPE_REGULAR는 편리한 상수 구분하는 사용자 유형

static TYPE_ADMIN및static TYPE_REGULAR정적인 변수의 내부User클래스입니다. 액세스하는 정적 필드에,당신은 당신을 사용하여 클래스에 의해 따른 이름 필드:User.TYPE_ADMIN및User.TYPE_REGULAR.

3.,4 개인 정적 필드

때로는 정적 필드조차도 숨기고 싶은 구현 세부 사항입니다. 이와 관련하여 정적 필드를 비공개로 만들 수 있습니다.

을 정적 분야인,접두 필드 이름으로#특별한 기호:static #myPrivateStaticField.

User클래스의 인스턴스 수를 제한하고 싶다고 가정 해 봅시다., 숨기기에 대한 정보를 인스턴스에 제한을 만들 수 있습니다 개인 정적 필드:

정적 필드User.#MAX_INSTANCES설정의 최대 수를 허용되는 경우,동User.#instances정적 필드 계수는 실제 수의 인스턴스가 있습니다.

이러한 개인 정적 필드는User클래스 내에서만 액세스 할 수 있습니다. 외부 세계의 어떤 것도 한계 메커니즘을 방해 할 수 없습니다:그것은 캡슐화의 이점입니다.

4 입니다. 메서드

필드는 데이터를 보유합니다., 그러나 데이터를 수정하는 기능은 클래스의 일부인 특수 기능,즉 메소드에 의해 수행됩니다.

JavaScript 클래스는 인스턴스 및 정적 메서드를 모두 지원합니다.

4.1 인스턴스 메소드

인스턴스 메소드는 인스턴스 데이터에 액세스하고 수정할 수 있습니다. 인스턴스 메소드는 정적 메소드뿐만 아니라 다른 인스턴스 메소드를 호출 할 수 있습니다.,

예를 들어,정의하는 방법을getName()이름을 반환하는User등급:

에서는 클래스 메소드뿐만 아니라,생성자에서this값이 클래스의 인스턴스입니다. 사용this인스턴스에 액세스는 데이터:this.field,또는 다른 방법:this.method().,

자를 추가하는 새로운 방법nameContains(str)있는 하나의 매개 변수 및 통화에 또 다른 방법:

nameContains(str) { ... }는 방법을User등을 허용하는 하나의 매개 변수를str. 그 이상으로 인스턴스this.getName()의 다른 메소드를 실행하여 사용자의 이름을 얻습니다. 메서드는 비공개일 수도 있습니다. 메서드 private 접두사 이름을#로 만들려면. 이 메서드에는”079d492eb8″이 포함되어 있지 않으므로”079d492eb8″이 있습니다., 내 방법을nameContains(str)호출할인 방법 그러한 방법:this.#getName().

개인이므로#getName()는User클래스 본문 외부에서 호출 할 수 없습니다.

4.2Getter 및 setter

getter 및 setter 는 일반 필드를 모방하지만 필드에 액세스하고 변경하는 방법을 더 많이 제어 할 수 있습니다.

getter 는 필드 값을 얻으려는 시도에서 실행되고 setter 는 값을 설정하려는 시도에서 실행됩니다.,

하는지 확인name속성을User할 수 없는 빈자의 포장 프라이빗 필드#nameValue에 getter 및 setter:

get name() {...}getter 실행에 액세스할 때 필드의 값: user.name.

4.3 정적 메소드

정적 메소드는 클래스에 직접 첨부 된 함수입니다. 그들은 클래스의 인스턴스가 아닌 클래스와 관련된 논리를 보유합니다.,

를 만드는 정적 방법을 사용한 특별한 키워드static다음에 정기적 문법:static myStaticMethod() { ... }.

작업을 할 때는 정적 방법,거기에는 2 개의 간단한 규칙을 기억하십시오:

  1. 정적 방법에 액세스할 수 있는 정적 필드
  2. 정적 방법에 액세스할 수 없습니다 인스턴스가 필드가 있습니다.

예를 들어,를 만들자는 정적 방법는지 여부를 감지하는 사용자가 특정 이름으로 이미 촬영되었다.,

isNameTaken()정적 방법을 사용하는 정적 프라이빗 필드User.#takenNames를 확인 촬영한 이름입니다.

5. 상속:확장

자바 스크립트의 클래스는extends키워드를 사용하여 단일 상속을 지원합니다.

식class Child extends Parent { }Child클래스를 상속에서Parent생성자,필드와 방법을 마련하고 있습니다.

예를 들어,새로 만들어 보겠 아동 클래스를ContentWriter는 것이다:부모 classUser.,

ContentWriter에서 상속되User생성 방법은getName()필드name. 또한ContentWriter클래스는 새 필드posts를 선언합니다.

부모 클래스의 개인 멤버는 자식 클래스에 의해 상속되지 않습니다.

5.1 부모가 생성자:최고()에서 생성자를()

고 싶은 경우에는 전화 상위 생성자에 아동 클래스를 사용해야 합super()특별한 기능에서 사용할 수 있는 아이가 생성자입니다.,

예를 들어,만들자ContentWriter생성자를 호출하는 부모의 생성자User뿐만 아니라,초기화물 필드:

super(name)안에 아이스ContentWriter생성자를 실행하는 부모 클래스의User.

주는 내부의 아동 생성자를 실행해야 합super()을 사용하기 전에this키워드를 사용합니다. super()를 호출하면 부모 생성자가 인스턴스를 초기화하는지 확인합니다.,

class Child extends Parent { constructor(value1, value2) { // Does not work! this.prop2 = value2; super(value1); }}

5.2 부모스 슈퍼에서는 방법

경우에 액세스하려는 부모는 방법 안에 아이의 방법을 사용할 수 있는 특별한 바로 가기super.

getName()의 아이스ContentWriter에 액세스하는 방법을super.getName()에서 직접 상위 classUser.

이 기능을 메서드 재정의라고합니다.

정적 메서드에서도super를 사용하여 부모의 정적 메서드에 액세스 할 수 있습니다.

6., Object type checking: instanceof

object instanceof Class is the operator that determines if object is an instance of Class.

Let’s see instanceof operator in action:

user is an instance of User class, user instanceof User evaluates to true.

The empty object {} is not an instance of User, correspondingly obj instanceof User is false.,

instanceof는 다형성입니다:연산자는 부모 클래스의 인스턴스로 자식을 감지합니다.

writer는 자식 클래스ContentWriter의 인스턴스입니다. 연산자writer instanceof ContentWriter는true로 평가됩니다.

동시에ContentWriter는User의 자식 클래스입니다. 따라서writer instanceof User는true도 평가합니다. 인스턴스의 정확한 클래스를 결정하려면 어떻게해야합니까?, 사용할 수 있습니다constructor속성 및 비교와 직접 종류:

writer.constructor === ContentWriter; // => truewriter.constructor === User; // => false

7. 클래스 및 프로토 타입

자바 스크립트의 클래스 구문은 프로토 타입 상속에서 추상화하는 데 훌륭한 작업을 수행한다고 말해야합니다. class구문을 설명하기 위해 프로토 타입이라는 용어조차 사용하지 않았습니다.

그러나 클래스는 프로토 타입 상속의 맨 위에 구축됩니다. 모든 클래스는 함수이며 생성자로 호출 될 때 인스턴스를 만듭니다. 다음 두 코드 조각은 동일합니다.,

클래스 버전:

버전을 사용하여 시제품:

클래스의 구문은 방법으로 쉽게 작동하는 경우에 당신은 영어공부를 하고자 하는 분들에게 상속의 메커니즘에 자바나 스위프트 언어입니다.

어쨌든 자바 스크립트에서 클래스 구문을 사용하더라도 프로토 타입 상속을 잘 파악하는 것이 좋습니다.

8. Class features availability

이 게시물에 제시된 class features 는 ES2015 에 퍼져 있으며 3 단계에서 제안됩니다.,

의 끝에서 2019,클래스 기능이 있는 사이에 분할.

  • 공공 및 개인스턴스 분야의 클래스 분야의 제안
  • 개인스턴스 방법 및 접근은 부분의 클래스의 개인 방법을 제안
  • 공공 및 민간 정적 필드 및적인 방법들은 부품의 클래스의 정적 특징 제안
  • 나머지 부분의 ES2015 표준입니다.

9. 결론

JavaScript 클래스는 생성자로 인스턴스를 초기화하고 필드와 메소드를 정의합니다., static키워드를 사용하여 클래스 자체에서도 필드와 메소드를 첨부 할 수 있습니다.

상속은extends키워드:부모로부터 자식 클래스를 쉽게 만들 수 있습니다. super키워드는 자식 클래스에서 부모 클래스에 액세스하는 데 사용됩니다.

캡슐화를 활용하려면 클래스의 내부 세부 정보를 숨기려면 필드와 메소드를 비공개로 만드십시오. 개인 필드 및 메서드 이름은#로 시작해야 합니다., JavaScript 의 클래스는 점점 더 편리하게 사용할 수 있습니다.

개인 속성에 접두사를 붙이기 위해#를 사용하는 것에 대해 어떻게 생각하십니까?피>