Zajęcia

W ES6 wprowadzono koncepcję „klas” w JavaScripcie, co różni się od w innych językach programowania. W tym przypadku klasy są specjalnymi funkcjami, które służą jako szablony do tworzenia obiektów, które już zawierają dane, właściwości powiązane z tymi danymi oraz metody związane z manipulacją tymi danymi. Te obiekty, właściwości i metody są zbiorczo nazywane „elementami” z zajęcia.

Aby zdefiniować klasę, użyj słowa kluczowego class. Postępując zgodnie ze sprawdzonymi metodami oraz konwencję ustaloną przez wbudowane funkcje konstruktora JavaScriptu, rozpocznij dowolny identyfikator klasy pisany wielką literą:

class MyClass {}

Zajęcia mają na celu ułatwienie pracy z zaawansowanymi zadaniami cechy prototypów i funkcji konstruktora:

class MyClass {}

typeof MyClass;
> "function"

Ponieważ klasy zostały częściowo dodane, aby umożliwić pracę z zaawansowanym JavaScriptem funkcje są łatwiejsze i atrakcyjniejsze, czasami określa się je jako "cukier składowy". Pamiętaj jednak: klasy to nie tylko przydatny skrót, który ułatwia pracę dziedziczenia prototypowego. Przedstawiamy możliwości tworzenia składni klas w celu rozwiązania problemu długotrwałego projektowania w JavaScripcie bez wprowadzania problemów ze zgodnością wsteczną. Jako jeden Na przykład cały kod w treści klasy jest zawsze oceniany w trybie ścisłym.

Aby utworzyć instancję klasy, użyj operatora new.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

Funkcje zdefiniowane w treści klasy są udostępniane jako metody poszczególnych wystąpienia danej klasy.

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

const myClassInstance = new MyClass();

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

Metoda zdefiniowana w klasie staje się metodą w prototypie instancji. Ze względu na charakter łańcucha prototypów, możesz wywołać bezpośrednio na utworzonym obiekcie:

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."

Utworzenie instancji klasy wywołuje specjalną metodę constructor(), która przeprowadza niezbędną „konfigurację”, dla nowo utworzonej instancji i inicjuje z powiązanymi usługami. Wszystkie argumenty przekazywane do klasy, gdy instancji są dostępne dla metody constructor():

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

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

Wartość this w treści klasy odnosi się do samej instancji, z dowolnymi właściwościami zdefiniowanymi w this ujawnionymi jako właściwości poszczególnych instancji tę klasę:

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

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

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

Te właściwości są też dostępne dla wszystkich metod w treści klasy:

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

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

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

Jeśli nie zdefiniujesz funkcji constructor() dla swojej klasy, mechanizm JavaScript przyjmuje pustą wartość „default” constructor Każde zajęcia mogą mieć tylko jeden element specjalny metoda o nazwie constructor():

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

Klasę możesz zdefiniować za pomocą deklaracji klasy lub class. Poprzednie przykłady to deklaracje klas, które wymagają wywoływania nazw za pomocą funkcji new. Wyrażenia klas mogą być nazwane lub pozostawiono bez nazwy, by utworzyć „anonimowy” zajęcia.

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

ClassExpression;
> class  {}

Anonimowych wyrażeń klas można używać do funkcji, które buduj klasy „na bieżąco”:

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

let MyVariable = classMaker();

MyVariable;
> class  {}

Ponowne zadeklarowanie klasy za pomocą deklaracji klasy powoduje błąd składni:

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

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

Wyrażenia klas umożliwiają jednak ponowne zdefiniowanie klasy:

let ClassExpression = class MyClass { };

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

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

Nie możesz wywołać wyrażenia klasy nazwanej przez nazwę, tak jak w przypadku klasy tej deklaracji. Przypisana nazwa wyrażenia klasy jest jednak dostępna jako utworzonej instancji, głównie w celu ułatwienia debugowania:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Gdy zainicjujesz zmienną za pomocą wyrażenia klasy, para klucz-wartość reguł podnoszenia zgodnie z oczekiwaniami. Deklaracje klas są zgodne z ta sama „tymczasowa martwa strefa” reguły takie jak let i const, i zachowują się tak, jakby nie zostały wciągnięte na szczyt obecnego zakresu, co oznacza, że wywołanie klasy przed jej deklaracją powoduje błąd:

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

    class MyClass {
        myProp;

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

Sprawdź swoją wiedzę