La classe es6 est-elle une fonction ?

La classe es6 est une fonction. Dans es6, la classe (class) a été introduite comme modèle pour les objets. Les classes peuvent être définies via le mot-clé class La syntaxe est "class class name {...} ; l'essence de la classe est une fonction (function), qui est une. sucre syntaxique. La couche inférieure est créée via le "constructeur".

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

Dans ES6, la classe (Class). comme modèle d'objet, et la classe peut être définie via le mot-clé class. L'essence de la classe est la fonction

Elle peut être considérée comme un sucre de syntaxe, et sa couche inférieure est toujours via un constructeur. > Créé pour rendre l'écriture de prototypes d'objets plus claire et plus proche de la syntaxe de la programmation orientée objet

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    return this.name;
}

const xiaoming = new Person('小明', 18);
console.log(xiaoming);

Le code ci-dessus est implémenté à l'aide de la class d'ES6, qui est la suivante

class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    sayName() {
      return this.name;
    }
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }

console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true

méthode constructeur. , c'est-à-dire Constructeur, ce mot-clé représente l'objet d'instance. Le type de données de la classe est la fonction, et la classe elle-même pointe vers le constructeur, il n'est pas nécessaire d'ajouter une fonction devant, et il y en a. pas besoin de séparer les méthodes par des virgules. Erreur.

构造函数 去创建的，让对象原型的写法更加清晰、更像面向对象编程的语法。

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};

上面代码用ES6的classToutes les méthodes de la classe sont définies sur l'attribut prototype de la classe

let a = new A();
a.constructor === A.prototype.constructor // true

Appeler des méthodes sur l'instance de la classe appelle en fait la méthode sur le prototype

.

new A(); // ReferenceError
class A {}

L'instance de la classe

Sauf si elle est explicitement définie en elle-même (c'est-à-dire définie sur cet objet), elle est définie sur le prototype (c'est-à-dire définie sur la classe)

Remarque :

1. pas de promotion de variable dans la classe

{
  let A = class {};
  class B extends A {}
}

Parce que ES6 ne le fait pas. La déclaration de classe sera promue en tête du code. La raison de cette règle est liée à l'héritage.

class Animal {}
class Cat extends Animal { };

Le code ci-dessus ne signalera pas d'erreur, car lorsque B hérite de A, A l'a déjà Définition. Cependant, s'il y a une promotion de classe, le code ci-dessus signalera une erreur, car la classe sera promue en tête. du code, et la commande let n'est pas promue, donc lorsque B hérite de A, Foo n'a pas encore été défini

2 Si la méthode qui pointe vers une classe contient ceci, elle pointera vers une instance de la classe. par défaut. Cependant, vous devez être très prudent. Une fois cette méthode utilisée seule, une erreur est susceptible d'être signalée

L'héritage de Class peut être obtenu via le mot-clé extends

class Cat extends Animal {
    constructor(name, age, color) {
        // 调用父类的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 调用父类的toString()
    }
}

Le code ci-dessus définit une classe Cat. , qui hérite de toutes les propriétés et méthodes de la classe Animal via le mot-clé extends. Cependant, comme aucun code n'est déployé, les deux classes sont exactement les mêmes, ce qui équivaut à copier une classe Animal. Ensuite, nous ajoutons du code dans Cat. .

class Animal { /* ... */ }

class Cat extends Animal {
  constructor() {
  }
}

let cp = new Cat();
// ReferenceError

Le mot-clé super apparaît à la fois dans la méthode constructeur et dans la méthode toString. Il représente ici le constructeur de la classe parent et est utilisé pour créer un nouvel objet this de la classe parent.

Les sous-classes doivent appeler la super méthode dans la méthode constructeur, sinon une erreur sera signalée lors de la création d'une nouvelle instance. En effet, l'objet this de la sous-classe doit d'abord être façonné par le constructeur de la classe parent pour obtenir les mêmes attributs et méthodes d'instance que la classe parent, puis il est traité et les attributs et méthodes d'instance propres à la sous-classe sont ajoutés. Si la super méthode n’est pas appelée, la sous-classe n’obtiendra pas cet objet.

class Cat extends Animal {

}
// 等同于

class Cat extends Animal {
    constructor(...args) {
        super(...args);
    }
}

Cat hérite de la classe parent Animal, mais son constructeur n'appelle pas la super méthode, provoquant une erreur lors de la création d'une nouvelle instance.

Si la sous-classe ne définit pas de méthode constructeur, cette méthode sera ajoutée par défaut. Le code est le suivant. En d’autres termes, qu’elle soit explicitement définie ou non, toute sous-classe possède une méthode constructeur.

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正确
  }
}

Une autre chose à noter est que le constructeur es5 peut y accéder avant d'appeler le constructeur parent, mais le constructeur es6 ne peut pas y accéder avant d'appeler le constructeur parent (c'est-à-dire super).

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

Dans le code ci-dessus, la méthode constructeur de la sous-classe utilise le mot-clé this avant d'appeler super, et une erreur est signalée. Cependant, il est correct de le mettre après la méthode super.

Les méthodes statiques de la classe parent seront également héritées par la sous-classe.

rrreee

【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!