클래스

ES6는 '클래스' 개념을 도입함 와 같이 배우게 될 것입니다. 여기서 클래스는 데이터, 속성이 이미 포함된 객체를 만들기 위한 템플릿 역할을 합니다. 해당 데이터의 조작과 관련된 방법을 제공합니다. 이러한 객체, 속성, 메서드를 총칭하여 '구성원'이라고 합니다. 의 클래스에 대해 자세히 알아보세요.

클래스를 정의하려면 class 키워드를 사용합니다. 권장사항 및 생성자 함수로 확립된 규약을 기반으로 하는 경우 대문자로 된 클래스의 식별자입니다.

class MyClass {}

수업의 목적은 고급 기술을 사용하여 더 간편하게 작업할 수 있는 방법을 제공하는 것입니다. 프로토타입 및 생성자 함수의 특징은 다음과 같습니다.

class MyClass {}

typeof MyClass;
> "function"

고급 JavaScript를 사용하기 위해 클래스가 부분적으로 추가되었기 때문입니다. 더 쉽고 매력적으로 살펴볼 수 있으며, "구분 슈가". 하지만 클래스는 프로토타입 상속. 클래스 문법 도입으로 오랫동안 유지되고 있는 설계를 해결할 기회 제공 자바스크립트에서 이전 버전과의 호환성 문제를 일으키지 않고 하나로 예를 들어 클래스 본문 안의 모든 코드는 항상 엄격 모드와는 다릅니다.

클래스의 인스턴스를 만들려면 new 연산자를 사용합니다.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

클래스 본문 내에 정의된 함수는 각 클래스의 메서드로 노출됩니다. 해당 클래스의 인스턴스입니다.

class MyClass {
    classMethod() {
        console.log( "My class method." );
    }
}

const myClassInstance = new MyClass();

myClassInstance.classMethod();
> "My class method."

클래스 내에 정의된 메서드는 결과 인스턴스입니다 Kubernetes의 특성상 prototype 체인이 없는 경우 결과 객체에서 직접 이러한 메서드를 호출할 수 있습니다.

class MyClass {
  classMethod() {
    console.log( "My class method." );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { }
    <prototype>: Object { … }
        classMethod: function classMethod()
        constructor: class MyClass { constructor(myPassedValue) }
        <prototype>: Object { … }

myClassInstance.classMethod();
> "My class method."

클래스의 인스턴스를 만들면 특수 constructor() 메서드가 호출됩니다. 필요한 '설정'을 새 인스턴스를 만들고 관련된 모든 속성에 적용됩니다. 생성된 인스턴스는 constructor() 메서드에서 사용할 수 있습니다.

class MyClass {
  constructor( myPassedValue ) {
    console.log( myPassedValue );
  }
}

const myClassInstance = new MyClass( "A string." );
> "A string."

클래스 본문 내에서 this 값은 인스턴스 자체를 참조합니다. this에 정의된 모든 속성이 있습니다.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProperty = myPassedValue;
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance;
> Object { instanceProperty: "A string." }

이러한 속성은 클래스 본문 내의 모든 메서드에서 사용할 수도 있습니다.

class MyClass {
  constructor( myPassedValue ) {
    this.instanceProp = myPassedValue;
  }
  myMethod() {
    console.log( this.instanceProp );
  }
}

const myClassInstance = new MyClass( "A string." );

myClassInstance.myMethod();
> "A string."

클래스의 constructor()를 정의하지 않으면 JavaScript 엔진이 는 빈 '기본값'을 가정합니다. constructor입니다. 각 클래스에는 하나의 특수 클래스만 있을 수 있습니다. constructor() 메서드를 호출합니다.

class MyClass {
  constructor() {}
  constructor() {}
}
> Uncaught SyntaxError: A class may only have one constructor

클래스 선언 또는 클래스 선언을 사용하여 클래스를 정의할 수 있습니다. 클래스 표현식의 예입니다. 앞의 예는 모두 클래스 선언이었고 new를 사용하여 이름을 호출해야 합니다. 클래스 표현식은 이름을 지정하지 않고 남겨두면 클래스에 대해 자세히 알아보세요.

let ClassExpression = class {
    constructor() {}
};

ClassExpression;
> class  {}

익명 클래스 표현식을 사용할 수 있는 한 가지는 다음과 같이 즉시 구성 클래스를 생성합니다.

function classMaker() {
  return class {
    constructor() {}
  };
}

let MyVariable = classMaker();

MyVariable;
> class  {}

클래스 선언을 사용하여 클래스를 다시 선언하면 문법 오류가 발생합니다.

class MyClass {
    constructor( ) {
        console.log( "My class." );
    }
};

class MyClass {
    constructor() {
        console.log( "My new class." );
    }
};
> Uncaught SyntaxError: redeclaration of class MyClass

그러나 클래스 표현식을 사용하면 클래스를 다시 정의할 수 있습니다.

let ClassExpression = class MyClass { };

ClassExpression = class MyOtherClass {
    constructor( myString ) {
        this.myProp = myString;
    }
};

new ClassExpression( "String." );
> MyOtherClass {myProp: 'String.'}

클래스가 선언했습니다. 그러나 클래스 표현식의 할당된 이름은 주로 디버깅을 더 용이하게 하기 위함입니다.

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

클래스 표현식을 사용하여 변수를 초기화하면 호이스팅 규칙을 변수가 예상대로 따라옵니다. 클래스 선언은 동일한 '일시적 사각지대' let 및 const로 설정된 경우 현재 범위의 상단으로 끌어올려지지 않은 것처럼 동작하며, 즉, 클래스 선언 전에 클래스를 호출하면 오류가 발생합니다.

{
    let myVar = new MyClass( "Property string." );

    class MyClass {
        myProp;

        constructor( myString ) {
            this.myProp = myString;
        }
    };
};
> Uncaught ReferenceError: Cannot access 'MyClass' before initialization

이해도 확인