Comment ES6 définit-il les classes ?

Dans ES6, la classe (class) a été introduite comme modèle pour les objets, et les classes peuvent être définies via le mot-clé "class". L'essence de la classe est la fonction, qui peut être considérée comme du sucre syntaxique, rendant l'écriture de prototypes d'objets plus claire et plus proche de la syntaxe de la programmation orientée objet.

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

Classe ES6

Dans ES6, la classe (class) a été introduite comme modèle pour les objets, et les classes peuvent être définies via le mot-clé "class".

L'essence de la classe est la fonction.

Fondamentalement, la classe ES6 peut être considérée comme un simple sucre de syntaxe. La plupart de ses fonctions peuvent être réalisées par ES5. La nouvelle méthode d'écriture de classe rend simplement la méthode d'écriture du prototype d'objet plus claire et ressemble davantage à la syntaxe de la programmation orientée objet. .

Utilisation de base

Définition de classe

Les expressions de classe peuvent être anonymes ou nommées.

// 匿名类
let Example = class {
    constructor(a) {
        this.a = a;
    }
}
// 命名类
let Example = class Example {
    constructor(a) {
        this.a = a;
    }
}

Déclaration de classe

class Example {
    constructor(a) {
        this.a = a;
    }
}

Points à noter : les déclarations répétables ne sont pas autorisées.

class Example{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared
 
let Example1 = class{}
class Example{}
// Uncaught SyntaxError: Identifier 'Example' has already been 
// declared

Points à noter :

Les définitions de classe ne seront pas promues, ce qui signifie que la classe doit être définie avant d'y accéder, sinon une erreur sera signalée.

Les méthodes de la classe ne nécessitent pas le mot-clé function.

Pas de point-virgule entre les méthodes.

new Example(); 
class Example {}

Le corps de la classe

Propriétés

prototype

Dans ES6, le prototype existe toujours Bien que les méthodes puissent être définies directement à partir de la classe, les méthodes sont en fait toujours définies sur le prototype. Remplacer la méthode/Ajouter une méthode lors de l'initialisation

Example.prototype={
    //methods
}

Ajouter une méthode

Object.assign(Example.prototype,{
    //methods
})

Propriété statique

Propriété statique : la propriété de la classe elle-même, c'est-à-dire la propriété (Class.propname) définie directement à l'intérieur de la classe, n'a pas besoin d'être instancié. ES6 stipule qu'il n'y a que des méthodes statiques à l'intérieur de Class et aucun attribut statique.

class Example {
// 新提案
    static a = 2;
}
// 目前可行写法
Example.b = 2;

Propriétés publiques

class Example{}
Example.prototype.a = 2;

Propriétés d'instance

Propriétés d'instance : Propriétés définies sur l'objet d'instance (this).

class Example {
    a = 2;
    constructor () {
        console.log(this.a);
    }
}

attribut name

renvoie le nom de la classe qui suit la classe (quand elle existe).

let Example=class Exam {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Exam
 
let Example=class {
    constructor(a) {
        this.a = a;
    }
}
console.log(Example.name); // Example

method

constructor method

constructor est la méthode par défaut de la classe et est appelée lors de la création d'un objet instancié de la classe.

class Example{
    constructor(){
      console.log('我是constructor');
    }
}
new Example(); // 我是constructor

Objet de retour

class Test {
    constructor(){
        // 默认返回实例对象 this
    }
}
console.log(new Test() instanceof Test); // true
 
class Example {
    constructor(){
        // 指定返回对象
        return new Test();
    }
}
console.log(new Example() instanceof Example); // false

Méthode statique

class Example{
    static sum(a, b) {
        console.log(a+b);
    }
}
Example.sum(1, 2); // 3

Méthode prototype

class Example {
    sum(a, b) {
        console.log(a + b);
    }
}
let exam = new Example();
exam.sum(1, 2); // 3

Méthode d'instance

class Example {
    constructor() {
        this.sum = (a, b) => {
            console.log(a + b);
        }
    }
}

Instanciation de classe

new

class doit être instancié via le nouveau mot-clé.

class Example {}
 
let exam1 = Example(); 
// Class constructor Example cannot be invoked without 'new'

Objets instanciés

Objets prototypes partagés

class Example {
    constructor(a, b) {
        this.a = a;
        this.b = b;
        console.log('Example');
    }
    sum() {
        return this.a + this.b;
    }
}
let exam1 = new Example(2, 1);
let exam2 = new Example(3, 1);
 
// __proto__ 已废弃，不建议使用
// console.log(exam1.__proto__ == exam2.__proto__); 
 
console.log(Object.getPrototypeOf(exam1) === Object.getPrototypeOf(exam2));// true
 
Object.getPrototypeOf(exam1).sub = function() {
    return this.a - this.b;
}
console.log(exam1.sub()); // 1
console.log(exam2.sub()); // 2

[Recommandations associées : tutoriel vidéo javascript, front-end web]

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!