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

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

JavaScriptでは、同じ関数でも呼び出し方によって「関数としての呼び出し」と「メソッドとしての呼び出し」という2つの使い方ができます。この2つの大きな違いは、関数内でthisが何を参照するかという点にあります。

2つの呼び出し方の違い

  • 関数としての呼び出し：関数名を直接記述して呼び出します（例：add(2, 3)）。この場合、thisはグローバルオブジェクト（ブラウザ環境ではwindow）を参照します。
  • メソッドとしての呼び出し：オブジェクトのプロパティ経由で呼び出します（例：obj.welcome()）。この場合、thisはそのオブジェクト自身を参照するため、オブジェクトが持つプロパティにアクセスできます。

以下は、両方の呼び出し方を実際に試すサンプルコードです。

サンプルコード

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .result{
    font-size: 20px;
    font-weight: 500;
  }
</style>
</head>
<body>
<h1>Invoke a function as function and method</h1>
<div style="color: green;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
Click on the above button to invoke function as function and method
</h3>
<script>
  let resEle = document.querySelector(".result");
  function add(a,b){
    return a+b;
  }
  let obj = {
    firstName:'Rohan',
    lastName:'Sharma',
    welcome(){
      return 'Welcome '+this.firstName+' '+this.lastName;
    }
  }
  document.querySelector(".Btn").addEventListener("click", () => {
    resEle.innerHTML = 'Function invocation add(2,3) : ' + add(2,3) + '<br>';
    resEle.innerHTML += 'Method invocation obj.welcome() : ' + obj.welcome() + '<br>';
  });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで開くと、次のような画面が表示されます。

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

「CLICK HERE」ボタンをクリックすると、関数としての呼び出し結果（add(2,3)の計算結果「5」）と、メソッドとしての呼び出し結果（obj.welcome()による「Welcome Rohan Sharma」というメッセージ）が表示されます。

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

このように、関数を単独で呼び出すか、オブジェクトのメソッドとして呼び出すかによって、thisの参照先が変わることを理解しておくと、JavaScriptのオブジェクト指向プログラミングがより深く理解できるようになります。

  1. JavaScriptのpopメソッドとは？基本の構文と使い方をわかりやすく解説

    JavaScriptの配列には、データを操作するためのさまざまなメソッドが用意されています。その中のひとつがpopメソッドです。Web開発者は、配列から最後の要素を取り除きたいときや、取り除いた要素を使って何か処理を行いたいときに、このメソッドを活用します。本記事では、popメソッドの基本的な使い方を具体例とともにわかりやすく解説します。 popメソッドの構文 popメソッドの構文は非常にシンプルです。定義上、popメソッドは配列の最後の要素を削除し、その削除した要素を返す働きを持ちます。 let frozen = [ Anna, Elsa, Olaf, Kristoff, Sven ]

  2. ExcelのVLOOKUP関数の書き方・作り方・使い方を徹底解説

    Microsoft ExcelのVLOOKUP関数は、直訳すると「垂直検索（Vertical Lookup）」を意味します。表の縦方向（列）からデータを検索し、目的の値を取り出すための検索関数で、左端の列のデータを基準に対応する値を探し出します。列や行が大量にある大きな表を扱う場合、数百ものセルを目で追いかけて確認するのは非常に非効率です。そんなときに役立つのがVLOOKUP関数です。上から下へ値を照らし合わせて検索するため、必要なデータを素早く見つけられます。ExcelのVLOOKUP関数の作り方と使い方ここでは、7名の従業員の給与情報を検索するVLOOKUP関数を例に解説します。以下の2つ