JavaScript本格入門を読む・4
4日目です。ダレてくる頃です。ダレてます。イエーイ
でも4日目が三日坊主にならない境目な気もしてるよ！
5.大規模開発でも通用する書き方を身につける
5-1.JavaScriptにおけるオブジェクト指向の特徴
もっともシンプルなクラスを定義
コンストラクタで初期化する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
this.getName = function(){
return this.lastName + ' ' +this.firstName;
}
};
var mem = new Member('ai', 'kaneko');
document.writeln(mem.getName());これ、最初「愛」が「undefined」になって愛が・・・見つからない・・・って思った。
動的にメソッドを追加する
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
var mem = new Member('ai', 'kaneko');
mem.getName = function(){
return this.lastName + ' ' +this.firstName;
}
document.writeln(mem.getName());
同一のクラスをもとに生成されたインスタンスであっても、それぞれが持つメンバは同一であるとは限らない。
5-2.コンストラクタの問題点とプロトタイプ
メソッドはプロトタイプで宣言する
プロトタイプオブジェクトを利用することの2つの利点
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
var mem = new Member('niconico','太郎');
Member.prototype.getName =function(){
return this.lastName + ' ' +this.firstName;
};
document.writeln(mem.getName());getNameメソッドどっちでもいけるのか。すてき
プロパティの設定
var Member = function(){};
Member.prototype.sex = '男';
var mem1 = new Member();
var mem2 = new Member();
document.writeln(mem1.sex + '|' + mem2.sex);
mem2.sex = '女';
document.writeln(mem1.sex + '|' + mem2.sex);
プロトタイプオブジェクトが利用されるのは「値の参照時だけ」
（1）静的プロパティは、基本的に読み取り専用
（2）静的メソッドの中では、thisキーワードは使えない
プロパティの削除
var Member = function(){};
Member.prototype.sex = '男';
var mem1 = new Member();
var mem2 = new Member();
document.writeln(mem1.sex + '|' + mem2.sex);
mem2.sex = '女';
document.writeln(mem1.sex + '|' + mem2.sex);
delete mem1.sex
delete mem2.sex
document.writeln(mem1.sex + '|' + mem2.sex);えー
削除するのは、インスタンス上のsexプロパティっていうの難しい・・・
オブジェクトリテラルでプロトタイプを定着させる
var Member = function(firstName,lastName){
this.firstName = firstName;
this.lastName = lastName;
};
Member.prototype = {
getName : function(){return this.lastName + ' ' +this.firstName;},
toString : function(){return this.lastName + this.firstName;}
};
var mem = new Member('niconico','太郎');
document.writeln(mem.getName());
document.writeln(mem.toString());確かにわかりやすくなって・・・のかな・・・・（ドキドキ）
5-3.オブジェクトの継承
継承とは
プロトタイプチェーンの基礎
var Animal = function(){}
Animal.prototype = {
walk : function() { document.writeln('ポコポコ…'); }
};
var Dog = function(){};
Dog.prototype = new Animal();
Dog.prototype.bark = function() { document.writeln('ワンワン！ '); }
var d = new Dog();
d.walk();
d.bark();いやー・・・まぁぶっちゃけさ、よくわからなくなってきたよね。
継承関係は動的に変更可能
var Animal = function(){}
Animal.prototype = {
walk : function() { document.writeln('ポコポコ…'); }
};
var SuperAnimal = function(){}
SuperAnimal.prototype = {
walk : function(){ document.writeln('ダダダダダダ');}
};
var Dog = function(){};
Dog.prototype = new Animal();
var d1 = new Dog();
d1.walk();
Dog.prototype = new SuperAnimal();
var d2 = new Dog();
d2.walk();
d1.walk();
インスタンスが生成された時点で固定され、その後の変更にかかわらず保存される
書いてあることを読めるし、サンプルコードも書いて「お、おう・・・」って思うけど
「本当に理解してるの？」って言われたら「わからないです。。。」ってかんじなんだが！
書いていくうちに身につくのかなぁ・・・
6.ブラウザを自在に操る〜ブラウザオブジェクト
やっとブラウザオブジェクトきたーーーーーー！！！
6-1.イベントが発生したら処理を行う
function btn_onclick(){
window.alert('ボタンをクリック');
}
(中略)
<input type="button" value="ダイアログ表示" onclick="btn_onclick()" />はー動くって楽しい。
window.onload = function(){
document.getElementById('btn').onclick = function(){
window.alert(' ボタンがクリックされました。');
};
};
（中略）
<input id="btn" type='button' value="ダイアログ表示" />getElementByIdちゃんキター！おひさ！
イベント標準の挙動をキャンセルする
<body oncontextmenu = "return false;">
ほうほう
