[prg]唐突にJavaScriptについて

特に誰も興味ないと思うが唐突にJavaScriptについて。

JavaScriptの言語仕様は不思議だ。わたしは以下のことを学ぶのにずいぶん長い時間を要したと思う。

4点を覚えれば十分だと思う。

ただしいくつかの部分は、

• javascriptを理解するためのたった2つの大切なこと

http://anond.hatelabo.jp/20070622101313

のパクり。

• オブジェクトはハッシュ
• クラスはfunction
• インスタンスはprototype
• "()"は特別な関数

の4本。

■ オブジェクトはハッシュ

上の増田の記事にもあるように、JavaScriptのオブジェクトはハッシュ(連想配列)。

なんでハッシュがオブジェクトなのか。

オブジェクトというのは、1個のキーワードによって複数の変数と関数を束ねたもののことだから。

たとえばRubyで、

Hoge = {
    :name => 'hoge',
    :func => lambda{|i| return i*2}
}

と書く。

Hoge[:name]
=> "hoge"
Hoge[:func].call(2)
=> 4

これってクラス変数とクラスメソッドじゃね？

少なくとも、

class Fuga
    @@name = 'fuga'
    def func(i)
        return i*2
    end
end

Fuga.name
=> 'fuga'
Fuga.func(3)
=> 6

に形は似ている。呼び出し方が違うだけ。

JavaScriptだと、

Hoge = {
    'name': 'hoge',
    'func': function(i){ return i*2}
};

Hoge.name;
=> "hoge"
Hoge.func(2);
=> 4

と書ける。これはもうRubyのクラスメソッド、クラス変数と同じ形。

■ クラスはfunction

でもハッシュだけではインスタンスをつくれない。

どうやってインスタンスをつくるのか。

function double(n){
    alert(n*2);
}
var d = new double();

実はJavaScriptのfunctionにはすべてnewを適用することができる。

これによってfunctionの子供(インスタンス)がつくられる。

しかしここでできたインタンスにはまだ何の能力もない。

■ インスタンスはprototype

function double(){}
double.prototype = {
    'name': 'double',
    'func': function(n){
        return n*2;
    }
}
var d = new double();

d.name;
=>'double'
d.func(2);
=> 4

プロトタイプに登録した変数や関数は、すべてのインスタンスにコピーされる。基本的にはそれだけ。

上の例では、

• new を適用した時点で、インスタンス"d"にdouble.prototypeの中身をコピー。
• function doubleを実行。この場合、何も書いてないので何もしない。

という2つのことをやっている。

ここまでをまとめると、

//クラス作成
function Human(){}
//クラス変数、クラスメソッド
Human.name = 'Human',
Human.birth = function(name){
    var _man = new Human();
    _man.name = name;
    return _man;
}
//インスタンス変数、インスタンスメソッド
Human.prototype = {
    'hello': function(){ alert('Hello, my name is ' + this.name)},
    'bye': function(){ alert('Bye') }
}

var taro = Human.birth('taro');
taro.hello();

■ "()"は特別な関数

function plusOne(n){
    return n+1;
}

plusOne;

とやると、返り値はfunctionオブジェクト。

plusOne(5);

とやると、返り値は6。

つまり"plusOne"は関数オブジェクトの名前。"()"は、関数オブジェクトを実行するための特別な関数。Rubyでいう"Proc#call"。「実行せよ」という意味。

おそらく変数"plusOne"には関数内の手続きを格納したメモリのアドレスが登録されており、"()"はそのメモリアドレスに書かれた手続きを実行するための特別なキーワード、というようなイメージなのだと思う。

ブックマークレットなどで見かける以下の書き方もこれで理解できる。

(function(){alert('aaa');})();

これは、"function(){alert('aaa')}"を、引数無しで実行せよという意味。

(function(){return arguments;})(1, 3, 4);
=> [1, 3, 4]

これは、"function(){return arguments}"を、引数1,3,4を与えて実行せよという意味。

おわり。