javascript:function
差分
このページの2つのバージョン間の差分を表示します。
| javascript:function [2010/09/14 07:03] – 作成 - 外部編集 127.0.0.1 | javascript:function [2025/09/10 04:58] (現在) – 削除 nullpon | ||
|---|---|---|---|
| 行 1: | 行 1: | ||
| - | ====== JavaScriptの関数 ====== | ||
| - | |||
| - | ===== 関数の性質 ===== | ||
| - | JavaScriptの関数は、数値、文字列、配列などのオブジェクトと同じように扱う事ができる。すなわち | ||
| - | |||
| - | * 変数に代入できる | ||
| - | * 他の関数の引数として渡せる | ||
| - | * 他の関数の戻り値できる | ||
| - | * 実行時に動的に生成できる | ||
| - | * 匿名リテラルとして表現可能である | ||
| - | |||
| - | といった性質がある。このような性質を持つオブジェクトはファーストクラス(第一級)オブジェクトと呼ばれる。 | ||
| - | |||
| - | 関数を変数に代入する。 | ||
| - | <code javascript> | ||
| - | function hoge() { | ||
| - | window.alert(" | ||
| - | } | ||
| - | var f = hoge; | ||
| - | f(); // " | ||
| - | </ | ||
| - | |||
| - | 関数自身がオブジェクトであるため、普通のオブジェクトのようにメソッドを定義したり、プロパティを付加することができる。ただし、このような利用法はあまりされない。 | ||
| - | |||
| - | <code javascript> | ||
| - | // 関数fugaがプロパティcountを持っている。 | ||
| - | function fuga() { | ||
| - | window.alert(fuga.count++); | ||
| - | } | ||
| - | fuga.count = 0; | ||
| - | </ | ||
| - | |||
| - | ==== 関数 static 変数もどき ==== | ||
| - | 関数内 static 変数的な値を作る。 非オブジェクト指向言語におけるstatic変数は関数やブロック内で宣言された変数で、そのブロックが終了しても値を保持している変数のこと。 | ||
| - | <code javascript> | ||
| - | function hoge () { | ||
| - | | ||
| - | | ||
| - | } | ||
| - | hoge(); | ||
| - | hoge(); | ||
| - | hoge(); | ||
| - | hoge._staticValue; | ||
| - | </ | ||
| - | この実体は単なる関数オブジェクトのプロパティなので外部からでもアクセスできてしまう。あまり奇麗な書き方ではないがグローバル変数を定義するよりマシ。 | ||
| - | |||
| - | まともな利用法としては、例えば複数のボタンに対して一つの関数をイベントリスナとし、最後にそのリスナを実行したボタン(のDOM要素)をリスナ自身に記憶させるとか。 | ||
| - | <code javascript> | ||
| - | // require jQuery | ||
| - | function onclickHoge( event ) { | ||
| - | arguments.callee.lastEventTarget = event.target; | ||
| - | // 何か処理 | ||
| - | } | ||
| - | $(" | ||
| - | |||
| - | // onclickHogeイベントリスナを最後に実行した要素を取得 | ||
| - | var element = onclickHoge.lastEventTarget; | ||
| - | </ | ||
| - | |||
| - | ===== 無名関数 ===== | ||
| - | 匿名関数は名前を持たない関数である。名前が無いので、変数に格納したり、別の関数の引数にしなければ呼び出すことができない。 | ||
| - | |||
| - | <code javascript> | ||
| - | // 無名関数を変数に代入して呼び出す例 | ||
| - | var hoge = function() { | ||
| - | window.alert(" | ||
| - | } | ||
| - | hoge(); | ||
| - | </ | ||
| - | |||
| - | 無名関数は、主に別の関数の引数として使用する場合、オブジェクトのメソッドを定義する場合に使用される。 | ||
| - | |||
| - | <code javascript> | ||
| - | // addEventListerの引数として無名関数を使う | ||
| - | window.addEventListener(" | ||
| - | </ | ||
| - | |||
| - | 言語によって無名関数の定義はラムダ式と呼ばれる事もある。 | ||
| - | |||
| - | <code javascript> | ||
| - | var obj = new Object(); | ||
| - | obj.x = 1 | ||
| - | obj.y = 2 | ||
| - | // objオブジェクトのメソッドを定義する | ||
| - | obj.sum = function() { return this.x + this.y } | ||
| - | |||
| - | obj.sum(); | ||
| - | </ | ||
| - | |||
| - | オブジェクトのプロパティに関数をセットしたものがメソッドとなる。メソッドとなった関数はthisキーワードで自身のコンテキストにアクセスできる。 | ||
| - | |||
| - | ===== 高階関数 ===== | ||
| - | 関数を引数にする関数や、関数を戻り値にする関数を高階関数という。 | ||
| - | |||
| - | <code javascript> | ||
| - | var array1 = [3, | ||
| - | array1.sort(function(a, | ||
| - | |||
| - | var array2 = [4, | ||
| - | array2.sort(function(a, | ||
| - | </ | ||
| - | |||
| - | Javaのように関数をオブジェクトとして利用することができない(難しい)言語ではストラテジーパターンで代用されています。Javaで配列をソートする場合、Comparatorインターフェースの実装クラスを作る必要があり面倒ですが、スクリプト言語は関数やコードブロックを渡すだけで良く、簡潔に記述できます。 | ||
| - | |||
| - | ===== クロージャ ===== | ||
| - | 複数の引数をとる関数f(x, | ||
| - | |||
| - | f(x, y, z, ....) = g(x)(y)(z) .... | ||
| - | |||
| - | 例 | ||
| - | <code javascript> | ||
| - | function logarithm(x, | ||
| - | return Math.log(y) / Math.log(x); | ||
| - | } | ||
| - | </ | ||
| - | これは底をxとする対数 log< | ||
| - | < | ||
| - | var logarithmBase = function(x) { | ||
| - | return function(y) { | ||
| - | | ||
| - | } | ||
| - | }; | ||
| - | </ | ||
| - | これを実行すると | ||
| - | <code javascript> | ||
| - | logarithmBase(10)(2); | ||
| - | // => 0.30102999566398114 | ||
| - | |||
| - | var commonLogarithm = logarithmBase(10); | ||
| - | commonLogarithm(3); | ||
| - | // => 0.47712125471966244 | ||
| - | </ | ||
| - | |||
| - | logarithmBase(10)を実行すると、あたかも logarithm(x, | ||
| - | |||
| - | このように引数ではない変数を定義時の環境で決定する関数をクロージャという。 | ||
javascript/function.1284447831.txt.gz · 最終更新: by 127.0.0.1