初級者によるprototype.js解読

はじめに

「初級者による」であって「初級者のための」でなく、「解読」であって「解説」ではありません^^;

prototype.jsを使ってみようと思ったのですが、中で何をやっているかは知っておきたいというのと、今後の参考になるかと思い、ここ数日で解読してみました。その確認のために書いていこうと思います。

このため、何ができるかではなくて、何をやっているかが主な内容となります。使い方については以下のサイトを参照してください。

http://www.imgsrc.co.jp/~kuriyama/prototype/prototype.js.html

前提条件

JavaScriptオブジェクト指向プログラム言語としての側面について理解しておく必要があります。以下のサイトを参照してください。

オブジェクト指向プログラム言語としてのJavaScript

2007/01/22追記。

以降の解読はこの時点で正式リリースされている最新v1.4.0を対象としています。

また、筆者の都合により、環境はOS:WindowsXP、ブラウザ:IE6、Netscape7.1、Firefox1.5、Opera9 (それぞれバージョンは前後する場合あり)で検証しています。

Prototypeオブジェクト

【抜粋】
var Prototype = {
  Version: '1.4.0',
  ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',

  emptyFunction: function() {},
  K: function(x) {return x}
}

これ自体の機能はたいしたことありませんが、見慣れないと何をやっているのか分かりにくいです。この記法にはいくつかの前提があります。

  • カスタムオブジェクト記法

以下の3つはほぼ同じ意味です。

【例】
var obj = {name1:value1, name:value2, ...};
【例】
var obj = new Object();
obj["name1"] = value1;
obj["name2"] = value2;
 :
 :
【例】
var obj = new Object();
obj.name1 = value1;
obj.name2 = value2;
 :
 :
  • 無名関数

以下の二つは同じ意味です。

【例】
function name1(arg){
 :
 : 
}
var name2 = name1;
【例】
var name2 = function name1(arg){
 :
 :
}

name2でアクセスすることが決まっているなら、name1は不要です。*1

【例】
var name2 = function(arg){
 :
 :
}

このfunction(arg){}のように名前のない関数を無名関数といいます。

よって、以下のように動作します。

【例】
alert(Prototype.Version);         //'1.4.0'と表示される。
alert(Prototype.ScriptFragment);  //'(?:<script.*?>)((
                                  // |
                                  // |.)*?)(?:<\/script>)'と表示される。(\nと\rは改行になる)
alert(Prototype.emptyFunction()); //'undefined'と表示される。(何も返却しないため)
alert(Prototype.K("test"));       //'test'と表示される。

*1:というか、FirefoxOperaだとname1という名前では関数外部からアクセスできなかったりします・・・。