js STUDIO

関数 (Function)

Functionコンストラクタは、新しいFunctionオブジェクトを生成します。JavaScriptの各関数は、実際にはFuncitonオブジェクトになります。

コンストラクタ 

  1. new Function ([arg1[, arg2[, ...argN]],] functionBody)
引数 説明
[arg1[, arg2[, ...argN]],] 引数名の形式として関数に使用される名前を指定します。 それぞれが正当なJavaScript識別に対応する文字列か、またはカンマ区切りの文字列のリストにしなければいけません。 (例えば、"x","theValu、または"a,b")
functionBody

JavaScript文で構成される関数の定義が含まれる文字列です。

説明

Functionコンストラクタによって作成されたFunctionオブジェクトは、 その関数が作成される際に解析されます。 それに比べ、function文による宣言とその呼び出しは、その他のコードと一緒に解析されるため、 このコンストラクタを使用する方法は非効率です。

Functionコンストラクタによって作成された関数は、それらの作成コンテキストへクロージャを作成しません。 それらは常にグローバル空間に作成されます。 それらの実行時には、Funcitonコンストラクタが呼び出されたスコープからのものでは無く、 それら自身のローカル変数とグローバル変数にのみアクセスします。 これは、関数式のコードでevalを使用した場合と異なります。

関数(new演算子を使用せずに)としてFunctionコンストラクタを実行すると、 コンストラクタとしてそれを実行したのと同じ効果が得られます。

プロパティと関数のメソッド

グローバルFunctionオブジェクトは、自身のメソッドまたはプロパティを持ちませんが、 関数自身が何らかのメソッドとプロパティをprototypeチェーンを通してFunction.prototypeから継承します。

プロパティ、メソッド

Functionインスタンスは、Function.prototypeからメソッドとプロパティを継承します。 全てのコンストラクタと同様に、全てのFunctionオブジェクトを変更するために、 コンストラクタのprototypeオブジェクトを変更する事が可能です。

  • プロパティ

  • .length

    このプロパティは、関数に期待される引数の数を示します。

  • メソッド(prototype)

  • .apply()

    関数を指定したthis値と、配列として提供された引数(arguments)(または配列のようなオブジェクト)で呼び出します。

  • .bind()

    呼び出されると新しい関数を作成し、その新しい関数が呼び出されると、thisに提供された値をセットし、その後に続く引数とともに実行されます。

  • .call()

    それぞれ個別に指定したthis値と引数によって、関数を呼び出します。

  • .toString()

    関数のソースコードを表す文字列を返します。

サンプル

例:Functionコンストラクタを使用した引数の指定

下記のコードは、2つの引数を取るFunctionオブジェクトを作成します。 

  1. // この例は、JavaScriptコンソール内で直接実行する事が可能です。
  3. // 2つの引数を受け取り、その引数の合計値を返す関数を作成します。
  4. var adder = new Function("a", "b", "return a + b");
  6. // 関数の呼び出し
  7. adder(2, 6);
  8. // > 8

引数名形式の引数"a"と"b"は、関数のボディ内"return a+b"で使用されます。

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

Functionコンストラクタを使用した関数の作成は、 実行可能なコードを持つ数の定まらない新しいオブジェクトを、 関数からグローバル空間へ直接作成する方法の1つです。 クロージャを避けたい場合、下記の例は各新しいクエリー(query)のためのFuncitonコンストラクタの呼び出し無しでは、 実現することは不可能です。 

  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>MDN Example - a recursive shortcut to massively modify the DOM</title>
  6. </head>
  8. <body>
  10. <div class="testClass">Lorem ipsum</div>
  11. <p>Some text</p>
  12. <div class="testClass">dolor sit amet</div>
  14. <script>
  15.   //domQuery定義
  16.   var domQuery = (function() {
  17.     var aDOMFunc = [
  18.           Element.prototype.removeAttribute,
  19.           Element.prototype.setAttribute,
  20.           CSSStyleDeclaration.prototype.removeProperty,
  21.           CSSStyleDeclaration.prototype.setProperty
  22.         ];
  24.     function setSomething (bStyle, sProp, sVal) {
  25.       var  bSet = Boolean(sVal), fAction = aDOMFunc[bSet | bStyle << 1],
  26.            aArgs = Array.prototype.slice.call(arguments, 1, bSet ? 3 : 2),
  27.            aNodeList = bStyle ? this.cssNodes : this.nodes;
  29.       if (bSet && bStyle) { aArgs.push(""); }
  30.       for (
  31.         var nItem = 0, nLen = this.nodes.length;
  32.         nItem < nLen;
  33.         fAction.apply(aNodeList[nItem++], aArgs)
  34.       );
  35.       this.follow = setSomething.caller;
  36.       return this;
  37.     }
  39.     function setStyles (sProp, sVal) { return setSomething.call(this, true, sProp, sVal); }
  40.     function setAttribs (sProp, sVal) { return setSomething.call(this, false, sProp, sVal); }
  41.     function getSelectors () { return this.selectors; };
  42.     function getNodes () { return this.nodes; };
  44.     return (function (sSelectors) {
  45.       var oQuery = new Function("return arguments.callee.follow.apply(arguments.callee, arguments);");
  46.       oQuery.selectors = sSelectors;
  47.       oQuery.nodes = document.querySelectorAll(sSelectors);
  48.       oQuery.cssNodes = Array.prototype.map.call(oQuery.nodes, function (oInlineCSS) { return oInlineCSS.style; });
  49.       oQuery.attributes = setAttribs;
  50.       oQuery.inlineStyle = setStyles;
  51.       oQuery.follow = getNodes;
  52.       oQuery.toString = getSelectors;
  53.       oQuery.valueOf = getNodes;
  54.       return oQuery;
  55.     });
  56.   })();
  58.   //domQuery実行
  59.   domQuery(".testClass").attributes("lang", "en")("title", "Risus abundat in ore stultorum")
  60.   .inlineStyle("background-color", "black")("color", "white")("width", "100px")("height", "50px");
  61. </script>
  62. </body>
  64. </html>

ブラウザ互換性

デスクトップ
機能 Chrome Firefox
(Gecko)		 IE Opera Safari
基本 ◯ ◯ ◯ ◯ ◯
モバイル
機能 Android Chrome for
Android		 Firefox
Mobile		 IE
Mobile		 Opera
Mobile		 Safari
Mobile
基本 ◯ ◯ ◯ ◯ ◯ ◯

関連項目

 Back to top

© 2017 Mozilla Contributors
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.

このページは、ページトップのURL先のMozilla Developer Network(以下、MDN)のコンテンツを翻訳した内容を基に構成されています。 構成について異なる点も含まれますので、下記の項目を確認し、必要に応じて元のコンテンツをご確認ください。 もし、誤訳などの間違いを見つけましたら、 @tomofまで教えていただければ幸いです。

  • 特定のブラウザに特化しすぎている情報やあまりにも古い情報、 または試験的に導入されているようなAPIや機能については、省略していることがあります。
  • 例やデモについて、実際にページ内で動作させる関係で一部ソースコードを変更している場合や、 その例で使用しているコンテンツの単語や文章などを日本人向けに変更しいてる場合があります。
  • MDNの更新頻度が高いため、元のコンテンツと比べ情報が古くなっている可能性があります。
  • "訳注:"などの断わりを入れた上で、日本人向けの情報の追記を行っている事があります。