Classes

ES6 a introduit le concept de "classes" en JavaScript, ce qui diffère des cours dans d’autres langages de programmation. Ici, les classes sont des fonctions spéciales servent de modèles pour créer des objets contenant déjà des données, des propriétés associées à ces données, ainsi que les méthodes liées à leur manipulation. Ces objets, propriétés et méthodes sont collectivement appelés "membres". des .

Pour définir une classe, utilisez le mot clé class. Respecter les bonnes pratiques et les établie par les fonctions de constructeur intégrées de JavaScript, commencez toute identifiant d'une classe avec une lettre majuscule:

class MyClass {}

Les cours sont conçus pour offrir des moyens plus accessibles de travailler avec des caractéristiques des prototypes et des fonctions de constructeur:

class MyClass {}

typeof MyClass;
> "function"

Comme les classes ont été partiellement ajoutées pour faciliter l'utilisation de JavaScript fonctionnalités plus faciles et plus attrayantes, on les appelle parfois "sucre syntaxique". Toutefois, les classes ne se contentent pas de fournir un raccourci utile pour travailler avec héritage du prototype. L'introduction de la syntaxe des classes a créé des opportunités pour résoudre les problèmes de conception à long terme des problèmes de rétrocompatibilité en JavaScript sans introduire de problèmes de rétrocompatibilité. Comme un seul exemple, tout le code dans le corps d'une classe est toujours évalué dans mode strict.

Pour créer une instance d'une classe, utilisez l'opérateur new.

class MyClass {}

const myClassInstance = new MyClass();

myClassInstance;
> Object { }

Les fonctions définies dans le corps d'une classe sont exposées en tant que méthodes de chaque une instance de cette classe.

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

const myClassInstance = new MyClass();

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

Une méthode définie dans une classe devient une méthode sur le prototype du l'instance générée. En raison de la nature chaîne de prototype, vous pouvez appeler directement sur l'objet obtenu:

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 création d'une instance de classe appelle une méthode constructor() spéciale qui effectue toute "configuration" nécessaire pour l'instance nouvellement créée et s'initialise toutes les propriétés qui lui sont associées. Tous les arguments transmis à la classe lorsque la méthode sont disponibles pour la méthode constructor():

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

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

Dans le corps d'une classe, la valeur de this fait référence à l'instance elle-même. toutes les propriétés définies sur this étant exposées en tant que propriétés de chaque instance de cette classe:

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

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

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

Ces propriétés sont également disponibles pour toutes les méthodes dans le corps de la classe:

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

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

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

Si vous ne définissez pas de constructor() pour votre classe, le moteur JavaScript suppose une valeur "default" vide constructor Chaque classe ne peut avoir qu'un seul nommée constructor():

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

Vous pouvez définir une classe à l'aide d'une déclaration de classe ou d'une expression de classe. Les exemples précédents sont tous des déclarations de classe, qui nécessitent que les noms soient appelés à l'aide de new. Les expressions de classe peuvent être nommées ou sans nom pour créer un "anonyme" .

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

ClassExpression;
> class  {}

Vous pouvez utiliser des expressions de classe anonymes pour les fonctions construire des classes "à la volée" :

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

let MyVariable = classMaker();

MyVariable;
> class  {}

La redéclaration d'une classe à l'aide d'une déclaration de classe entraîne une erreur de syntaxe:

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

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

Cependant, les expressions de classe vous permettent de redéfinir une classe:

let ClassExpression = class MyClass { };

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

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

Vous ne pouvez pas appeler une expression de classe nommée par nom de la même manière qu'une classe la déclaration. Toutefois, le nom attribué à une expression de classe est disponible en tant que de l'instance créée, principalement pour faciliter le débogage:

let MyVariable = class MyClass {};

MyClass;
> Uncaught ReferenceError: MyClass is not defined

MyVariable;
> class MyClass {}

MyVariable.name;
> "MyClass"

Lorsque vous initialisez une variable à l'aide d'une expression de classe, règles de hissage de cette variable sont suivies comme prévu. Les déclarations de classe même "zone morte temporelle" telles que let et const, et se comportent comme s'ils n'avaient pas été hissé au sommet de leur champ d'application actuel, Cela signifie que l'appel d'une classe avant la déclaration de classe entraîne une erreur:

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

    class MyClass {
        myProp;

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

Testez vos connaissances