コンストラクタすると同時にメソッドをオーバーロードするには？
コンストラクタすると同時にメソッドをオーバーロードするには？
リスナー関数でthisの参照先が変わってしまう問題に悩んでいます。
<!-- 方法(1) コンストラクタした後にメソッドを上書きする -->
<p id="Test">test</p>
<script type="text/javascript"><!--
function Hello (value){ this.value = value ? value : 'Hello, World!'; }
Hello.prototype.start = function (event) { alert(this.value); }
var world = new Hello();
var start = function (event) { world.start.call(world, event); }; // thisがworldを参照するようにstartメソッドを作り直す
document.getElementById('Test').addEventListener('click', start, false);
//--></script>
上記コードは期待通りの動作ですが、せっかくコンストラクタしたにも関わらず、メソッドを上書きしなくてはなりません。
コンストラクタした時点でstartメソッドが完成しているのが理想です。
(以下、全角空白は半角空白に置換してください)
<!-- 方法(2) クロージャでメソッドを生成する -->
<p id="Test">test</p>
<script type="text/javascript"><!--
function Hello (value) {
function start (event) {
alert(this.value);
}
this.value = value ? value : 'Hello, World!';
this.start = (function(that){
return function (event) {
start.call(that, event);
that = null;
};
})(this);
}
var world = new Hello('Hello, World2!');
document.getElementById('Test').addEventListener('click', world.start, false);
//--></script>
こちらは完全に期待通りの動作を示しますが、prototype を使用していないのが少し気になります。
<!-- 方法(3) クロージャで prototype.start を上書きする -->
<p id="Test">test</p>
<script type="text/javascript"><!--
function Hello (value) {
this.value = value ? value : 'Hello, World!';
this.start = (function(that, start){
return function (event) {
start.call(that, event);
that = start = null;
};
})(this, this.start);
}
Hello.prototype.start = function start (event) {
alert(this.value);
};
var world = new Hello('Hello, World2!');
document.getElementById('Test').addEventListener('click', world.start, false);
//--></script>
結果としては期待通りのコードになったのですが、以下の点が気になっています。
・方法(2)、方法(3) を比較すると、それぞれどのようなメリット、デメリットがあるのか。(prototypeが高速と聞いてからは (3) に傾いているのですが、よくわかっていません)
・コンストラクタ時に発動する特別なメソッド、プロパティが用意されているのか。
・クロージャを使わずに解決できるのか。
・全く別の方法(もっと良い実装)があるのか。
コードの書き方は千差万別だとは思いますが、主観で結構ですので、アドバイスいただければ幸いです。
# start() はサンプル故に短いコードですが、実際には比較的長いコードがある状態を想定しています。
