Maison >interface Web >js tutoriel >Introduction aux méthodes d'implémentation de classes en JavaScript à l'aide de la syntaxe de classe
Introduction aux méthodes d'implémentation de classes en JavaScript à l'aide de la syntaxe de classe
- 不言original
- 2018-11-30 11:35:082944parcourir
Dans ECMAScript 6, la syntaxe de classe pour définir les classes en JavaScript a été ajoutée. Dans cet article, je présenterai le code pour implémenter les classes JavaScript en utilisant la syntaxe de classe.
Jetons d'abord un coup d'œil à la prise en charge du navigateur
Parce qu'il doit correspondre à ECMAScript 6, il est donc disponible dans les navigateurs suivants.
Microsoft Edge
Google Chrome 49 ou supérieur
Firefox 45 ou supérieur
Jetons un coup d'œil au format de syntaxe
class (类名){
constructor ([参数...]){
}
(类名1)([参数...]){
...(方法的实现)
}
(类名2)([参数...]){
...(方法的实现)
}
...
(类名n)([参数...]){
...(方法的实现)
}
}Regardons un exemple simple
Le code est le suivant
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr/>
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>Instructions :
Nous utilisons Le code suivant déclare et implémente cette classe.
Déclarez la classe "MyClass". MyClass a une méthode method01(). La méthode
method01() renvoie une chaîne "Hello JavaScript Class".
class MyClass {
method01() {
return "Hello JavaScript Class.";
}
}En cliquant sur le bouton, exécutez la fonction onButtonClick() suivante.
function onButtonClick() {
var mclass = new MyClass();
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}var mclass = new MyClass();
Le code ci-dessus crée une instance MyClass. L'objet MyClass créé (instance MyClass) est affecté à la variable mclass.
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();Appelez la méthode getElementById() et récupérez l'élément (div) avec l'identifiant "de sortie". Remplacez la valeur de retour de l'appel de la méthode method1() de la classe MyClass par l'obtention du HTML interne de l'élément. Modifiez le texte à la position de la balise div avec "output" comme identifiant en "Hello JavaScript Class".
Résultats en cours d'exécution
Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché.
Cliquez sur le bouton [Exec]. La chaîne qui affiche « sortie » est remplacée par « Hello JavaScript Class ». La création d'une instance d'une classe peut confirmer que la méthode peut être exécutée.
Enfin, regardons un exemple de constructeur
Nous présenterons le code d'implémentation d'une classe simple utilisant un constructeur.
Le code est le suivant :
<!DOCTYPE html><html><head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
class MyClass {
constructor(quote) {
this.iquote = quote;
}
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}
}
function onButtonClick() {
var mclass = new MyClass("～");
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}
</script>
</head>
<body>
<div id="output">output</div>
<hr />
<input type="button" value="Exec" onclick="onButtonClick();">
</body>
</html>Remarque : Le format de déclaration et d'implémentation de la classe est le même que le code précédent.
constructor(quote) {
this.iquote = quote;
}Utilisez le constructeur ci-dessus pour implémenter le constructeur. Dans ce code, la valeur donnée au paramètre constructeur est stockée dans la variable membre iquote. Les variables membres peuvent être déclarées en décrivant le nom de la variable après "this". La méthode
method01() {
return this.iquote + "Hello JavaScript Class." + this.iquote;
}method01() renvoie une chaîne "Hello JavaScript Class". La différence avec l'exemple précédent est que la chaîne donnée aux paramètres du constructeur est ajoutée avant et après la chaîne.
function onButtonClick() {
var mclass = new MyClass("～");
var elem = document.getElementById("output");
elem.innerHTML = mclass.method01();
}Cliquer sur le bouton exécutera la fonction onButtonClick() ci-dessus. Créez une instance de MyClass et attribuez la valeur de retour de la méthode méthode 1 à l'élément avec l'ID de sortie et affichez-la sur le navigateur.
Exécuter les résultats
Utilisez un navigateur Web pour afficher le fichier HTML ci-dessus. L'effet illustré ci-dessous sera affiché.
Cliquez sur le bouton [Exécuter]. La chaîne qui affiche « sortie » devient « ~Hello JavaScript Class.~ ». Une instance de la classe est créée et vous pouvez voir que la méthode est exécutable. Avant et après la chaîne "Hello JavaScript Class.", vous pouvez confirmer que "~" sera exécuté.
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!