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

ホームページ

ウェブフロントエンド

jsチュートリアル

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

不言

Dec 17, 2018 am 10:43 AM

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

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 でのメソッドの使用方法

関数change_lightはtraffic_lightオブジェクトの単なるメソッドであるため、結果は変わりません。

以上がJavaScript でのメソッドの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7711

Java チュートリアル

1640

CakePHP チュートリアル

1394

Laravel チュートリアル

1288

PHP チュートリアル

1232

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。