知っているとうれしいJavaScriptリテラル / LiosK-free Blog

知っているとうれしいJavaScriptリテラル

2007-06-29
カテゴリ: Client Side
タグ: JavaScript トラックバック Tips

↑のサイトのコメント欄では少々舌足らずになってしまったので若干の補足を。

JavaScriptはCやJavaに文法が似ているように見えて、実は特有のリテラルが多いから、JavaScriptに不慣れな人にとってはわけがわからないコードになったりする。このエントリーでは、コード読む上で必要になりそうなリテラルを少し解説。

正規表現リテラル

一つ目が正規表現リテラル。JavaScriptには正規表現型（厳密には正規表現オブジェクト）が存在する。

var re = /abcde/i;

↑の記法は↓に等しい。

var re = new RegExp('abcde', 'i');

このオブジェクトは、match()やreplace()の引数として使われるのがほとんど。JavaScriptでは、match()やreplace()には正規表現オブジェクトを渡すのが主流になる。

var str = 'string';
if (str.match(/r.ng/)) alert('match');

文字列ではなく、正規表現パターンオブジェクトを渡していることに注意。

match()に文字列を渡すと自動的に正規表現オブジェクトに変換されるが、replace()では変換されない。

配列・連想配列リテラル

次は、いわゆるJSON記法。JavaScriptでは次のような記法で配列や連想配列を定義することができる。

var arr = [1, 1, 2, 3, 5, 8];
var assoc = {
    key1: 'val1',
    key2: 'val2'
};

JavaScriptでは、連想配列とオブジェクトは同じものだから、後者はオブジェクトの定義式でもある。詳しくはJSONを参照。

関数オブジェクト

JavaScriptでは、関数もオブジェクトなので、変数に代入することができる。

var func = function(a, b, c) {
    return a + b + c;
};

alert(func(1, 2, 3));    /* 6 */

JavaScriptのオブジェクトのメソッドはこの関数オブジェクトが連想配列に代入されたもの。

var obj = {
    field: 'foo',
    method: function() {
        alert(this.field);
    }
};

obj.method();    /* foo */

無名関数

関数オブジェクトを定義したその場で実行するのが↓の記法。グローバル空間を汚さずにすむから好む人は多い。

var rtn = (function(a, b, c) {
    return a + b + c;
})(1, 2, 3); /* ←引数 */

alert(rtn);    /* 6 */

まとめ

だいたい↑のような記法を知っていればなんとなくは読めるのではないかと思います。

おまけ

トラックバック元の記事で紹介されていたJavaScriptを僕が書くと↓。

(function(onLoad) {
    try {
        window.addEventListener('load', onLoad, false);
    } catch (e) {
        window.attachEvent('onload', onLoad);
    }
})(function() {
    var over = function() { this.src = this.src.replace('_off.', '_on.'); };
    var out  = function() { this.src = this.src.replace('_on.', '_off.'); };
    var img = document.getElementsByTagName('img');
    for (var i = 0, l = img.length; i < l; i++) {
        if (!img[i].src.match(/_off\./)) continue;
        img[i].onmouseover = over;
        img[i].onmouseout  = out;
    }
});

smartRollover.jsという名前で保存すればトラックバック元と同じように使うことができます。

LiosK-free Blog