Maison > Article > interface Web > Comment utiliser les méthodes en JavaScript

Comment utiliser les méthodes en JavaScript

不言original: 2018-12-17 10:43:212818parcourir

Les méthodes sont des fonctions affectées aux propriétés d'un objet. Lorsqu'une fonction est définie dans les propriétés d'un objet, elle est appelée une méthode de l'objet et non une fonction. Cet article vous présentera l'utilisation des méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en JavaScript.

Comment utiliser les méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en JavaScript

Les attributs sont des informations spécifiques prédéfinies (valeur) auxquelles un nom (nom de l'attribut) est ajouté. Dans ses propriétés, la fonction est spécifiquement appelée « méthode ».

Regardons un exemple spécifique

Dans le programme suivant, nous créons un objet basé sur le feu tricolore bleu, jaune, rouge et le mettons dedans une variable appelée traffic_light.

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>Comment utiliser les méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en JavaScript</title>
  </head>
  <body>
    <script>
      var traffic_light = {
        blue: "go",
        yellow: "slow down",
        red: "stop"
      }
    </script>
  </body>
</html>

Nous avons ajouté une propriété appelée current ici. Contient la couleur du feu tricolore en courant.

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",    current: " "
  }
</script>

La fonction qui change la couleur du feu de circulation est définie comme change_light. Ensuite, modifiez la valeur de ce courant en appelant une méthode (fonction) appelée change_light.

Nous définissons d'abord la fonction change_light

En continuant à utiliser la fonction dans le programme ci-dessus, définissons temporairement la fonction comme change_light.

Considérons le prochain signal à appeler change_light pour déterminer le comportement de la prochaine propriété à appeler, en fonction de ce qui est en cours à ce moment-là.

Utilisez l'instruction switch pour définir change_light sur quatre modes.

Si l'attribut contenu dans current est bleu, l'attribut suivant sera changé en jaune.

Si l'attribut contenu dans current est jaune, l'attribut suivant sera changé en rouge.

Si l'attribut contenu dans current est rouge, l'attribut suivant sera changé en bleu.

La valeur par défaut est le bleu.

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }

  function change_light(){
      switch(traffic_light.current){
         case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;      
        case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;      
        case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;      
        default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }
</script>

Ensuite, vérifiez les résultats en appelant current dans console.log

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }
  function change_light(){
    switch(traffic_light.current){
      case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;
      case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;
      case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;
      default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }  change_light();
  console.log(traffic_light.current);
</script>

Parce que l'attribut par défaut est défini sur bleu, la valeur bleue de sortie est go.

Comment utiliser les méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en JavaScript

Utilisez console.log pour répéter l'appel trois fois...

<script>
  var traffic_light = {
    blue: "go",
    yellow: "slow down",
    red: "stop",
    current: " "
  }

  function change_light(){
    switch(traffic_light.current){
      case traffic_light.blue:
        traffic_light.current = traffic_light.yellow;
        break;
      case traffic_light.yellow:
        traffic_light.current = traffic_light.red;
        break;
      case traffic_light.red:
        traffic_light.current = traffic_light.blue;
        break;
      default:
        traffic_light.current = traffic_light.blue;
        break
    }
  }  
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  change_light();
  console.log(traffic_light.current);
  </script>

changements actuels de bleu->jaune->rouge - >bleu

La sortie de la valeur est go->ralentir->stop->go

Comment utiliser les méthodes en Comment utiliser les méthodes en Comment utiliser les méthodes en JavaScript

Enfin, allons regardez l'utilisation de la méthode pour créer change_light comme traffic_light

Ce qu'il faut faire est de définir le nom de l'attribut change_light après current: "" et de le séparer en utilisant la fonction suivante (comme avec " :" séparez-les). (À ce stade, le nom de fonction consécutif change_light est dupliqué, il peut donc être supprimé)

<script>
   var traffic_light = {
     blue: "go",
     yellow: "slow down",
     red: "stop",
     current: " ",
     change_light:function(){
       switch(traffic_light.current){
         case traffic_light.blue:
           traffic_light.current = traffic_light.yellow;
           break;
         case traffic_light.yellow:
           traffic_light.current = traffic_light.red;
           break;
         case traffic_light.red:
           traffic_light.current = traffic_light.blue;
           break;
         default:
           traffic_light.current = traffic_light.blue;
           break
       }
     }
   }
</script>

Maintenant, l'objet teaffic_light aura une méthode nommée change_light.

Nous l'appelons dans consoe.log de la même manière. Répétez cette fois quatre fois.

Lorsque vous appelez chaque propriété d'un objet, vous pouvez appeler la valeur de la propriété en mettant "." dans le nom de la variable suivi du nom de la propriété. Ainsi, lorsque l'on souhaite appeler une méthode (propriété) dans l'objet contenu dans la variable traffic_light, cela devient comme ceci.

 <script>
   var traffic_light = {
     blue: "go",
     yellow: "slow down",
     red: "stop",
     current: " ",
     change_light:function() {
       switch(traffic_light.current){
         case traffic_light.blue:
           traffic_light.current = traffic_light.yellow;
           break;
         case traffic_light.yellow:
           traffic_light.current = traffic_light.red;
           break;
         case traffic_light.red:
           traffic_light.current = traffic_light.blue;
           break;
         default:
           traffic_light.current = traffic_light.blue;
           break
       }
     }
   }   
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   traffic_light.change_light();
   console.log(traffic_light.current);
   </script>

Les résultats d'exécution sont les suivants :

Comment utiliser les méthodes en JavaScript

Le résultat ne change pas car la fonction change_light est juste une méthode de l'objet traffic_light.

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!

JavaScript switch console function 对象

Déclaration：

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

Article précédent：Comment utiliser JavaScript pour implémenter des avertissements contextuelsArticle suivant：Comment utiliser JavaScript pour implémenter des avertissements contextuels

Articles Liés

Voir plus