Javascript初心者が覚えたことその1 継承とか
今まで、JavaScriptを使う場面と言えばバリデーションとしての用途でしかなく、コピペで終わっていました。かつ、HTMLとべったりくっついても修正コストを我慢していました。
でも、クラス作っておけば、コードに対して意味を持たせやすくなるし、HTMLとJavaScriptを分離した方が改修は糞やりやすいということが今回でわかりました。その時のメモ。
プロトタイプ周りまったくわかってません。
クラスを定義
JavaScriptはオブジェクト指向だそうですが、JavaやRubyの"オブジェクト指向"とは意味が違うそうです。(そこらへんを理解してないので次あたりの記事で言及します。)
function jiikko(word){ // (1) this.word = word }; alert(new jiikko("Unko!!!").word); // (2)
(1)でクラスを定義しており、wordプロパティがいます。
クラス定義に使っているキーワードはfunctionのようです。
喉に何かが引っかかっているような感覚ですが、動作確認を優先します。
(2)コンストラクタに"Unko!"を渡して、wordプロパティを呼んでいる。
疑問に思ったこと
- 可視性は設定できなさそう
- プロパティとメソッドの区別なさそう
継承
Humanクラスを継承します。
function Human(){}; Human.prototype = { // (1) say : function(){ return this.word } }; function jiikko(word){ this.word = word }; jiikko.prototype = new Human(); // (2) alert(new jiikko("Unko!!!").say());
JavaScriptのすべてのオブジェクトはprototypeというプロパティを持っているようです。
(1)では、親クラスのメソッドを定義しています。
(2)では、親クラスと子クラスのリンクを行っており、ここで継承をしています。
癖ある感じする。
すべてのタグが生まれる前にJavaScriptを消し去りたい
<input id="submit" type="button" onClick="valid" >
↓
$("#submit").click{ function valid(){ // ここに処理を書く } }
タグの属性を取得する
$("#submit").attr("reasonly");
オンマウスするなら
hoverメソッドを使った方がonMouseとonMouseOutイベントを読みやすい。
以下は同じ意味となります。
$("#submit").hover{ function(){ //onMouse処理 }, function(){ //onMouseOut処理 } }
$("#submit).mouseover{ function(){ //処理 }; } $("#submit).mouseout{ function(){ //処理 }; }
続く