JavaScript のクラスの作成 - 3 ~クロージャ編~ [JavaScript]
◆JavaScript のクラスの作成 - 3 ~クロージャ編~
前回のエントリー「JavaScript のクラスの作成 - 2 ~プロトタイプ編~」の続きです。
今回は、JavaScript の「クラス」の作成の中でも、「プロトタイプが呼べないクラス」に注目します。
クラスの作り方によっては、「プロトタイプが定義されているのに、インスタンスから呼び出せない」という状況が発生します。
それは、そうなってしまうのを了解したうえで、それでも得られるメリットを活かすクラス作りを、わざとやるんです。
今回は、これを覚書にしておきます。
JavaScript のクラスの作成 - 2 ~プロトタイプ編~ [JavaScript]
◆JavaScript のクラスの作成 - 2 ~プロトタイプ編~
前回のエントリー「JavaScript のクラスの作成 - 1 ~基本編~」の続きです。
今回は、JavaScript の「クラス」の作成の中でも、「プロトタイプ」に注目します。
JavaScript のクラスの作成 - 1 ~基本編~ [JavaScript]
◆JavaScript のクラスの作成 - 1 ~基本編~
今回のエントリーは、長いよ~www。
「プログラミング言語」の中でも、「オブジェクト指向言語」には、しっかりと定義された「役割」を与えられて、その「役割」を、最初から最後まで(エラーまで)面倒を見ることを目的とした、「オブジェクト」という概念があります。
その「オブジェクト」の概念を具現化したもののひとつが、特定の「役割」を果たすための道具の「まとまり」を一か所に集中定義できる、「クラス」の考え方です。
JavaScript が「オブジェクト指向言語」かどうかはおいといて;;;、JavaScript にも「クラス」の概念があります。
最初はちょっと「とっつきづらい」けれど、慣れちゃうと便利、便利。
ところが、慣れてくると自分のフレームワークを作ってしまうので、なかなかゼロからクラスを作る機会がなくなってくる。
こうなると、パソコンや携帯の漢字変換に慣れた人が漢字を書けなくなるかのごとく、クラスの作り方や性質を忘れちゃうんですよね。
ここでは、JavaScript のクラス周りを、備忘録代わりにメモしておきたいと思います。
ひとつのエントリーにまとめようとしたけれど、ボリューム的にムリムリ;;;。
まとめきれないので、数回に分けます。
あのねえ・・・・・・言っとくけど、「JavaScript のクラスの作成」だけで、一週間は酒飲みながら話せるからねw。
ちなみに俺は「理論派」じゃなくて、「実践主義者」です。
いくら「理論」で攻めたって、実際に使う人の手元で動かなかったら、意味ないですもんね!
・・・・・・ということで、今回は、クラスの作成の「基本編」です。
JavaScript - なぜイベントハンドラが重要なのか [JavaScript]
◆JavaScript - なぜイベントハンドラが重要なのか
このブログ、JavaScript に関して、他のことより真っ先に、イベントハンドラ(イベントリスナー)の解説から始めました。
これは俺の独断と偏見ですが、JavaScript においては、クラスの定義やプロトタイプよりも、イベントハンドラ(イベントリスナー)のほうが、よっぽど重要だと思っています。
今回は、その理由についてお話します。
ブラウザごとのイベント発生要素取得の違いを吸収する [JavaScript]
◆ブラウザごとのイベント発生要素取得の違いを吸収する
もう。
event.target とか、event.srcElement とかさ。
使い分けるの面倒だから、Event クラス拡張して、関数で持ってきちゃおうよ。
・・・・・・というのが、今回の趣旨です。
srcElement [JavaScript]
◆event.srcElement プロパティ
event.srcElement
前回のエントリーで、addEventListener や attachEvent で動的に登録されたイベントハンドラが、イベント発生元の要素を知るために使う event.target プロパティを取り上げました。
そして、event.target プロパティが、Internet Explorer に対応していないことも書きました。
そこで使えるのが、event.srcElement プロパティです。
ところが。
やっぱりこいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。
target [JavaScript]
◆event.target プロパティ
event.target
JavaScript のイベントハンドラ(イベントリスナー)を addEventListener や attachEvent で目的のオブジェクト インスタンスに登録した場合、そのインスタンスに該当するイベントが発生すると、イベントハンドラ(イベントリスナー)が起動して、第一引数でイベントに関する情報(Event クラスのインスタンス)を受け取ることができます。
このとき、複数の要素に同じイベントハンドラを登録していたりしたら、そのイベントの発生元の要素がわからないと、イベントハンドラ側でどうしていいかわからない場合がありますよね。
そのときに、イベント発生元の要素を教えてくれるのが、event.target プロパティです。
ところが。
こいつにも、対応していないブラウザがあったり、ちょっと気になる動作をしたりする点があります。
JavaScript イベントハンドラの this について [JavaScript]
◆JavaScript イベントハンドラの this について
いや~、JavaScript のイベント関連のエントリーだけで、ずいぶん記事が書けるもんですね;;;。
今回は、けっこう JavaScript の中ではよく使う、this の注意点をメモします。
"this" というのは、自分自身のインスタンスを指す・・・・・・というのが、JavaScript の中での普通の使い方です。
例えば、Element クラスのメソッド内で処理をしている場合、通常は this はその element インスタンスを指します。
しかし、イベントハンドラは例外です。
ほとんどイヤがらせ for Safari Only [JavaScript]
◆ほとんどイヤがらせ for Safari Only
今回は、俺が自分の環境で経験した、JavaScript のユーザーエージェント(ブラウザ)ごとに異なる挙動の一例です。
手元の環境で、Internet Explorer、Firefox、Opera、Safari、Google Chrome の中で、(環境や OS にもよると思いますが)Safari を除くブラウザは普通に動いてくれるのに、 Safari だけ「ほとんどイヤがらせ」になってしまった例を紹介します。
なお、今回のエントリーは、Safari の性能や機能に対する批判が目的ではありません。
Safari が特別劣ったブラウザとも思っていません。
これは、俺が開発中に、俺の環境でたまたま発生した事例であって、他の環境では発生しないかもしれないし、あるいは他のブラウザでも、まだ俺の知らない深刻な問題があるかもしれませんし。
その点をご理解の上、お読み頂ければと思います。
JavaScript のブラウザごとのイベントハンドラ開放の違いを吸収する [JavaScript]
◆JavaScript のブラウザごとのイベントハンドラ開放の違いを吸収する
さてさて。
ユーザーエージェント(ブラウザ)ごとに、イベントハンドラの登録や開放の仕方が違うのは、以前のエントリーでも書きました。
前回のエントリーでは、イベントハンドラの登録である attachEvent メソッドと addEventListener メソッドの違いを簡単に吸収する処理の実装例を掲載しました。
今回は、イベントハンドラの開放である detachEvent メソッドと removeEventListener メソッドの違いを吸収します。
これは、前々回のエントリー「【遊び】逃げるボタン」で使っているものです。