JavaScript でのメソッドの使用方法-jsチュートリアル-php.cn

JavaScript でのメソッドの使用方法

不言

リリース： 2018-12-17 10:43:21

オリジナル

2799 人が閲覧しました

メソッドはオブジェクトのプロパティに割り当てられた関数です。この記事では、関数ではなくオブジェクトのメソッドと呼ばれます。

JavaScript でのメソッドの使用方法でのメソッドの使用方法でのメソッドの使用方法

属性とは、あらかじめ設定された固有の情報（値）に名前（プロパティ名）を付加したものです。そのプロパティでは、関数は特に「メソッド」と呼ばれます。

具体的な例を見てみましょう

次のプログラムでは、信号機の青、黄、赤に基づいてオブジェクトを作成し、それを配置しますTraffic_light という変数。

<!DOCTYPE html>
<html>
  <head>
    <meta charset = "utf-8">
    <title>JavaScript でのメソッドの使用方法 でのメソッドの使用方法 でのメソッドの使用方法</title>
  </head>
  <body>
    <script>
      var traffic_light = {
        blue: "go",
        yellow: "slow down",
        red: "stop"
      }
    </script>
  </body>
</html>

ログイン後にコピー

ここに current というプロパティを追加しました。現在の信号機の色が含まれます。

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

ログイン後にコピー

信号機の色を変更する関数はchange_lightとして定義されています。次に、change_light というメソッド（関数）を呼び出して、この電流の値を変更します。

最初に関数change_lightを定義します

上記のプログラムで関数を引き続き使用し、関数を一時的にchange_lightとして定義しましょう。

change_light を呼び出す次の信号を考えて、その時点での内容に応じて、呼び出される次のプロパティの動作を決定します。

switch ステートメントを使用して、change_light を 4 つのモードに設定します。

current に含まれる属性が青色の場合、次の属性は黄色に変更されます。

current に含まれる属性が黄色の場合、次の属性は赤色に変更されます。

current に含まれる属性が赤の場合、次の属性は青に変更されます。

デフォルトは青です。

<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>

ログイン後にコピー

次に、console.log で current を呼び出して結果を確認します。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>

ログイン後にコピー

デフォルトの属性が blue に設定されているため、go として blue の値が出力されます。

JavaScript でのメソッドの使用方法でのメソッドの使用方法でのメソッドの使用方法

console.log を使用して呼び出しを 3 回繰り返します...

<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>

ログイン後にコピー

現在の変化は青→黄→→赤→青色の

# 値の出力は go->slow down->stop->go

JavaScript でのメソッドの使用方法でのメソッドの使用方法でのメソッドの使用方法

#最後に見てみましょう。 change_lightをtraffic_lightとして使用するメソッドの使用

何をするかというと、current: ""の後に属性名change_lightを設定し、次の関数を使用してそれを区切ります("など)。 :" で区切ってください)。 (この時点では、連続した関数名change_lightが重複しているので削除しても大丈夫です)

<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>

ログイン後にコピー

これで、teaffic_lightオブジェクトにはchange_lightというメソッドが追加されます。

consoe.log 内でも同様に呼び出します。この時間を4回繰り返します。

オブジェクト内の各プロパティを呼び出すときは、変数名に「.」を入力し、その後にプロパティ名を入力することでプロパティ値を呼び出すことができます。そこで、変数traffic_lightに含まれるオブジェクト内のメソッド(プロパティ)を呼び出したい場合は、次のようになります。

 <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>

ログイン後にコピー

実行結果は次のとおりです:

JavaScript でのメソッドの使用方法