JavaScriptの関数はなぜ「オブジェクト」なのか？仕様と設計思想から理解する

本記事には広告が含まれています

2025/05/07

JavaScriptの関数はなぜ「オブジェクト」なのか？仕様と設計思想から理解する

JavaScript では「関数＝オブジェクト」という設計が言語の柔軟性を支えています。プロパティを持ち、プロトタイプチェーンに参加しつつ () で実行できる ― まさに“呼び出せるオブジェクト”です。

この記事では ECMAScript 2023（ECMA‑262 14 th） を基準に、内部スロット・new 可否・パフォーマンス・ブラウザ互換性・実務ユースケースまで整理し、最新のベストプラクティスを盛り込みます。

new 可否を一望：[[Call]] / [[Construct]] と関数種別

関数ごとに new が使えるかを整理しました。内部スロットの有無と慣例を押さえれば、設計時の迷いが激減します。

通常の関数：new 可（[[Call]] と [[Construct]]）
アロー関数：new 不可（[[Call]] のみ）
Generator / Async Function：仕様上 new 可能でも、返り値がイテレーターや Promise であるためコンストラクタ利用は避けるのが慣例

この区分を頭に入れると、「アロー関数でクラス風に書けない理由」や「ジェネレーターを new しない方が良いワケ」が直感的に分かります。

内部スロットの役割：関数が実行されるまで

関数オブジェクトには [[Call]] が必須で、ここに実行手順が格納されます。コンストラクタ利用が許可される関数は追加で [[Construct]] を持ち、new 演算子がこれを呼び出します。アロー関数がインスタンス化出来ないのは [[Construct]] を欠くためです。

スロット構造を把握しておくと、フレームワーク内部でのバインディング処理や DI コンテナの挙動を読む際に役立ちます。

プロトタイプチェーン：Function.prototype を巡る旅

すべての関数は Function.prototype → Object.prototype → null という鎖を持ちます。Function.prototype には後述の call / apply / bind が実装され、全関数から利用可能です。

独自メソッドを追加すればグローバルに波及しますが、命名衝突のリスクが高いのでライブラリ開発では避けるのが常識になっています。

call / apply / bind 実践コードで理解

// call: this と個別引数を指定
function sum(a, b){ return a + b; }
console.log(sum.call(null, 2, 3)); // 5

// apply: 引数配列をまとめて渡す
const nums = [4, 6];
console.log(sum.apply(null, nums)); // 10

// bind: this を固定し部分適用
const user = { name: "Taro" };
function greet(){ console.log("Hello, " + this.name); }
const boundGreet = greet.bind(user);
boundGreet();           // Hello, Taro

bind はイベントハンドラやコールバック登録で this を安定させる定番手段です。近年はアロー関数で this 問題を避けるケースも増えましたが、部分適用という観点では依然有用です。

length・name・prototype：リフレクションの鍵

length はデフォルト値・レストを除いた仮引数数、name は関数名（推論名を含む）を返します。prototype は通常関数にのみ自動生成され、コンストラクタ呼び出し時に新オブジェクトの [[Prototype]] を初期化します。

アロー関数やメソッド短縮記法が new 不可なのはここにも理由があります。

アロー関数：静的 this と arguments 無しの世界

アロー関数は宣言時の レキシカル this を保持します。クラスのコールバックで this が意図せず window になる罠を回避できますが、クラスプロパティに書くとインスタンスごとに関数が生成されるためメモリ効率が落ちます。

arguments が無い点も要注意で、可変長は常に (...args) を使います。

Generator / Async / Async Generator：制御フローと非同期ストリーム

// Generator: ステートマシンに最適
function* counter(){
  let i = 0;
  while(true){ yield i++; }
}
// Async Function: 直感的な非同期
async function fetchJson(url){
  const r = await fetch(url);
  return r.json();
}
// Async Generator: ストリーミングに強い
async function* streamLines(res){
  for await(const chunk of res.body){
    yield decoder.decode(chunk);
  }
}

非同期ジェネレーターは古いブラウザで未対応の場合があるため、業務システムでは Babel・Core‑JS でのポリフィルを検討してください。

パフォーマンスとセキュリティ：JIT と動的コード生成

new Function() や eval() は動的コードを生成しますが、JIT コンパイラは未知の文字列を最適化対象から除外する事が多く、パフォーマンス低下を招きます。

さらに XSS リスクも高いため、テンプレート処理は Tagged Template Literal や AST 変換によるビルド時コード生成に移行するのが現代的です。

ブラウザ互換性とエンジン差異

Async Generator は Chromium 74+ / Firefox 57+ / Safari 14+ で正式実装。IE11 では未サポート。
bind は ES5 時点で実装済みだが、古い Android 2.x 系ブラウザではポリフィル必須。
Class Fields + Arrow メソッド は 2023 現在すべてのモダンブラウザで安定実装済み。
業務用ライブラリでは core‑js‑3 などでターゲット環境を明示し、不要なポリフィルを削減してバンドルサイズを最適化しましょう。