Maison interface Web js tutoriel Explication détaillée du mot-clé de classe dans ES6

Explication détaillée du mot-clé de classe dans ES6

Jan 18, 2018 am 09:55 AM
class 关键字 详解

La classe est l'une des fonctionnalités les plus importantes introduites par es6. Avant qu'il y ait une classe, nous ne pouvions simuler des classes que via la chaîne de prototypes. Cet article présente principalement le mot-clé class dans ES6. Class est l'une des fonctionnalités les plus importantes introduites par es6. Cet article vous donne une explication détaillée à travers un exemple de code. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra aider tout le monde.

1. Introduction

  //定义类
  class Point {
   constructor(x, y) {
   this.x = x;
   this.y = y;
   }
   toString() {
   return '(' + this.x + ', ' + this.y + ')';
   }
  }
Copier après la connexion

En plus de la méthode de construction, la classe Point définit également une méthode toString. Notez que lors de la définition d'une méthode "classe", vous n'avez pas besoin d'ajouter le mot-clé function devant, il suffit de mettre directement la définition de la fonction. De plus, il n’est pas nécessaire de séparer les méthodes par des virgules, sinon une erreur sera signalée.

 //类的数据类型就是函数,类本身就指向构造函数。用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
  class Bar {
   doStuff() {
   console.log('stuff');
   }
  }
  var b = new Bar();
  b.doStuff() // "stuff"
Copier après la connexion

2. Mode strict

En interne, le mode par défaut des classes et des modules est le mode strict, il n'est donc pas nécessaire d'utiliser use strict pour spécifier le mode d'exécution. Tant que votre code est écrit dans une classe ou un module, seul le mode strict est disponible

3. Méthode constructeur

La méthode constructeur est la méthode par défaut de la classe lorsqu'une instance d'objet est. généré via la nouvelle commande, il est automatiquement appelé cette méthode. 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. ​​

class Point {
  }
  // 等同于
  class Point {
   constructor() {}//constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
  }
  //注意:类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。
Copier après la connexion

4. Objet instance de classe

Pour générer un objet instance d'une classe, utilisez la nouvelle commande.

À moins que les attributs d'une instance ne soient explicitement définis sur elle-même (c'est-à-dire définis sur cet objet), ils sont définis sur le prototype (c'est-à-dire définis sur la classe). ​​

 class Point {
   // ...
  }
  // 报错
  var point = Point(2, 3);
  // 正确
  var point = new Point(2, 3);
Copier après la connexion

5. Expression de classe

Le code suivant utilise une expression pour définir une classe. A noter que le nom de cette classe est MyClass au lieu de Me n'est disponible que dans le code interne de Class et fait référence à la classe actuelle.

 const MyClass = class Me {
   getClassName() {
   return Me.name;
   }
  };
  //采用 Class 表达式,可以写出立即执行的 Class。
  var person = new class {
   constructor(name) {
   this.name = name;
   }
   sayName() {
   console.log(this.name);
   }
  }('张三');
  person.sayName(); // "张三"
Copier après la connexion

6. Il n'y a pas de levage de variable

Il n'y a pas de levage de variable (hoist) dans la classe

Dans le code suivant, la classe Foo est utilisée en premier et défini en dernier, comme ceci Une erreur sera signalée car ES6 ne promeut pas la déclaration de classe en tête du code. La raison de cette disposition est liée à l'héritage mentionné ci-dessous. Il faut s'assurer que la sous-classe est définie après la classe parent.

  new Foo(); // ReferenceError
  class Foo {}
Copier après la connexion

7. Méthodes privées

Les méthodes privées sont une exigence courante, mais ES6 ne les fournit pas et ne peut être simulée que via des solutions de contournement.

Ajouter des méthodes privées

① Faites une différence dans la dénomination.

 ② Profitez du caractère unique de la valeur Symbol et nommez la méthode privée comme valeur Symbol.​​  

 /*命名上加以区别*/
  class Widget {
   // 公有方法
   foo (baz) {
   this._bar(baz);
   }
   // 私有方法
   _bar(baz) {
   return this.snaf = baz;
   }
   // ...
  }
  /*利用Symbol*/
  const bar = Symbol('bar');
  const snaf = Symbol('snaf');
  
  export default class myClass{
   // 公有方法
   foo(baz) {
   this[bar](baz);
   }
   // 私有方法
   [bar](baz) {
   return this[snaf] = baz;
   }
   // ...
  };
Copier après la connexion

8. Propriétés privées

Comme les méthodes privées, ES6 ne prend pas en charge les propriétés privées. Actuellement, il existe une proposition visant à ajouter des attributs privés aux classes. La méthode consiste à utiliser # avant le nom de l'attribut. ​

 class Point {
   #x;
   constructor(x = 0) {
   #x = +x; // 写成 this.#x 亦可
   }
   get x() { return #x }
   set x(value) { #x = +value }
  }
Copier après la connexion

9. Cela pointe vers

Si une méthode de classe contient ceci, elle pointe vers une instance de la classe par défaut.
Une fois cette méthode utilisée seule, une erreur est susceptible d'être signalée.

 class Logger {
   printName(name = 'there') {
   this.print(`Hello ${name}`);
   }
  
   print(text) {
   console.log(text);
   }
  } 
  const logger = new Logger();
  const { printName } = logger;
  printName();
  //上面代码中,printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。
  /*解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。*/
  class Logger {
   constructor() {
   this.printName = this.printName.bind(this);
   }  
   // ...
  }
Copier après la connexion

10. attribut de nom

Puisque, par essence, la classe ES6 n'est qu'une couche d'emballage pour le constructeur ES5, de nombreuses fonctionnalités de la fonction sont héritées par la classe. , y compris l'attribut name.
L'attribut name renvoie toujours le nom de la classe immédiatement après le mot-clé class.

 class Point {}
  Point.name // "Point"
Copier après la connexion

Recommandations associées :

Explication détaillée du super mot-clé dans la classe ES6

Classe de classe dans les exemples javascript ES6 d'utilisation get et set

Comment utiliser l'attribut class dans JS

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
2 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Repo: Comment relancer ses coéquipiers
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Comment obtenir des graines géantes
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Combien de temps faut-il pour battre Split Fiction?
3 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Explication détaillée de la fonction mode en C++ Explication détaillée de la fonction mode en C++ Nov 18, 2023 pm 03:08 PM

Explication détaillée de la fonction mode en C++ En statistiques, le mode fait référence à la valeur qui apparaît le plus fréquemment dans un ensemble de données. En langage C++, nous pouvons trouver le mode dans n’importe quel ensemble de données en écrivant une fonction de mode. La fonction mode peut être implémentée de nombreuses manières différentes, deux des méthodes couramment utilisées seront présentées en détail ci-dessous. La première méthode consiste à utiliser une table de hachage pour compter le nombre d'occurrences de chaque nombre. Tout d’abord, nous devons définir une table de hachage avec chaque nombre comme clé et le nombre d’occurrences comme valeur. Ensuite, pour un ensemble de données donné, nous exécutons

Explication détaillée de l'obtention des droits d'administrateur dans Win11 Explication détaillée de l'obtention des droits d'administrateur dans Win11 Mar 08, 2024 pm 03:06 PM

Le système d'exploitation Windows est l'un des systèmes d'exploitation les plus populaires au monde et sa nouvelle version Win11 a beaucoup attiré l'attention. Dans le système Win11, l'obtention des droits d'administrateur est une opération importante. Les droits d'administrateur permettent aux utilisateurs d'effectuer davantage d'opérations et de paramètres sur le système. Cet article présentera en détail comment obtenir les autorisations d'administrateur dans le système Win11 et comment gérer efficacement les autorisations. Dans le système Win11, les droits d'administrateur sont divisés en deux types : administrateur local et administrateur de domaine. Un administrateur local dispose de tous les droits d'administration sur l'ordinateur local

Explication détaillée du fonctionnement de la division dans Oracle SQL Explication détaillée du fonctionnement de la division dans Oracle SQL Mar 10, 2024 am 09:51 AM

Explication détaillée de l'opération de division dans OracleSQL Dans OracleSQL, l'opération de division est une opération mathématique courante et importante, utilisée pour calculer le résultat de la division de deux nombres. La division est souvent utilisée dans les requêtes de bases de données. Comprendre le fonctionnement de la division et son utilisation dans OracleSQL est donc l'une des compétences essentielles des développeurs de bases de données. Cet article discutera en détail des connaissances pertinentes sur les opérations de division dans OracleSQL et fournira des exemples de code spécifiques pour référence aux lecteurs. 1. Opération de division dans OracleSQL

Explication détaillée de la fonction reste en C++ Explication détaillée de la fonction reste en C++ Nov 18, 2023 pm 02:41 PM

Explication détaillée de la fonction reste en C++ En C++, l'opérateur reste (%) est utilisé pour calculer le reste de la division de deux nombres. Il s'agit d'un opérateur binaire dont les opérandes peuvent être n'importe quel type entier (y compris char, short, int, long, etc.) ou un type nombre à virgule flottante (tel que float, double). L'opérateur reste renvoie un résultat du même signe que le dividende. Par exemple, pour l'opération de reste des entiers, nous pouvons utiliser le code suivant pour implémenter : inta=10;intb=3;

Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP Explication détaillée du rôle et de l'utilisation de l'opérateur modulo PHP Mar 19, 2024 pm 04:33 PM

L'opérateur modulo (%) en PHP est utilisé pour obtenir le reste de la division de deux nombres. Dans cet article, nous discuterons en détail du rôle et de l'utilisation de l'opérateur modulo et fournirons des exemples de code spécifiques pour aider les lecteurs à mieux comprendre. 1. Le rôle de l'opérateur modulo En mathématiques, lorsqu'on divise un entier par un autre entier, on obtient un quotient et un reste. Par exemple, lorsque l’on divise 10 par 3, le quotient est 3 et le reste est 1. L'opérateur modulo est utilisé pour obtenir ce reste. 2. Utilisation de l'opérateur modulo En PHP, utilisez le symbole % pour représenter le module

Analyse détaillée du parcours d'apprentissage du langage C Analyse détaillée du parcours d'apprentissage du langage C Feb 18, 2024 am 10:38 AM

En tant que langage de programmation largement utilisé dans le domaine du développement de logiciels, le langage C est le premier choix de nombreux programmeurs débutants. L'apprentissage du langage C peut non seulement nous aider à acquérir des connaissances de base en programmation, mais également à améliorer nos capacités de résolution de problèmes et de réflexion. Cet article présentera en détail une feuille de route d'apprentissage du langage C pour aider les débutants à mieux planifier leur processus d'apprentissage. 1. Apprendre la grammaire de base Avant de commencer à apprendre le langage C, nous devons d'abord comprendre les règles de grammaire de base du langage C. Cela inclut les variables et les types de données, les opérateurs, les instructions de contrôle (telles que les instructions if,

Explication détaillée de la fonction d'appel système Linux system() Explication détaillée de la fonction d'appel système Linux system() Feb 22, 2024 pm 08:21 PM

Explication détaillée de la fonction d'appel système Linux system() L'appel système est une partie très importante du système d'exploitation Linux. Il fournit un moyen d'interagir avec le noyau système. Parmi elles, la fonction system() est l’une des fonctions d’appel système couramment utilisées. Cet article présentera en détail l’utilisation de la fonction system() et fournira des exemples de code correspondants. Concepts de base des appels système Les appels système sont un moyen permettant aux programmes utilisateur d'interagir avec le noyau du système d'exploitation. Les programmes utilisateur demandent au système d'exploitation en appelant des fonctions d'appel système

Remplacer le nom de classe d'un élément à l'aide de jQuery Remplacer le nom de classe d'un élément à l'aide de jQuery Feb 24, 2024 pm 11:03 PM

jQuery est une bibliothèque JavaScript classique largement utilisée dans le développement Web. Elle simplifie les opérations telles que la gestion des événements, la manipulation des éléments DOM et l'exécution d'animations sur les pages Web. Lorsque vous utilisez jQuery, vous rencontrez souvent des situations dans lesquelles vous devez remplacer le nom de classe d'un élément. Cet article présentera quelques méthodes pratiques et des exemples de code spécifiques. 1. Utilisez les méthodes RemoveClass() et AddClass(). JQuery fournit la méthode RemoveClass() pour la suppression.

See all articles