Core JavaScript 1.5 Reference:Functions

出典: MDC

[編集] 概要

一般的に言うと、関数とは外部 (再帰の場合は内部) から 呼ばれる ことのできる「サブプログラム」です。プログラムそのもののように、関数は関数本体と呼ばれる連続した文で構成されます。オブジェクトや値を関数に渡す事ができ、関数はオブジェクトか値を返す事ができます。

JavaScript において、関数は第一級オブジェクトです。すなわち、関数はオブジェクトであり、他のあらゆるオブジェクトと同じように操作したり渡したりする事ができます。具体的には、関数は Function オブジェクトです。

[編集] 一般

全ての関数は実際には Function オブジェクトです。Function オブジェクトのプロパティとメソッドについての情報は Function をご覧ください。

値を返すためには、返す値を指定する return 文が関数内になくてはなりません。値を返さない関数は undefined を返します。

オブジェクトではないパラメータ、例えば文字列、数値、真偽値などは、関数に 値によって 渡されます。値が関数に渡されると、そこで新しい変数に格納されます。関数が変数の値を変更しても、その変更はグローバルスコープもしくは呼び出し元の関数内に反映されません。オブジェクトであるパラメータ、例えばオブジェクト、配列、正規表現などは、関数に 参照によって 渡されます。関数にオブジェクトをパラメータとして渡して、その関数がオブジェクトのプロパティを変更すると、次の例にあるように、その変更を関数の外部から見る事が出来ます。

 function myFunc(theObject) {
    theObject.brand = "Toyota";
 }
 
 var mycar = {brand: "Honda", model: "Accord", year: 1998};
 alert(mycar.brand); // 'Honda' と表示される
 myFunc(mycar);      // オブジェクト mycar を関数に渡す
 alert(mycar.brand); // mycar の brand プロパティは関数によって変更されたので
                     // 'Toyota' と表示される

this キーワードは現在実行中の関数を参照しません。よって、関数内部であっても、名前によって Function オブジェクトを参照しなければなりません。別のやり方として、arguments.callee プロパティを使う事も出来ます。

[編集] 関数を定義する

関数を定義するのには 3 つの方法があります。

[編集] 関数宣言 (`function` 文)

関数を宣言するための特殊な構文があります。(詳細は function 文を参照)

function name([param[, param[, ... param]]]) {
   statements
}

name: 関数名。

param: 関数に渡される引数の名前。関数は最大 255 個の引数を持てます。

statements: 関数の本体を構成する文。

[編集] 関数式 (`function` 演算子)

関数式は、関数宣言と似ており、同じ構文を持っています。(詳細は function 演算子を参照)

function [name]([param] [, param] [..., param]) {
   statements
}

name: 関数名。省略する事ができ、その場合関数は無名関数と見なされます。

param: 関数に渡される引数の名前。関数は最大 255 個の引数を持てます。

statements: 関数の本体を構成する文。

[編集] `Function` コンストラクタ

他の全てのオブジェクトと同じように、new 演算子を使って Function オブジェクトを作成する事ができます。

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

arg1, arg2, ... argN: 関数で仮引数名として使われる名前。それぞれが、妥当な JavaScript 識別子に相当する文字列、もしくはそういった文字列のカンマで分割されたリストでなくてはなりません。例えば "x" 、"theValue"、もしくは "a,b" などです。

functionBody: 関数定義を構成する JavaScript 文を含む文字列。

Function コンストラクタを関数として (new 演算子を使わずに) 呼び出しても、コンストラクタとして呼び出すのと同じ効果があります。

[編集] `arguments` オブジェクト

arguments オブジェクトを使って、関数内部で関数の引数を参照することができます。arguments を参照して下さい。

[編集] スコープと関数スタック

[編集] 再帰

関数は自分自身を参照し、呼び出す事ができます。関数がそれ自身を参照するには 3 つの方法があります。

関数名
arguments.callee
その関数を参照するスコープ内変数

例えば、次のような関数定義を考えます。

var foo = function bar() {
   // ここで命令文が実行される
};

関数本体の内部では、次の 3 つは全て等価です。

bar()
arguments.callee()
foo()

自分自身を呼び出す関数の事を 再帰関数 といいます。いくつかの点で、再帰はループと類似しています。両方とも同じコードを複数回実行し、両方とも (無限ループ、この場合は無限再帰を回避するための) 条件を必要とします。例えば、次のループは、

var x = 0;
while (x < 10) { // "x < 10" はループ条件
   // 何かする
   x++;
}

再帰関数とその関数の呼び出しに変換する事ができます。

function loop(x) {
   if (x >= 10) // "x >= 10" は終了条件 ("!(x < 10)" と等価)
      return;
   // 何かする
   loop(x + 1); // 再帰呼び出し
}
loop(0);

しかしながら、単純な反復ループにできないアルゴリズムもあります。例えば、(DOM などの) ツリー構造の全てのノードを得るには、再帰を使うのがより簡単です。

function walkTree(node) {
   if (node == null) // 
      return;
   // ノードに対して何かする
   for (var i = 0; i < node.childNodes.length; i++) {
      walkTree(node.childNodes[i]);
   }
}

関数 loop と比べると、ここでは再帰呼び出し自体がそれぞれたくさんの再帰呼び出しを行っています。

どんな再帰アルゴリズムでも非再帰アルゴリズムに変換する事が可能ですが、ロジックが非常に複雑になったり、スタックの使用が必要になることがあります。実際、再帰それ自体がスタックを使用しています。関数スタックです。

次の例でスタック的な振る舞いを見る事ができます。

function foo(i) {
   if (i < 0)
      return;
   document.writeln('begin:' + i);
   foo(i - 1);
   document.writeln('end:' + i);
}
foo(3);

これは次のように出力されます。

begin:3
begin:2
begin:1
begin:0
end:0
end:1
end:2
end:3

[編集] 入れ子の関数とクロージャ

関数の内部に関数を入れ子にする事ができます。入れ子にされた (内側の) 関数は、それを含む (外側の) 関数に対してプライベートです。それは同時に クロージャ を形成します。

クロージャとは、自由変数と同時にその変数を束縛する (式を「閉じて」いる) 環境を持ち得る式 (主として関数) である。 [1]

入れ子にされた関数はクロージャであり、これは入れ子にされた関数がそれを含む関数の引数と変数を「継承」できるということを意味します。言い換えれば、内側の関数は外側の関数のスコープを持っています。

要約すると、

内側の関数には外側の関数内の文からのみアクセスできる。

内側の関数はクロージャを形成する。内側の関数は外側の関数の引数と変数を使う事ができるが、外側の関数は内側の関数の引数と変数を使う事はできない。

次の例は入れ子の関数を示しています。

function addSquares(a,b) {
   function square(x) {
      return x * x;
   }
   return square(a) + square(b);
}
a = addSquares(2,3); // 13 を返す
b = addSquares(3,4); // 25 を返す
c = addSquares(4,5); // 41 を返す

内側の関数がクロージャを形成するので、外側の関数を呼び出して、外側と内側の関数の両方の引数を指定する事ができます。

function outside(x) {
   function inside(y) {
      return x + y;
   }
   return inside;
}
result = outside(3)(5); // 8 を返す

[編集] メモリ効率を考慮する

inside が返された時に x が保持されているという事に注目してください。クロージャはそれが持っている全てのスコープ内の引数と変数を保持します。呼び出されるたびに違う引数が与えられる可能性があるので、クロージャは外側の関数が呼び出されるたびに作られなければなりません。言い換えると、outside の呼び出しはそれぞれクロージャを作ります。このため、クロージャは多くのメモリを消費する可能性があります。メモリが解放され得るのは、返された inside にアクセスできなくなった時だけです。この場合、inside のクロージャは result に保管されています。result はグローバルスコープにあるので、クロージャはスクリプトがアンロードされる (ブラウザではスクリプトを含むページが閉じられる時に起こる) まで残っています。

このように効率が悪いので、可能な限りクロージャを避けてください。すなわち、可能な限り関数を入れ子にするのは避けてください。例えば、次のような例を考えます。

function assignOnclick(element) {
   element.onclick = function() {
      this.style.backgroundColor = 'blue';
   };
}

これはクロージャを避ける為に書き換える事ができます。ただし内部の無名関数には名前を付けなければならず、assignOnclick に対してプライベートではなくなります。

function assignOnclick(element) {
   element.onclick = element_onclick;
}

function element_onclick() {
   this.style.backgroundColor = 'blue';
}

[編集] 多重に入れ子にされた関数

関数は多重に入れ子にすることができます。つまり、関数 (A) が関数 (B) を含み、関数 (B) が関数 (C) を含む事ができます。このとき関数 B と C はともにクロージャを形成するので、B は A にアクセスでき、C は B にアクセスできます。さらに、C がアクセスできる B は A にアクセスできるので、C は A にアクセスすることもできます。このように、クロージャは複数のスコープを持つ事ができます。クロージャはそれを内包する関数のスコープを再帰的に内包しています。これは スコープチェーニング (scope chaining) と呼ばれます。(なぜ「チェーニング」と呼ばれるのかは後で説明します。)

次の例を考えてみて下さい。

function A(x) {
   function B(y) {
      function C(z) {
         alert(x + y + z);
      }
      C(3);
   }
   B(2);
}
A(1); // 6 (1 + 2 + 3) とアラートされる

この例では、C が B の y と A の x にアクセスしています。これが可能な理由は、

B は A を含むクロージャを形成する。つまり、B は A の引数と変数にアクセスできる。
C は B を含むクロージャを形成する。
B のクロージャには A が含まれているので、C のクロージャには A が含まれており、よって C は B と A 両方の引数と変数にアクセスできる。言い換えると、C は B と A のスコープをその順番に 繋いで (chains) いる。

しかしながら、その逆は真ではありません。A は C にアクセス出来ません。なぜなら A は B のどんな引数や変数にもアクセスできず、C はその B の変数だからです。よって、C は B に対してのみプライベートなままです。

[編集] 名前の衝突

クロージャのスコープ内で 2 つの引数または変数が同じ名前を持っていると、 名前の衝突 が起こります。スコープは内側にあるものほど優先順位が高いので、最も内側にあるスコープが最も高い優先順位を持ち、最も外側にあるスコープの優先順位が最も低くなります。これがスコープチェーンです。チェーンの最初が最も内側のスコープで、最後が最も外側のスコープです。次の例を考えてみて下さい。

function outside() {
   var x = 10;
   function inside(x) {
      return x;
   }
   return inside;
}
result = outside()(20); // 10 ではなく 20 を返す

命令文 return x において、inside のパラメータ x と outside の変数 x の間に名前の衝突が起こっています。この場合のスコープチェーンは {inside, outside, グローバルオブジェクト} です。したがって inside の x が outside の x よりも優先順位が高いので、10 (outside の x) ではなく 20 (inside の x) が返ってきます。

[編集] `Function` コンストラクタか関数宣言か関数式か

以下のものを比較してみて下さい。

Function コンストラクタによって定義され、変数 multiply に代入された関数
```
var multiply = new Function("x", "y", "return x * y;");
```
multiply と命名された関数の 関数宣言
```
function multiply(x, y) {
   return x * y;
}
```
変数 multiply に代入された、無名関数の関数式
```
var multiply = function(x, y) {
   return x * y;
}
```
変数 multiply に代入された、func_name と命名された関数式
```
var multiply = function func_name(x, y) {
   return x * y;
}
```

これらは全ておおよそ同じ働きをしますが、いくつか微妙に異なる点があります。

関数名と関数が代入された変数の間には違いがあります。
- 関数名は変える事ができませんが、関数が代入された変数は再代入する事ができます。
- 関数名は関数本体の内部でのみ使用する事ができます。関数本体の外側でそれを使用しようとするとエラー (その関数名がそれより前に var 文によって宣言されていれば undefined ) になります。例えば、
```
var y = function x() {};
alert(x); // エラーを投げる
```
  関数名は Function の toString メソッドによってシリアライズした時にも見る事ができます。
  一方、関数が代入された変数はそのスコープ内でのみ有効で、そのスコープは関数が宣言されたスコープを含んでいる事が保証されています。
- 4 つめの例にあるように、関数名はその関数が代入される変数と違っていても構いません。お互いの間に関連性は有りません。
関数宣言は同時にその関数名と同じ名前の変数を作成します。よって、関数式で定義されたものと違って、関数宣言で定義された関数は定義されたスコープ内でその名前によってアクセスできます。
```
function x() {}
alert(x); // 文字列にシリアライズされた x を出力する
```
次の例は、関数名と関数が代入された変数の間には関係がないということを示しています。「関数変数」が他の値に代入されても、依然として同じ関数名を持っています。
```
function foo() {}
alert(foo); // 関数名 "foo" を含む文字列をアラートする
var bar = foo;
alert(bar); // アラートする文字列には変わらず関数名 "foo" が含まれている
```
Function によって定義された関数は関数名を持ちません。しかし、JavaScipt エンジンの SpiderMonkey では、その関数をシリアライズされた形式にすると "anonymous" という名前を持っているかのように表示されます。例えば、alert(new Function()) はこのように出力されます。
```
function anonymous() {
}
```
この関数は実際には名前を持っていないので、anonymous は関数内部でアクセスできる変数ではありません。例えば、次の文はエラーになります。
```
var foo = new Function("alert(anonymous);");
foo();
```
関数式や Function コンストラクタで定義されたものとは違い、関数宣言で定義された関数は、関数自体が宣言される前に使用する事ができます。例えば、
```
foo(); // FOO! とアラートされる
function foo() {
   alert('FOO!');
}
```
関数式で定義された関数は現在のスコープを継承します。つまり、関数がクロージャを形成します。一方、Function コンストラクタで定義された関数は (あらゆる関数が継承する) グローバルスコープ以外はどんなスコープも継承しません。
関数式と関数宣言で定義された関数は一度しか解析されませんが、Function コンストラクタで定義された関数はそうではありません。つまり、Function コンストラクタに渡された関数本体を表す文字列が、評価されるたびに必ず解析されます。関数式は毎回クロージャを作成しますが、関数本体は再解析されないので、"new Function(...)" よりは関数式の方がまだ高速です。したがって Function コンストラクタはできる限り避けるべきでしょう。

関数宣言はとても簡単に (しばしば意図せずに) 関数式に変化します。関数宣言は以下のような時には関数宣言ではなくなります。

式の一部になった時

関数またはスクリプト自体の「ソース要素 (source element) 」でなくなった時。「ソース要素」はスクリプトや関数本体の中で入れ子にされていない文の事です。

var x = 0;               // ソース要素
if (x == 0) {            // ソース要素
   x = 10;               // ソース要素ではない
   function boo() {}     // ソース要素ではない
}
function foo() {         // ソース要素
   var y = 20;           // ソース要素
   function bar() {}     // ソース要素
   while (y == 10) {     // ソース要素
      function blah() {} // ソース要素ではない
      y++;               // ソース要素ではない
   }
}

例:

// 関数宣言
function foo() {}

// 関数式
(function bar() {})

// 関数式
x = function hello() {}

if (x) {
   // 関数式
   function world() {}
}

// function 文
function a() {
   // function 文
   function b() {}
   if (0) {
      // 関数式
      function c() {}
   }
}

[編集] 条件付きで関数を定義する

関数は関数式か Function コンストラクタを使って条件付きで定義する事ができます。

次のスクリプトでは、zero 関数は決して定義されず、呼び出すことはできません。 'if (0)' が偽であると評価されるからです。

if (0)
   function zero() {
      document.writeln("This is zero.");
   }

条件式が 'if (1)' となるようにスクリプトが変更されれば、関数 zero は定義されます。

注: これは関数宣言のように見えますが、他の文の中に入れ子にされているので、実際には関数式です。関数宣言と関数式の違いを参照して下さい。

注: SpiderMonkey 以外の JavaScript エンジンの中には、名前の付いた関数式を全て関数宣言と間違ってみなすものがあります。これによって常に偽となる条件式の中にあっても zero が定義されてしまいます。条件付きで関数を定義する時には、無名で関数を定義してそれを変数に代入するのがより安全です。

if (0)
   var zero = function() {
      document.writeln("This is zero.");
   }

[編集] イベントハンドラとしての関数

JavaScript では、DOM イベントハンドラは関数です (他の DOM 言語バインディングでは handleEvent メソッドを持つオブジェクトであるのに対して) 。その関数には、第一番目かつ唯一のパラメータとしてイベントオブジェクトが渡されます。他のパラメータと同じように、イベントオブジェクトを使う必要が無ければ仮引数のリストから省略できます。

HTML ドキュメントの中でイベントのターゲットになり得るものには、window (Window オブジェクト、フレームを含む) 、document (HTMLDocument オブジェクト) 、要素 (Element オブジェクト) などがあります。HTML DOM では、イベントのターゲットはイベントハンドラプロパティを持ちます。このプロパティは、onfocus のように小文字にしたイベント名の頭に "on" を付けたものです。DOM Level 2 Events では、イベントリスナを追加するのにより強力な代替手段が提供されています。

注: イベントは DOM の一部であり、JavaScript の一部ではありません。(JavaScript は DOM へのバインディングを提供しているに過ぎません。)

次の例では window の "focus" イベントハンドラに関数を代入しています。

window.onfocus = function() {
   document.body.style.backgroundColor = 'white';
}

関数が変数に代入されていれば、その変数をイベントハンドラに代入する事ができます。次のコードでは変数 setBGColor に関数を代入しています。

var setBGColor = new Function("document.body.style.backgroundColor = 'white';");

この変数を使って、いくつかの方法でイベントハンドラに関数を代入できます。これらはその方法のうちの 2 つです。

スクリプト内で DOM HTML イベントプロパティを使う
```
document.form1.colorButton.onclick = setBGColor;
```
HTML イベント属性
```
<input name="colorButton" type="button"
   value="Change background color"
   onclick="setBGColor();"/>
```
この方法でセットされるイベントハンドラは、実際には、その属性に基づいて名付けられ、指定されたコードをラッピングしている関数です。"setBGColor()" に丸括弧が ( 単に "setBGColor" ではなく) 必要なのはこういった理由からです。これは以下と等価です。
```
document.form1.colorButton.onclick = function onclick(event) {
   setBGColor();
}
```
この関数にイベントオブジェクトがパラメータ event として渡されている事に注目してください。これにより指定したコードの中でイベントオブジェクトを使うことができます。
```
<input ...
    onclick="alert(event.target.tagName);"/>
```

関数を参照する他のプロパティと同じように、イベントハンドラはメソッドとしてふるまう事ができ、this はイベントハンドラを持つ要素を参照します。次の例では onfocus によって参照された関数が呼ばれており、その中では this は window と同値です。

window.onfocus();

JavaScript 初心者によくある間違いは、変数の最後に丸括弧、もしくは丸括弧とパラメータの両方を追加してしまう事、すなわち代入する時にイベントハンドラを呼び出してしまうことです。丸括弧が足されていると、イベントハンドラを呼び出して返された値 を代入してしまう事になります。これは多くは (その関数が何も返さなければ) undefined になり、イベントハンドラそのものは代入されません。

document.form1.button1.onclick = setBGColor();

イベントハンドラにパラメータを渡すには、次のようにイベントハンドラを他の関数でラッピングしなければなりません。

document.form1.button1.onclick = function() {
   setBGColor('some value');
};

[編集] 後方互換性

[編集] JavaScript 1.1 以前

関数式を他の式や関数式の中に入れ子にする事はできません。

[編集] 関数内部のローカル変数

arguments: 現在実行中の関数に渡された引数を格納している配列風のオブジェクト。

arguments.callee: 現在実行中の関数を示す。

arguments.caller 廃止 : 現在実行中の関数を呼び出した関数を示す。

arguments.length: 関数に渡された引数の数を示す。

[編集] 例

[編集] 例: フォーマットされた数値を返す

次の関数は、数値の先頭にゼロを足して固定長にした形で表される文字列を返します。

// この関数は先頭にゼロを足して固定長にした文字列を返す
function padZeros(num, totalLen) {
   var numStr = num.toString();             // 戻り値を文字列に初期化する
   var numZeros = totalLen - numStr.length; // ゼロの数を計算する
   for (var i = 1; i <= numZeros; i++) {
      numStr = "0" + numStr;
   }
   return numStr;
}

次の文で padZeros 関数を呼び出します。

var result;
result = padZeros(42,4); // "0042" を返す
result = padZeros(42,2); // "42" を返す
result = padZeros(5,4);  // "0005" を返す

[編集] 例: 関数が存在するかどうか確認する

typeof 演算子を使うと関数が存在するかどうかを確かめる事ができます。次の例では、window オブジェクトが noFunc という関数のプロパティを持つかどうかを確かめるためのテストが行われます。もし持っていたら、それが使われます。そうでなければ、他の行動が取られます。

 if ('function' == typeof window.noFunc) {
   // noFunc() を使う
 } else {
   // 何か他のことをする
 }

if のテストの中で、noFunc への参照が使われているのに注目してください。関数名の後に括弧 "()" が無いので、実際の関数は呼ばれません。

[編集] 参照

Function, function 文, function 演算子

このページは編集者または閲覧者により、技術レビューの必要があると判断されました。

全体のレビューが終わるまで、不正確あるいは誤った情報を含む可能性があります。

"http://developer.mozilla.org/ja/docs/Core_JavaScript_1.5_Reference:Functions" より作成

カテゴリ: NeedsTechnicalReview

Mozilla Developer Network

ナビゲーション

表示

ツールボックス

他の言語

Core JavaScript 1.5 Reference:Functions

出典: MDC

目次

[編集] 概要

[編集] 一般

[編集] 関数を定義する

[編集] 関数宣言 (`function` 文)

[編集] 関数式 (`function` 演算子)

[編集] `Function` コンストラクタ

[編集] `arguments` オブジェクト

[編集] スコープと関数スタック

[編集] 再帰

[編集] 入れ子の関数とクロージャ

[編集] メモリ効率を考慮する

[編集] 多重に入れ子にされた関数

[編集] 名前の衝突

[編集] `Function` コンストラクタか関数宣言か関数式か

[編集] 条件付きで関数を定義する

[編集] イベントハンドラとしての関数

[編集] 後方互換性

[編集] JavaScript 1.1 以前

[編集] 関数内部のローカル変数

[編集] 例

[編集] 例: フォーマットされた数値を返す

[編集] 例: 関数が存在するかどうか確認する

[編集] 参照

Mozilla Developer Network

Related

ナビゲーション

表示

ツールボックス

他の言語

Core JavaScript 1.5 Reference:Functions

出典: MDC

目次

[編集] 概要

[編集] 一般

[編集] 関数を定義する

[編集] 関数宣言 (function 文)

[編集] 関数式 (function 演算子)

[編集] Function コンストラクタ

[編集] arguments オブジェクト

[編集] スコープと関数スタック

[編集] 再帰

[編集] 入れ子の関数とクロージャ

[編集] メモリ効率を考慮する

[編集] 多重に入れ子にされた関数

[編集] 名前の衝突

[編集] Function コンストラクタか関数宣言か関数式か

[編集] 条件付きで関数を定義する

[編集] イベントハンドラとしての関数

[編集] 後方互換性

[編集] JavaScript 1.1 以前

[編集] 関数内部のローカル変数

[編集] 例

[編集] 例: フォーマットされた数値を返す

[編集] 例: 関数が存在するかどうか確認する

[編集] 参照

[編集] 関数宣言 (`function` 文)

[編集] 関数式 (`function` 演算子)

[編集] `Function` コンストラクタ

[編集] `arguments` オブジェクト

[編集] `Function` コンストラクタか関数宣言か関数式か