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 までご連絡ください。

JavaScriptの文字列文字を交換しますMar 11, 2025 am 12:07 AM

JavaScript文字列置換法とFAQの詳細な説明この記事では、javaScriptの文字列文字を置き換える2つの方法について説明します：内部JavaScriptコードとWebページの内部HTML。 JavaScriptコード内の文字列を交換します最も直接的な方法は、置換（）メソッドを使用することです。 str = str.replace（ "find"、 "置換"）; この方法は、最初の一致のみを置き換えます。すべての一致を置き換えるには、正規表現を使用して、グローバルフラグGを追加します。 str = str.replace（/fi

jQuery日付が有効かどうかを確認しますMar 01, 2025 am 08:51 AM

単純なJavaScript関数は、日付が有効かどうかを確認するために使用されます。関数isvaliddate（s）{ var bits = s.split（ '/'）; var d = new Date（bits [2] '/' bits [1] '/'ビット[0]）; return !!（d &&（d.getmonth（）1）== bits [1] && d.getdate（）== number（bits [0]））; } //テスト var

jQueryは要素のパディング/マージンを取得しますMar 01, 2025 am 08:53 AM

この記事では、jQueryを使用して、DOM要素の内側のマージン値とマージン値、特に外側の縁と要素の内側の縁の特定の位置を取得して設定する方法について説明します。 CSSを使用して要素の内側と外側の縁を設定することは可能ですが、正確な値を取得するのは難しい場合があります。 // 設定 $（ "div.header"）。css（ "margin"、 "10px"）; $（ "div.header"）。css（ "padding"、 "10px"）; このコードはそうだと思うかもしれません

10 jQuery AccordionsタブMar 01, 2025 am 01:34 AM

この記事では、10個の例外的なjQueryタブとアコーディオンについて説明します。タブとアコーディオンの重要な違いは、コンテンツパネルの表示方法と非表示にあります。これらの10の例を掘り下げましょう。関連記事：10 jQueryタブプラグイン

10 jqueryプラグインをチェックする価値がありますMar 01, 2025 am 01:29 AM

ウェブサイトのダイナミズムと視覚的な魅力を高めるために、10の例外的なjQueryプラグインを発見してください！このキュレーションされたコレクションは、画像アニメーションからインタラクティブなギャラリーまで、多様な機能を提供します。これらの強力なツールを探りましょう。関連投稿： 1

ノードとHTTPコンソールを使用したHTTPデバッグMar 01, 2025 am 01:37 AM

HTTP-Consoleは、HTTPコマンドを実行するためのコマンドラインインターフェイスを提供するノードモジュールです。 Webサーバー、Web Servに対して作成されているかどうかに関係なく、HTTPリクエストで何が起こっているかをデバッグして正確に確認するのに最適です

カスタムGoogle検索APIセットアップチュートリアルMar 04, 2025 am 01:06 AM

このチュートリアルでは、カスタムGoogle検索APIをブログまたはWebサイトに統合する方法を示し、標準のWordPressテーマ検索関数よりも洗練された検索エクスペリエンスを提供します。驚くほど簡単です！検索をyに制限することができます

jQueryはscrollbarをdivに追加しますMar 01, 2025 am 01:30 AM

次のjQueryコードスニペットを使用して、Divコンテンツがコンテナ要素領域を超えたときにスクロールバーを追加できます。（デモンストレーションはありません、それを直接firebugにコピーしてください） // d =ドキュメント // w =ウィンドウ // $ = jQuery var contentarea = $（this）、 wintop = contentarea.scrolltop（）、 docheight = $（d）.height（）、 winheight = $（w）.height（）、 divheight = $（ '＃c

See all articles