Functionコンストラクタは新規のFunctionオブジェクトを作成します。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 インスタンスから継承されているメソッドについては、Function インスタンスのメソッドを参照してください。Function オブジェクトは、自分自身のメソッドを持っていませんが、プロトタイプチェーンを通していくつかのメソッドを継承しています。
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 |
|---|---|---|---|---|---|
| 基本サポート | ? | (有) | ? | ? | ? |