この記事は編集レビューを必要としています。ぜひご協力ください。

JavaScript における関数の全ては、実際には Function オブジェクトです。

構文

new Function ([arg1[, arg2[, ...argN]],] functionBody)

引数

arg1, arg2, ... argN
仮引数の名前として関数で用いるための名前。各々は、妥当な JavaScript の識別子と一致する文字列か、コンマで区切られたそのような文字列のリストでなければなりません。例えば、"x"、"theValue" 、"a,b"。
functionBody
関数定義を形成する JavaScript の文を含む文字列。

説明

Function コンストラクタで生成された Function オブジェクトは、関数が作成されたときにパースされます。これは、関数を宣言し、それをコード内で呼び出すよりも効果的ではありません。なぜなら、function 文で宣言された関数はコードの他の部分と一緒にパースされるからです。

関数に渡された実引数の全ては、それらが渡された順番に、生成された関数内における仮引数の識別子の名前と同等に扱われます。

注記: Function コンストラクタによって生成された関数は、自身の生成コンテキストについてクロージャを生成しません。このような関数は常に window コンテキストで実行されます (関数のボディが "use strict"; 文で始まる場合を除きます。この場合はコンテキストが undefined になります)。

(new 演算子を用いずに) 関数として、Function コンストラクタを実行することは、コンストラクタとして実行することと同じです。

Function のメソッドやプロパティ

グローバル Function オブジェクトは独自のメソッドやプロパティは持ちませんが、Function.prototype からのプロトタイプチェーンを通じていくつかのメソッドやプロパティを継承しています。

Function プロトタイプオブジェクト

プロパティ

Function インスタンスから継承されているプロパティについては、Function インスタンスのプロパティを参照してください。

prototype
Function オブジェクトの全ての拡張を可能にします。

Function.prototype から継承されるプロパティ

メソッド

Function インスタンスから継承されているメソッドについては、Function インスタンスのメソッドを参照してください。

Function オブジェクトは、自分自身のメソッドを持っていませんが、プロトタイプチェーンを通していくつかのメソッドを継承しています。

Function.prototype から継承されるメソッド
Object.prototype から継承されるメソッド

 

Function インスタンス

Function インスタンスは Function.prototype を継承します。 すべてのコンストラクタと同様に、コンストラクタのプロトタイプオブジェクトを変更することで、すべての Function インスタンス が変更が加えられます。

例

Function コンストラクタの引数を指定する

次のコードは、2 つの引数を受け取る Function オブジェクトを生成します。

// 例は JavaScript コンソールで直接実行できます

// 2 つの引数を受け取って、引数の合計を返します
var adder = new Function("a", "b", "return a + b");

// 関数の呼び出し
adder(2, 6);
// > 8

引数 "a" と "b" は、"return a + b" という関数の中身において使用される仮引数の名前です。

大規模に DOM を変更する再帰的なショートカット

Function コンストラクタによる関数の生成は、実行可能なコードを伴う不特定の数の新たなオブジェクトを、関数からグローバルスコープへ直接作成する方法のひとつです。クロージャを避けたい場合に以下の例 (DOM を大規模に変更するための再帰的なショートカット) は、各々の新たなクエリのための Function コンストラクタの呼び出しなしには実現できません。

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MDN Example - a recursive shortcut to massively modify the DOM</title>
<script type="text/javascript">
var domQuery = (function() {
  var aDOMFunc = [
        Element.prototype.removeAttribute,
        Element.prototype.setAttribute,
        CSSStyleDeclaration.prototype.removeProperty,
        CSSStyleDeclaration.prototype.setProperty
      ];

  function setSomething (bStyle, sProp, sVal) {
    var  bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1],
         aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
         aNodeList = bStyle ? this.cssNodes : this.nodes;

    if (bSet && bStyle) { aArgs.push(""); }
    for (
      var nItem = 0, nLen = this.nodes.length;
      nItem < nLen;
      fAction.apply(aNodeList[nItem++], aArgs)
    );
    this.follow = setSomething.caller;
    return this;
  }

  function setStyles (sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  function setAttribs (sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  function getSelectors () { return this.selectors; };
  function getNodes () { return this.nodes; };

  return (function (sSelectors) {
    var oQuery = new Function("return arguments.callee.follow.apply(arguments.callee, arguments);");
    oQuery.selectors = sSelectors;
    oQuery.nodes = document.querySelectorAll(sSelectors);
    oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function (oInlineCSS) { return oInlineCSS.style; });
    oQuery.attributes = setAttribs;
    oQuery.inlineStyle = setStyles;
    oQuery.follow = getNodes;
    oQuery.toString = getSelectors;
    oQuery.valueOf = getNodes;
    return oQuery;
  });
})();
</script>
</head>

<body>

<div class="testClass">Lorem ipsum</div>
<p>Some text</p>
<div class="testClass">dolor sit amet</div>

<script type="text/javascript">
  domQuery(".testClass").attributes("lang", "en")("title", "Risus abundat in ore stultorum")
  .inlineStyle("background-color", "black")("color", "white")("width", "100px")("height", "50px");
</script>
</body>

</html>

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート (有) (有) ? ? ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート ? (有) ? ? ?

関連情報

ドキュメントのタグと貢献者

タグ: 
 このページの貢献者: YuichiNukiyama, lv7777, teoli, yyss, ethertank, suzukaze, Potappo, Skorney, Mgjbot, Okome
 最終更新者: YuichiNukiyama,