JavaScriptの関数とメソッドの違いについて

js
タイトルの通りです。
JavaScriptの関数とメソッドの違いについて解説していきます。

結論からいうと、thisの参照する先が異なってきます。そのあたりについて重点的に書いていきます。

[スポンサーリンク]

もくじ

関数
メソッド
thisについて

関数

書き方はこれ1種類ではありませんが、一般的な関数の定義の仕方ですね。
こちらがいわゆる関数になります。

  function showlog() {
    console.log("関数です。");
  }

そして実行の仕方はこうです。これもよく見るやつですね。

showlog();

メソッド

では続いてはメソッドです。
先程の関数でやっていることと同じことをメソッドにしていきます。

var Obj = {
  showlog: function() {
    console.log("メソッドです。");
  }
};
Obj.showlog();

オブジェクトに上記のハイライトのように関数を定義すると、それはメソッドになります。

こちらの公式ページにもこのように書いています。

プロパティの値を関数にすることもでき、これはいわゆるオブジェクトのメソッドとなります。

関数をオブジェクトのプロパティにセットするとメソッドに昇格するということですね。

上記のソースコードでいえば、showlogのプロパティ値に関数を定義していますので、これはメソッドということですね。

上記を踏まえますと、こちらのようにオブジェクトを先に生成しておいて、2行目のようにプロパティ値に関数をセットすることができるということですね。
これもまたメソッドとなります。

  var obj = new Object();
  obj.show = showlog;
  obj.show();

  function showlog() {
    console.log("関数です。");
  }

ここまで見てみると、関数とメソッドの違いって読み方だけ?と思ってしまいそうです。

本当にそうなのでしょうか?

いえ、実は大きな違いがあるのです!

それはthisの使い方です。

正確にいうとどこを参照しているかが大きな違いになります。

thisについては後続で引き続き解説していきます。

thisについて

まずはこちらのソースコードを見て下さい。

Appleというオブジェクトにメソッドと関数の2つを定義していますね。

var value = "グローバル";

var Apple = {
  value: "apple",
  putlog: function() {
    console.log("ローカルのthis : " + this.value);

    function putlog() {
      console.log("グローバルのthis : " + this.value);
    }
    putlog();
  }
};
Apple.putlog();

6行目はメソッド内でthis.valueを参照しています。ここでは4行目のvalueの値が表示されます。
イメージとしてはこんな感じです。

では9行目の関数内のthis.valueはどこの値が表示されるのでしょうか?

これは1行目が表示されます。
イメージとしてはこんな感じです。

これが関数とメソッドでのthisの参照先の違いです。

関数のthisはグローバルを参照するのに対して、メソッドはオブジェクト内の変数を参照しています。

これが関数とメソッドの大きな違いになります。

thisの挙動についてこちらのサイトに非常にわかりやすい解説が載っています。

さいごに

Webサイトや本で関数・メソッドと書きわけているものがほとんどです。一見見た目は同じですが、それぞれに意味がちゃんとあるので理解を深めておくことをオススメします。

それでは!