概要
JavaScriptの「メソッド」は、単に“関数をプロパティとして持つもの”ですが、
定義される場所や呼び出し方によって、その性質は大きく異なります。
本記事では、オブジェクトメソッド → プロトタイプメソッド → インスタンスメソッド → スタティックメソッド の順で整理し、
それぞれの構造・使い方・違いを具体例で理解します。
目次
- メソッドとは
-
JavaScriptにおけるメソッドの4分類
- オブジェクトメソッド
- プロトタイプメソッド
- インスタンスメソッド
- スタティックメソッド - 分類の関係図
- よく混同される用語と補足
- まとめ
- 参考リンク
メソッドとは
JavaScriptでは「オブジェクトのプロパティとして定義された関数」をメソッドと呼びます。
const user = {
name: "Taro",
greet() { // ← メソッド
console.log(`Hello, ${this.name}`);
}
};
user.greet(); // "Hello, Taro"
この「メソッド」は どこに定義されているか によって、
呼び出し方や this の指す対象が変わります。
JavaScriptにおけるメソッドの4分類
オブジェクトメソッド
単体のオブジェクト(リテラル・ビルトインオブジェクト) に直接定義されたメソッド。
インスタンス化せずに利用できます。
console.log("Hello World"); // console オブジェクトのメソッド
Math.min(3, 7, -2); // Math オブジェクトのメソッド
document.querySelector("#app"); // document オブジェクトのメソッド
- 定義場所:オブジェクトリテラルや組み込みオブジェクト本体
- 呼び出し方:
object.method() -
this:そのオブジェクト自身 - 代表例:
console.log(),Math.max(),JSON.parse(),document.querySelector()
💡 特徴
- クラスでもインスタンスでもない、単体オブジェクト固有の関数。
- “インスタンス不要で呼べる” ため、MDNなどでは「静的メソッド(static)」と呼ばれることもある。
プロトタイプメソッド
すべてのインスタンスで共有される関数。
実際のインスタンスメソッドの実体はここに定義されています。
Array.prototype.customLength = function() {
return `Length is ${this.length}`;
};
const arr = [1, 2, 3];
console.log(arr.customLength()); // "Length is 3"
- 定義場所:
Class.prototypeオブジェクト - 呼び出し方:
instance.method() -
this:インスタンス自身 - 代表例:
Array.prototype.map,String.prototype.slice
💡 特徴
- 全インスタンスが同じ関数を共有 → メモリ効率が高い
-
class構文では、prototypeに自動的に登録される
インスタンスメソッド
クラスやビルトインオブジェクトから生成された インスタンス(個体) が呼び出すメソッド。
const str = "apple,banana,grape";
const fruits = str.split(","); // ← インスタンスメソッド
console.log(fruits); // ["apple", "banana", "grape"]
- 定義場所:
Class.prototypeオブジェクト - 呼び出し方:
instance.method() -
this:インスタンス自身 - 代表例:
Array.map(),String.split(),Date.getFullYear()
💡 特徴
- 各インスタンスのデータを操作するメソッド。
- 内部的にはプロトタイプメソッドを参照しているため、定義は共通。
スタティックメソッド
クラス本体 に属するメソッド。
インスタンス化せずに直接呼び出すことができます。
class Car {
static create(name) { // ← スタティックメソッド
return new Car(name);
}
constructor(name) {
this.name = name;
}
}
const car = Car.create("Tesla");
- 定義場所:クラス定義内(
staticキーワード付き) - 呼び出し方:
Class.method() -
this:クラス本体 - 代表例:
Array.isArray(),Date.now(),Promise.all()
💡 特徴
- インスタンス不要で呼べる
- 共通的・ユーティリティ的な処理をまとめるのに使う
- 「オブジェクトメソッド」と違い、クラス構文で定義される
分類の関係図
JavaScriptのメソッド体系
┌─────────────────────────────────────────────────────┐
│ オブジェクト系メソッド (Object-based) │
│ ・オブジェクトメソッド → 特定オブジェクトに属する関数 │
│ ex) console.log(), Math.min(), JSON.parse() │
├─────────────────────────────────────────────────────┤
│ クラス系メソッド (Class-based) │
│ ・プロトタイプメソッド → prototype に定義される関数 │
│ ex) Array.prototype.map() │
│ ・インスタンスメソッド → 各インスタンスから呼ぶ │
│ ex) arr.map(), str.split() │
│ ・スタティックメソッド → クラス本体に属する関数 │
│ ex) Array.isArray(), Date.now() │
└────────────────────────────────────────────────────┘
よく混同される用語
Math.min() や JSON.parse() はクラスではないため厳密には「オブジェクトメソッド」ですが、
インスタンス不要で呼べる点から「静的メソッド(static)」と呼ばれることもあります。
まとめ
| 分類 | 所属 | 呼び出し方 | インスタンス要否 | 定義場所 | 代表例 |
|---|---|---|---|---|---|
| オブジェクトメソッド | 単体オブジェクト | object.method() |
❌ 不要 | オブジェクトリテラル |
console.log(), Math.max()
|
| プロトタイプメソッド | prototype共有領域 | instance.method() |
✅ 必要 | Class.prototype |
Array.prototype.map() |
| インスタンスメソッド | 各インスタンス | instance.method() |
✅ 必要 | Class.prototype |
"abc".split() |
| スタティックメソッド | クラス本体 | Class.method() |
❌ 不要 |
class (static) |
Array.isArray(), Date.now()
|