Comment utiliser les méthodes en JavaScript-js tutoriel-php.cn

Comment utiliser les méthodes en JavaScript

不言

Libérer： 2018-12-17 10:43:21

original

2798 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

Comment utiliser les méthodes en JavaScript