Aperçu
ES6 fournit une méthode d'écriture plus proche d'un langage orienté objet (remarque : JavaScript est essentiellement un langage basé sur les objets). La classe (class) est présentée comme un modèle pour les objets et les classes sont définies via le mot-clé class.
L’essence de la classe est la fonction.
Il peut être considéré 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. La plupart de ses fonctions peuvent être réalisées par ES5.La nouvelle méthode d'écriture de classe ne fait que rendre la méthode d'écriture du prototype d'objet plus claire et plus proche de la syntaxe de la programmation orientée objet.
Syntaxe de base des classes
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
// 调用方法
console.log(bobi.kill());
- Le code ci-dessus définit une "classe", et vous pouvez voir qu'il contient une méthode constructeur, qui est la méthode constructeur, et le mot-clé this représente l'objet instance. Autrement dit, le constructeur ES5 Baby correspond à la méthode constructeur de la classe ES6 Baby.
- Vous pouvez voir qu'en plus de la méthode de construction, la classe Baby ci-dessus définit également une méthode kill. Notez que lors de la définition de la méthode de la classe, vous n'avez pas besoin d'ajouter le mot-clé function. Mettez simplement la définition. De plus, n'ajoutez pas de virgules entre les méthodes. Une erreur sera signalée .
Comme vous pouvez le constater, l'éditeur signale directement une erreur ici - Il convient de noter que nous devons également utiliser la nouvelle méthode pour utiliser la classe, ce qui est différent d'avant ES5 ;
var bobi = new Baby("bobi", 1);//这里正常
var lilm = Baby("lilm", 2)// Uncaught TypeError: Class constructor Baby cannot be invoked without 'new'
Nous devons faire attention à éviter d'utiliser des classes lorsque nous n'utilisons pas la nouvelle méthode dans le projet ;
4. Une autre chose à noter est que nous ne devons pas déclarer les classes à plusieurs reprises, sinon une erreur sera signalée.
class MM {
}
class MM {
}
Les déclarations en double ne sont pas autorisées
5. Les définitions de classe ne seront pas promues, ce qui signifie que la classe doit être définie avant l'accès, sinon une erreur sera signalée.
6. Les classes ne sont pas dénombrables
for (var key in Baby) {
console.log(key); // 没有任何内容打印出来
}
méthode constructeur
La méthode constructeur est la méthode par défaut de la classe et renvoie une référence à la fonction tableau qui a créé cet objet. Une classe doit avoir une méthode constructeur. Si elle n'est pas explicitement définie, une méthode constructeur vide sera ajoutée par défaut.
La méthode constructeur renvoie un objet instance par défaut, mais cela peut être modifié lorsque la méthode constructeur renvoie un type complexe .
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
// return 111; //返回Baby {name: "bobi", age: 1}
// return "asdfasd"; //返回Baby {name: "bobi", age: 1}
// return false; //返回Baby {name: "bobi", age: 1}
// return [1, 2] //返回[1,2]
// return {
// name: "111"
// } //返回{name:"111"}
return function fn() {
console.log(11);
} //返回函数
}
kill() {
return `${
this .name} like smile`
}
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(bobi);
La différence entre Constructeur et constructeur ordinaire : Le constructeur d'une classe ne peut pas être appelé sans utiliser new, et une erreur sera signalée. C'est une différence majeure avec les constructeurs ordinaires, qui peuvent être exécutés sans nouveau.
Il y a une démonstration ci-dessus mais pas ici ;
mot-clé statique
Les classes définissent des méthodes statiques via le mot-clé static. Les méthodes statiques ne peuvent pas être appelées sur des instances d'une classe, mais doivent être appelées via la classe elle-même.
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy"
}
//创建对象
var bobi = new Baby("bobi", 1);
console.log(Baby.mama);
console.log(bobi.mama);
Il ne peut être utilisé que lorsque la classe elle-même est appelée. L'objet instancié appelé depuis new est sous-défini ;
- Une méthode statique appelle d’autres méthodes statiques de la même classe à l’aide du mot-clé this.
// 定义类
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
console.log(Baby.father);//lucy honey
- Dans les méthodes non statiques, vous ne pouvez pas utiliser directement le mot clé this pour accéder aux méthodes statiques. Utilisez plutôt le nom de la classe à appeler ;
class Baby {
constructor(name, age) {
this.name = name;
this.age = age;
console.log(Baby.mama);
console.log(this.constructor.father);
//this指向新new出来的对象 this.constructor指向类
console.log(this.constructor);
}
kill() {
return `${
this .name} like smile`
}
static mama = "lucy";
static father = this.mama + " honey"
}
var boby = new Baby("boby", 1)
Résumer
Cet article se termine ici. Si vous avez des ajouts, veuillez les ajouter dans la zone de commentaires. Si cela vous est utile, veuillez l'aimer ~