Weitere ähnliche Inhalte
Ähnlich wie ちょっと詳しくJavaScript 特別編【悪霊の神々】
Ähnlich wie ちょっと詳しくJavaScript 特別編【悪霊の神々】 (20)
Mehr von 株式会社ランチェスター (20)
ちょっと詳しくJavaScript 特別編【悪霊の神々】
- 3. 名前空間的なもの － 実践その１
実はそんなに難しい話じゃないです。
js1.js
function hello() { alert("Hello!"); }
js2.js
function hello() { alert("HELLO!!!"); }
こんなソース2つを読み込むと読み込む順番によってhello関数が上書
きされてしまう。
読み込みの順番を既定したり命名ルールで避ける方法もあるけど、外
部ライブラリを使う場合にはそうも行かないことが・・・
Proprietary and Confidential to Lanchester Co.,LTD. Page 2
- 6. 無名関数作成即実行
関数を作って即実行、その関数は使い捨てたい。
var a = function(){ … };
a();
でもこうするとインスタンスaが出来ちゃう。勿体ない！！
( function(){ … } )();
これで解決！
関数の中で一時変数をたーくさん使ってもグローバルに置かれないので
いろいろ安心できる！
動作的に意味を持たせたいなー・・・なら
( { init: function(){ … } } ).init();
こんなことも！
Proprietary and Confidential to Lanchester Co.,LTD. Page 5
- 7. 無名関数作成即実行、実例！？
<style type="text/css">
#t { width: 100%; border-collapse:collapse; }
#t td { border: 1px solid #000; }
#t tr.hover { background: #fcc; }
</style>
<table id="t">
<tr><td>1-1</td><td>1-2</td><td>1-3</td></tr>
<tr><td>2-1</td><td>2-2</td><td>2-3</td></tr>
<tr><td>3-1</td><td>3-2</td><td>3-3</td></tr>
</table>
<script type="text/javascript">
for(var i=0, o=document.getElementById("t").getElementsByTagName("tr"), n=o.length; i<n; i++) {
o[i].addEventListener("mouseover", (function(_tr) {
return function() {
_tr.className = "hover";
}
})(o[i]), false);
o[i].addEventListener("mouseout", (function(_tr) {
return function() {
_tr.className = "";
}
})(o[i]), false);
}
</script>
Proprietary and Confidential to Lanchester Co.,LTD. Page 6
- 8. try～catch～finally
try {
nothingFunction(); // そんな関数はないのに実行
} catch(e) { // エラーオブジェクト
alert(e); // nothingFunction is not defined等
} finally {
… // catchされてもされなくても
… // 確実に実行される
}
エラーオブジェクトは各実装で保持しているプロパティが違うのでcatch
した後の扱い方に困る・・・
Proprietary and Confidential to Lanchester Co.,LTD. Page 7
- 9. try～catch～finally、実例
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch(e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
alert("Ajax非対応ブラウザ乙ｗｗ");
}
}
}
今ではjQueryとかが勝手に作ってくれるAjax用の通信オブジェクト。
昔はこうやって自分で頑張ってつｋ（ｒｙ
Proprietary and Confidential to Lanchester Co.,LTD. Page 8
- 11. JavaScriptにおける継承の例 － 定義
function TV(name) {
this.name = name;
}
TV.prototype.myName = function() { alert(this.name); }
TV.prototype.watch = function() { alert("Watch TV!"); }
function TVwithDVD(name) {
this.name = name;
}
TVwithDVD.prototype = new TV(); // ここが肝！
TVwithDVD.prototype.play = function() { alert("Play DVD!") }
TVwithDVD.prototype.record = function() { alert("Recording...") }
継承する場合はprototypeへの親クラス代入をコンストラクタ内に書け
ないので注意。
またコンストラクタを継承するのは難易度が高く、実用的ではない。
Proprietary and Confidential to Lanchester Co.,LTD. Page 10
- 12. JavaScriptにおける継承の例 － 実践
var tv = new TV("Panazonic");
var dvd = new TVwithDVD("TOSHIVA");
try {
tv.myName(); // Panazonic
tv.watch(); // Watch TV!
tv.play(); // 実行不可
tv.record(); // 実行不可
} catch(e) {} // エラー握りつぶし用（本来は非推奨）
try {
dvd.myName(); // TOSHIVA
dvd.watch(); // Watch TV!
dvd.play(); // Play DVD!
dvd.record(); // Recording...
} catch(e) {} // エラー握りつぶし用（本来は非推奨）
Proprietary and Confidential to Lanchester Co.,LTD. Page 11
