The Backyard - JavaScriptIsFun Diff
- Added parts are displayed like this.
- Deleted parts are displayed
like this.
JavaScript(ECMAScript)は、他のプログラミング言語の決まりに慣れ親しんでいると、非常に奇妙な存在です。一見すると、CやJavaから型宣言を省いただけの単純なプログラミング言語に見えます。しかし、[[prototype.js|http://www.prototypejs.org/]]や[[jQuery|http://jquery.com/]]のような優れたライブラリのソースを眺めると、それが単なる勘違いに過ぎないことに気づくでしょう。
ここでは、prototype.jsのソースファイルを読むのに必要となるJavaScriptの文法のうち、特に重要な3点を説明します。これらは、JavaScriptでプログラムを記述するのに重要な役割を持つ反面、単にHTMLにアクセントを付ける程度の利用方法では出現しません。したがって、ここで説明するJavaScriptの「濃い」部分を知らなければ、prototype.jsのソースファイルを眺めても何が記述されているのか理解することはできないでしょう。
!《1》関数はオブジェクト
JavaScriptの特徴の1つは、関数がオブジェクトだという点です。したがって、関数をメソッドの引数や戻り値にしたり、変数に設定したりできます。
たとえば、下のリストでは、与えられた引数を2倍にして返す関数を変数に設定する例です。
var fun = function(x) { return x * 2; }; ……変数funに引数を2倍して返す関数を設定
alert(fun(3)); ……funに設定された関数を呼び出しているので6が表示される
同様に次のリストでは、引数に指定した1引数の関数を2回呼び出して合計値を返す1引数の関数を返す関数の例です。
function call_twice(fun) {
return function(arg) { …… 1引数の関数を返す
return fun(arg) + fun(arg); …… 引数で与えられた関数に引数を適用して2回呼び出し和を求める
};
}
var fun2 = call_twice(function(x) { return x * 3; }); …… 引数を3倍して返す関数を引数にして
call_twiceを呼び出して、結果をfun2に設定
alert(fun2(8)); …… 引数の8を3倍する関数を2回呼び出した和となるため48が表示される
:クロージャ:JavaScriptの関数は定義されたブロック内のその時点の変数を内部に保持します。このような動作を行う関数オブジェクトをクロージャ(closure)と呼びます。
!《2》オブジェクト初期化式
JavaScriptのオブジェクトに一括してプロパティと値を設定するために利用される構文をオブジェクト初期化式と呼びます。
:オブジェクト初期化式:カタカナで「オブジェクトイニシャライザ」と呼ぶこともあります。
この構文は、JSONでも利用されます。なお、JSONの規定ではプロパティ名は文字列ですが、オブジェクト初期化式では文字列以外にも数値や名前が利用できます。
var Numeric = { type: 'class', 'defined': 'native', 1: 'one' }; …… プロパティtype、defined、1を設定
alert(Numeric.type); → classと表示
alert(Numeric.defined); → nativeと表示
alert(Numeric['type']); → classと表示
alert(Numeric['defined']); → nativeと表示
alert(Numeric[1]); → oneと表示
プロパティ値を参照、設定するには「.」に続けてプロパティ名を指定する方法と、[]内にプロパティ名を指定する方法の2種類があります。なお数値を指定した場合は「.」記法は利用できません。また、オブジェクト初期化式に名前を指定した場合であっても、[]内に指定する場合は文字列にする必要があります。
《1》から、プロパティ値として関数も指定できます。
!《3》prototypeプロパティ
JavaScriptのオブジェクトに共通の特殊なプロパティとしてprototypeプロパティがあります。JavaScriptではこのプロパティを利用して同じプロパティと初期値を持つオブジェクトを複数作成できます。
:クラス:同じプロパティと初期値を持つオブジェクトを複数作成するためにRubyが利用するのはクラスです。
prototypeプロパティに設定されたオブジェクトのプロパティは、元のオブジェクトのプロパティのように外部からは扱えます。JavaScriptではこのことを利用してオブジェクトの継承関係を作成できます。
function X() {}
X.prototype = {one: function() { return 1;}}; ←Xのprototypeにoneという名前のプロパティを持つオブジェクトを設定
var y = new X(); ←Xの新しいオブジェクト(prototypeプロパティは引き継がれる)
alert(y.one()); ←oneプロパティに設定した関数を呼び出して1を表示
function X2() {}
X2.prototype = new X(); ←X2のprototypeにXを設定
X2.prototype.two = function() { return 2; }; ←X2のprototypeにtwoという名前のプロパティを追加
var y2 = new X2(); ←X2の新しいオブジェクト
alert(y2.one()); ←X2のprototypeに設定されたXのprototypeが参照できるためoneを呼び出せる
alert(y2.two()); ←twoプロパティに設定した関数を呼び出して2を表示
[[order research paper|http://iresearchpapers.com/order.php]]
ここでは、prototype.jsのソースファイルを読むのに必要となるJavaScriptの文法のうち、特に重要な3点を説明します。これらは、JavaScriptでプログラムを記述するのに重要な役割を持つ反面、単にHTMLにアクセントを付ける程度の利用方法では出現しません。したがって、ここで説明するJavaScriptの「濃い」部分を知らなければ、prototype.jsのソースファイルを眺めても何が記述されているのか理解することはできないでしょう。
!《1》関数はオブジェクト
JavaScriptの特徴の1つは、関数がオブジェクトだという点です。したがって、関数をメソッドの引数や戻り値にしたり、変数に設定したりできます。
たとえば、下のリストでは、与えられた引数を2倍にして返す関数を変数に設定する例です。
var fun = function(x) { return x * 2; }; ……変数funに引数を2倍して返す関数を設定
alert(fun(3)); ……funに設定された関数を呼び出しているので6が表示される
同様に次のリストでは、引数に指定した1引数の関数を2回呼び出して合計値を返す1引数の関数を返す関数の例です。
function call_twice(fun) {
return function(arg) { …… 1引数の関数を返す
return fun(arg) + fun(arg); …… 引数で与えられた関数に引数を適用して2回呼び出し和を求める
};
}
var fun2 = call_twice(function(x) { return x * 3; }); …… 引数を3倍して返す関数を引数にして
call_twiceを呼び出して、結果をfun2に設定
alert(fun2(8)); …… 引数の8を3倍する関数を2回呼び出した和となるため48が表示される
:クロージャ:JavaScriptの関数は定義されたブロック内のその時点の変数を内部に保持します。このような動作を行う関数オブジェクトをクロージャ(closure)と呼びます。
!《2》オブジェクト初期化式
JavaScriptのオブジェクトに一括してプロパティと値を設定するために利用される構文をオブジェクト初期化式と呼びます。
:オブジェクト初期化式:カタカナで「オブジェクトイニシャライザ」と呼ぶこともあります。
この構文は、JSONでも利用されます。なお、JSONの規定ではプロパティ名は文字列ですが、オブジェクト初期化式では文字列以外にも数値や名前が利用できます。
var Numeric = { type: 'class', 'defined': 'native', 1: 'one' }; …… プロパティtype、defined、1を設定
alert(Numeric.type); → classと表示
alert(Numeric.defined); → nativeと表示
alert(Numeric['type']); → classと表示
alert(Numeric['defined']); → nativeと表示
alert(Numeric[1]); → oneと表示
プロパティ値を参照、設定するには「.」に続けてプロパティ名を指定する方法と、[]内にプロパティ名を指定する方法の2種類があります。なお数値を指定した場合は「.」記法は利用できません。また、オブジェクト初期化式に名前を指定した場合であっても、[]内に指定する場合は文字列にする必要があります。
《1》から、プロパティ値として関数も指定できます。
!《3》prototypeプロパティ
JavaScriptのオブジェクトに共通の特殊なプロパティとしてprototypeプロパティがあります。JavaScriptではこのプロパティを利用して同じプロパティと初期値を持つオブジェクトを複数作成できます。
:クラス:同じプロパティと初期値を持つオブジェクトを複数作成するためにRubyが利用するのはクラスです。
prototypeプロパティに設定されたオブジェクトのプロパティは、元のオブジェクトのプロパティのように外部からは扱えます。JavaScriptではこのことを利用してオブジェクトの継承関係を作成できます。
function X() {}
X.prototype = {one: function() { return 1;}}; ←Xのprototypeにoneという名前のプロパティを持つオブジェクトを設定
var y = new X(); ←Xの新しいオブジェクト(prototypeプロパティは引き継がれる)
alert(y.one()); ←oneプロパティに設定した関数を呼び出して1を表示
function X2() {}
X2.prototype = new X(); ←X2のprototypeにXを設定
X2.prototype.two = function() { return 2; }; ←X2のprototypeにtwoという名前のプロパティを追加
var y2 = new X2(); ←X2の新しいオブジェクト
alert(y2.one()); ←X2のprototypeに設定されたXのprototypeが参照できるためoneを呼び出せる
alert(y2.two()); ←twoプロパティに設定した関数を呼び出して2を表示
[[order research paper|http://iresearchpapers.com/order.php]]