Corsi

ES6 ha introdotto il concetto di "classi" in JavaScript, a differenza in altri linguaggi di programmazione. Qui, le classi sono funzioni speciali fungono da modelli per la creazione di oggetti che contengono già dati, proprietà associati a tali dati e i metodi relativi alla manipolazione di tali dati. Questi oggetti, proprietà e metodi sono chiamati collettivamente "membri" del .

Per definire una classe, utilizza la parola chiave class. Seguendo la best practice e convenzione stabilita dalle funzioni del costruttore integrate di JavaScript, inizia qualsiasi identificatore di una classe con una lettera maiuscola:

class MyClass {}

Lo scopo dei corsi è offrire modalità di lavoro più accessibili con caratteristiche dei prototipi e delle funzioni costruttore:

class MyClass {}

typeof MyClass;
> "function"

Perché i corsi sono stati in parte aggiunti per rendere il lavoro con JavaScript avanzato più semplici e accattivanti, a volte vengono definiti "zucchero sintattico". Tuttavia, non si limitano a fornire sintetiche utili per lavorare ereditarietà prototipale. Introduzione alla creazione di sintassi dei corsi per affrontare la progettazione di lunga data in JavaScript senza introdurre problemi di compatibilità con le versioni precedenti. Come uno Ad esempio, tutto il codice all'interno del corpo di una classe viene sempre valutato modalità rigida.

Per creare un'istanza di una classe, utilizza l'operatore new.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

Le funzioni definite all'interno di una classe sono esposte come metodi di di quella classe.

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

const myClassInstance = new MyClass();

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

Un metodo definito all'interno di una classe diventa un metodo sul prototipo del all'istanza risultante. A causa della natura prototype chain, puoi chiamare direttamente sull'oggetto risultante:

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

La creazione di un'istanza di una classe chiama un metodo constructor() speciale che esegue la "configurazione" necessaria per l'istanza appena creata e inizializza a tutte le proprietà associate. Eventuali argomenti passati alla classe quando di Compute Engine sono disponibili per il metodo constructor():

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

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

Nel corpo di una classe, il valore di this si riferisce all'istanza stessa, con qualsiasi proprietà definita su this esposta come proprietà di ogni istanza di quel corso:

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

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

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

Queste proprietà sono disponibili anche per tutti i metodi all'interno del corpo della classe:

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

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

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

Se non definisci un valore constructor() per la classe, il motore JavaScript presuppone un valore "default" vuoto constructor. Ogni corso può avere un solo metodo denominato constructor():

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

Puoi definire una classe utilizzando una dichiarazione di classe o una class express (espressione di classe). Gli esempi precedenti sono stati tutti dichiarazioni di classe, che richiedono di richiamare i nomi utilizzando new. Le espressioni di classe possono essere denominate o lasciato senza nome per creare un "anonimo" .

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

ClassExpression;
> class  {}

Puoi usare espressioni di classe anonime per le funzioni, costruisci classi "al volo":

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

let MyVariable = classMaker();

MyVariable;
> class  {}

La riemissione di una classe utilizzando una dichiarazione di classe causa un errore di sintassi:


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

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

Tuttavia, le espressioni di classe ti consentono di ridefinire una classe:

let ClassExpression = class MyClass { };

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

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

Non puoi richiamare un'espressione di classe denominata per nome come puoi fare con una dichiarazione. Tuttavia, il nome assegnato a un'espressione di classe è disponibile come dell'istanza creata, principalmente per semplificare il debug:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Quando si inizializza una variabile utilizzando un'espressione di classe, la classe regole di sollevamento vengono seguite come previsto. Le dichiarazioni dei corsi seguono stessa "zona morta temporale" regole come let e const, e comportarsi come se non fossero alzati al limite dell'ambito attuale, il che significa che richiamare una classe prima della dichiarazione della classe provoca un errore:

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

    class MyClass {
        myProp;

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

Verifica le tue conoscenze

Quale delle seguenti affermazioni definisce correttamente una classe?

class MyClass {}
myClass = class {}
new class()

Quanti metodi constructor() può avere una classe?

Uno
Nessuno
Illimitato