JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptで関数を「関数」として呼び出す方法をわかりやすく解説

JavaScriptでは、関数をさまざまな形で呼び出すことができます。代表的な呼び出し方には、通常の関数としての呼び出し、メソッドとしての呼び出し、コンストラクタとしての呼び出しなどがあります。

ここで解説する「関数として呼び出す」とは、独自に定義したJavaScript関数を、ごく普通の関数と同じように呼び出すことを指します。具体的には、関数名の後ろに括弧 () を付け、必要に応じて引数を渡すだけで実行できます。これは最も基本的でシンプルな関数の呼び出し方です。

基本的な書き方

// 関数の定義
function Display() {
  document.write("Hello World!");
}

// 関数として呼び出す
Display();

このように、定義済みの関数名に括弧を付けて記述するだけで、その関数内の処理が実行されます。ボタンのクリックなど、イベント発生時に呼び出すケースもよく使われます。

実行例

次のコードでは、ボタンをクリックすると Display() 関数が呼び出され、「Hello World!」という文字列が画面に表示されます。実際に動作を確認してみてください。

<html>
   <head>
      <script>
         function Display()
         {
            document.write ("Hello World!");
         }
      </script>
   </head>
 
   <body>
      <p>次のボタンをクリックすると関数が呼び出されます</p>
      <form>
         <input type = "button" onclick = "Display()" value = "Display">
      </form>
   </body>
</html>

ポイントまとめ

  • 関数を呼び出すには、関数名の後に括弧 () を付けます。
  • 引数が必要な場合は、括弧の中に値を渡します（例：Display("こんにちは")）。
  • onclick 属性のように、イベントハンドラからも同じ形式で呼び出せます。
  • 括弧を付けずに関数名だけを記述した場合は、関数は実行されず、関数そのものが参照されるだけなので注意しましょう。
  1. JavaScriptで関数コンストラクターを使って関数を呼び出す方法とは？継承の仕組みを解説

    JavaScriptでは、関数を呼び出す方法は大きく分けて3つあります。1つ目は「関数として」、2つ目は「メソッドとして」、そして3つ目は「関数コンストラクターとして」呼び出す方法です。この中でも、関数コンストラクターを使った呼び出しは特に特別な存在です。なぜなら、この方法だけが「継承（インヘリタンス）」の仕組みを利用しているからです。実際にコンストラクター呼び出しを行うと、新しいオブジェクトが生成され、そのオブジェクトはコンストラクターが持つプロパティやメソッドを継承します。一方、最初の2つの呼び出し方法には、このような継承の仕組みは存在しません。サンプルコード以下の例では、まず通常の関数を

  2. JavaScriptで関数を「関数」として呼び出す方法と「メソッド」として呼び出す方法の違い

    JavaScriptでは、同じ関数でも呼び出し方によって「関数としての呼び出し」と「メソッドとしての呼び出し」という2つの使い方ができます。この2つの大きな違いは、関数内でthisが何を参照するかという点にあります。 2つの呼び出し方の違い 関数としての呼び出し：関数名を直接記述して呼び出します（例：add(2, 3)）。この場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。 メソッドとしての呼び出し：オブジェクトのプロパティ経由で呼び出します（例：obj.welcome()）。この場合、thisはそのオブジェクト自身を参照するため、オブジェクトが持つプロパ