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ę
Które z poniższych zdań poprawnie definiuje klasę?
myClass = class {}
class MyClass {}
new class()
Ile metod constructor()
może mieć klasa?