JavaScript 関連のちょっとしたメモ

気になって調べたり、見つけたもの。小ネタ。基本的にはmonjudoh/BeautifulProperties.js · GitHub をみてたってのがきっかけ。

prototype 汚染しちゃだめなのって Object と Array だっけ?

というか prototype 汚染しないほうがいいのってなんでだっけ?という基礎的な話。prototype.js でいろいろ苦しい話がでたからやめようって経緯があるのは知ってて、名前空間分けようってのは知ってたけど、じゃあどこまでならやっていいんだろうみたいな話。

具体的には以下
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - 文殊堂

Object.defineProperty で enumerable: false はしってたけど、なるなるという。

arguments は array じゃないよって話

答えは本に載ってた

JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技

JavaScriptテクニックバイブル ~効率的な開発に役立つ150の技

Array っぽいけどちょっと違う独自のオブジェクトですよという。まあたしかに console.log() した結果で [object Arguments] ってなってたのはみたけど、じゃあなんなの、という状態だった。で、これを配列として扱いたいときは以下のイディオムですよねという。

Array.prototype.slice.apply(this, arguments)

ちなみに上記のイディオムは arguments にたいしてだけじゃなくて Array に変換したいときに一般的にある話で、具体的には DOM で document.getElementsByClassName() とか $(".class") とかしたときにかえってくるのが HTMLCollection とか HTMLElemnt とか NodeList とかそんな感じなので、変換したりする。

カスタムイベントについて

Hit-a-Hintブックマークレット2.0をリリースしたよ - by edvakf in hatena を空間ナビゲーション版やエクステンション版や、あるいは vimOperate という拡張でもやれるけど、いまでもつかっている。で、読んだときに「マウスイベント作って→初期化して→発火」というくだりでクリックイベントをエミュレーションできるのだけど、でも jQuery.trigger ってあれどうやってるの?と疑問に思った。

まずは MDN をあたった
document.createEvent - DOM | MDN

そうだよね、いろいろあるよね。マウスイベントだけじゃなくて DOM 操作や DOM Level 3 Events からはキーボードイベントもとれるよね、いうのはわかった。でもじゃあ自前でイベントをつくるにはどうすればいいんだろう?というのは残った。ら、既にやっている人がいた。

javascriptのカスタムイベントを作ろう! - 馬鹿と天才は紙一重

つまりイベントオブジェクト作ってしまえば名前なんでもよかったのだ。で、リスナーもなんでもよかったのだ。

// リスナーをはる
document.addEventListener("hoge",function () {
  console.log(1);
}, false);

// イベントオブジェクトつくって
var e = document.createEvent("Event")
// 初期化して
e.initEvent("hoge", bubbles, cancelbuble);
// 対象のエレメントに発火
document.dispathEvent(e)
// 1

まあ

小ネタ