実践 prototype.js [2]

id:higepon:20050831の続き

同じ .js ファイルの中で宣言の順番に気を使う。後方参照できない(?)

この件は、id:kambaraと話していて解決というか納得した。

var Hoge = Class.create();
Hoge.prototype = (new HogeBase).extend ( {

このようにクラスを”宣言”しているつもりになるのだが、良く考えるとこれは動的に上から下に実行されているため起こる問題だ。
JavaScript自身は後方参照できるが、prototype.js の仕組み上後方参照できないということ。

$関数

document.getElementByIdの代わりに使う。
厳密には
$('hoge') だと たとえば <div id='hoge'> のオブジェクトが返る。
$('hoge', 'hige') だと、'hoge', 'hige'のidを持つオブジェクトの配列が返る。

しかし$も関数名に使えるだな。

イベントハンドラ内で this を参照したい

2つ方法があるらしい
(1)self作戦

hoge : function {
    // do something
},
some : function() {
    var element = $('elementname');
    var self = this;
    element.onclick = function() {
        self.hoge(); // thisを参照
    }
}

(2) bind作戦（こちらのほうがクール）

hoge : function {
    // do something
},
some : function() {
    var element = $('elementname');
    element.onlick = this.handler.bind(this); // bind
},
handler : function() {
    this.hoge(); // thisを参照
}

この bind が曲者で分かりづらいです。こういうときは prototype.js のコードを見たほうが早い。

Function.prototype.bind = function(object) {
  var __method = this;
  return function() {
    __method.apply(object, arguments);
  }
}

実は(2)は(1)をラップしただけということがわかる。

(3)fladdict.netの中の人から
http://www.fladdict.net/blog-jp/archives/2005/09/this.php
ちょっと勉強中。

スコープの話（JavaScript全般）

id:kambaraに教えてもらったテクニック。無名関数オブジェクトで囲む。

(function() {

var Base = Class.create();
Base.prototype = {

    }
})()

JavaScript & DHTMLクックブック―Webエキスパート必携テクニック集