関数 (Function)

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function

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

コンストラクタ
説明
プロパティと関数のメソッド
プロパティ、メソッド
サンプル
ブラウザ互換性
関連項目

コンストラクタ

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オブジェクトを作成します。

// この例は、JavaScriptコンソール内で直接実行する事が可能です。

// 2つの引数を受け取り、その引数の合計値を返す関数を作成します。
var adder = new Function("a", "b", "return a + b");

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

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

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

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

<!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>
</head>

<body>

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

<script>
  //domQuery定義
  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;
    });
  })();

  //domQuery実行
  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)	IE	Opera	Safari
基本	◯	◯	◯	◯	◯

モバイル
機能	Android	Chrome for Android	Firefox Mobile	IE Mobile	Opera Mobile	Safari Mobile
基本	◯	◯	◯	◯	◯	◯

関数 (Function)

コンストラクタ

説明

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

プロパティ、メソッド

プロパティ

.length

メソッド(prototype)

.apply()

.bind()

.call()

.toString()

サンプル

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

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

ブラウザ互換性

関連項目