W tym samouczku dowiesz się o klasach JavaScript na przykładach.
Klasy to jedna z funkcji wprowadzonych w wersji ES6 języka JavaScript.
Klasa to plan obiektu. Możesz stworzyć obiekt z klasy.
Możesz myśleć o klasie jak o szkicu (prototypie) domu. Zawiera wszystkie szczegóły dotyczące podłóg, drzwi, okien itp. Na podstawie tych opisów budujesz dom. Dom jest obiektem.
Ponieważ z tego samego opisu można zbudować wiele domów, możemy utworzyć wiele obiektów z jednej klasy.
Tworzenie klasy JavaScript
Klasa JavaScript jest podobna do funkcji konstruktora Javascript i jest jedynie cukrem syntaktycznym.
Funkcja konstruktora jest zdefiniowana jako:
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // create an object const person1 = new Person();
Zamiast używać functionsłowa kluczowego, używasz go classdo tworzenia klas JS. Na przykład,
// creating a class class Person ( constructor(name) ( this.name = name; ) )
Słowo classkluczowe służy do tworzenia klasy. Właściwości są przypisywane w funkcji konstruktora.
Teraz możesz stworzyć obiekt. Na przykład,
// creating a class class Person ( constructor(name) ( this.name = name; ) ) // creating an object const person1 = new Person('John'); const person2 = new Person('Jack'); console.log(person1.name); // John console.log(person2.name); // Jack
Tutaj person1i person2 są obiektami Personklasowymi.
Uwaga : constructor()Metoda wewnątrz klasy jest wywoływana automatycznie za każdym razem, gdy tworzony jest obiekt.
Metody klas JavaScript
Korzystając z funkcji konstruktora, definiujesz metody jako:
// constructor function function Person (name) ( // assigning parameter values to the calling object this.name = name; // defining method this.greet = function () ( return ('Hello'' + ' ' + this.name); ) )
Łatwo jest zdefiniować metody w klasie JavaScript. Po prostu podajesz nazwę metody, po której następuje (). Na przykład,
class Person ( constructor(name) ( this.name = name; ) // defining method greet() ( console.log(`Hello $(this.name)`); ) ) let person1 = new Person('John'); // accessing property console.log(person1.name); // John // accessing method person1.greet(); // Hello John
Uwaga : Aby uzyskać dostęp do metody obiektu, musisz wywołać metodę, używając jej nazwy, po której następuje ().
Getters i Setters
W JavaScript metody pobierające pobierają wartość obiektu, a metody ustawiające ustawiają wartość obiektu.
Klasy JavaScript mogą zawierać metody pobierające i ustawiające. Używasz getsłowa kluczowego dla metod pobierających i setmetod ustawiających. Na przykład,
class Person ( constructor(name) ( this.name = name; ) // getter get personName() ( return this.name; ) // setter set personName(x) ( this.name = x; ) ) let person1 = new Person('Jack'); console.log(person1.name); // Jack // changing the value of name property person1.personName = 'Sarah'; console.log(person1.name); // Sarah
Podnoszenie
Klasę należy zdefiniować przed jej użyciem. W przeciwieństwie do funkcji i innych deklaracji JavaScript, klasa nie jest podnoszona. Na przykład,
// accessing class const p = new Person(); // ReferenceError // defining class class Person ( constructor(name) ( this.name = name; ) )
Jak widać, dostęp do klasy przed jej zdefiniowaniem generuje błąd.
„użyj ścisłego”
Na zajęciach zawsze obowiązuje zasada „używaj ściśle”. Cały kod wewnątrz klasy jest automatycznie w trybie ścisłym. Na przykład,
class Person ( constructor() ( a = 0; this.name = a; ) ) let p = new Person(); // ReferenceError: Can't find variable: a
Uwaga : klasa JavaScript to specjalny typ funkcji. I typeofpowraca operatorskie functiondla klasy.
Na przykład,
class Person () console.log(typeof Person); // function
