« Class.prototype={xxx:"yyy"}とClass.prototype.xxx="yyy"の違い | メイン | 自分が「井の中の蛙」と確信したとき »

「そろそろきっちりJavaScript」がきっちりしていない点

あまり、他人の間違いをサイト上で指摘するのは気が引けるが、はてブ等でも注目されており、誤った知見が広がりjavascriptの復権が遅れるのも避けたいのであえて指摘する。
Firebugをこの手のサンプルの実行環境にすべきではない
Firebugはその名前から察せられると思うが、デバッグ用のエクステンションである。
javascriptのスコープは開いているサイト上となってしまう。
例えば、どこかのサイトを表示し、FirebugのConsole上で
document.getElementsByTagName("body")[0].innerHTML;
と実行してみてほしい。

表示中のサイトのHTMLが出力されたはずだ。
また、次のように実行すると
document.getElementsByTagName("body")[0].innerHTML="Firebug";
サイトの表示が変更されたはずだ。
つまり、javascriptの実行環境が、表示中のサイト内のjavascriptの変数で汚染されているのだ。
(これを汚染というのはどうかと思うが、Firebugを学習環境と見ると汚染でもいいかと思う。)
この状況下で、サンプルを実行してしまうとサイト側が思わぬ動きをしかねない。
Gmail等のajaxを多用しているサイト上で行うと、危険性が増す。
Domの勉強ならわからなくもないが、このようなサンプルの実行には安易にFirebugを薦めてほしくないというのが本心である。
無名関数を使用する利点とfunctionオブジェクトを使用する利点を取り違えている
連載2回目の「(2) 無名関数についてもう少し考える」の、例2のサンプルは次のようになっている。
/* 無名関数内での変数定義が外部の(グローバルな)変数を上書きしていないことを確認しよう */
>>> var y=2;
>>> var mtof = function(x) { var y=3.2808399; return x*y; }
>>> mtof(3);
9.8425197
>>> y
2
/* 関数定義をしない、単なるブロック処理だと、変数は上書きされてしまう */
>>> { var y=4; }
>>> y
4
これで無名関数の利点を説明しているが、グローバル変数を上書きしていないのは無名関数だからではなく、単にfunction内でvarを使用し宣言しているからだ。
つまり、3行目を
function mtof(x) { var y=3.2808399; return x*y; }
としても何ら変わりはない。
document.getElementById()=$()と勘違いしている
同じく連載2回目の「(2) 無名関数についてもう少し考える」の、例5では
/* dollar関数 .. $() は document.getElementById() の別名として利用できる */
/* 引数は配列でも受け取れる。多用されるため、覚えておいて損は無い */
>>> document.write('<h1 id=\'myHeader\'>Hello!</h1>');
>>> $('myHeader').style.color='red';
"red"
となっているが、$()がdocument.getElementById()の代用として利用できる環境は限られている。
連載でも取り上げられているprototype.jsをincludeした場合や、Firebugを利用した場合だ。
(もしかすると、最新のブラウザでは可能なのかもしれないが、対象ブラウザを幅広くとるべきであるし、やはり$()は使用すべきではない。)
今後の展開に期待
prototypeチェーンの説明を行っており、また、prototype.jsを解読していくようなので(執筆時点では最新は「(7) prototype.jsを読む(1)」でまだ導入部)、javascriptを本格的に勉強したいと思うのならいいのかもしれない。
ただ、サンプルの可読性の悪さ(人のこと言えないな)、継承の説明時にconstructorの説明が抜けていること等、注意しなければならない点も少々あるが...。

トラックバック

このエントリーのトラックバックURL:
http://www.kanasansoft.com/cgi/mt/mt-tb.cgi/40

コメントを投稿

(いままで、ここでコメントしたことがないときは、コメントを表示する前にこのブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)

Google