以下のコードについて質問です。
変数mydivにはコンストラクタの戻り値のjQueryオブジェクトが格納されています。
こうすることによって、mydiv.jQueryメソッドと記述できるようにしました。
そして、この変数でインスタンス変数を参照したいのですが、うまくいきません。
以下の場合ですと、インスタンス変数はundefinedと表示されてしまいます。
インスタンス変数はどのようにして記述すればよいでしょうか？
環境
PC:imac
ブラウザ：Chrome
$(function() {
var mydiv = new Div(1, 2);//変数に戻り値のjQueryオブジェクトが入る
mydiv.appendTo('body'); //インスタンス.jQeryメソッドと記述できる
//mydivがjQueryオブジェクトのためインスタンス変数が参照できない
console.log(mydiv.x); //undefinedと表示
});
// クラス定義
function Div() {
return this.create();
this.x = x;
this.y = y;
}
Div.prototype = {
create: function() {
return $('<div></div>');
}
}
No.2
色々とチグハグなことをされていますし、なぜjQueryを使ってわざわざそんな後ろ向きな処理を行う必要があるのかがわからないですが....。
*以下の行の時点で、xとyを設定することができない。受け取れない。
// クラス定義
function Div() { ...
=======
*以下の行の時点でコンストラクタを作る意味がない。なぜなら、この時点で、xとyも参照されずに、returnしてしまっているし、この実行時のインスタンス化の際にthisはjQueryのラップ集合（この場合
No.1
return するとその後のコードは実行しないです。
$(function() { var mydiv = new Div(1, 2);//変数に戻り値のjQueryオブジェクトが入る mydiv.appendTo('body'); //インスタンス.jQeryメソッドと記述できる //mydivがjQueryオブジェクトのためインスタンス変数が参照できない console.log(mydiv.x); //undefinedと表示 }); // クラス定義 function Div() { alert('いやっほう');//実行される return this.create(); alert('いやっほう');//実行されない this.x = x; this.y = y; } Div.prototype = { create: function() { return $('<div></div>'); } }
なのでこんな感じで書くといいでしょう。
$(function() { var mydiv = new Div(1, 2); mydiv.appendTo('body'); console.log(mydiv.x); // 1 }); // クラス定義 function Div(x, y) { var obj = this.create() obj.x = x; obj.y = y; return obj; } Div.prototype = { create: function() { return $('<div></div>'); } }
javascript/perlの闇は常人に耐えられぬほど深いのです
perlの闇に敗れたクチなのでよく分かりますｗ
回答が大変遅れてしまい申し訳ありません。return文を始めに書いてしまったのはミスです。失礼しました。
> var obj = this.create()
このようにすればコントラクタでjqueryオブジェクトが扱えるようになるのですね。thisについてもっと勉強しなくてはいけません。
大変参考になりました。ありがとうございます。
No.2
ここでベストアンサー
色々とチグハグなことをされていますし、なぜjQueryを使ってわざわざそんな後ろ向きな処理を行う必要があるのかがわからないですが....。
*以下の行の時点で、xとyを設定することができない。受け取れない。
// クラス定義
function Div() { ...
=======
*以下の行の時点でコンストラクタを作る意味がない。なぜなら、この時点で、xとyも参照されずに、returnしてしまっているし、この実行時のインスタンス化の際にthisはjQueryのラップ集合（この場合
>> ラップ集合（この場合
>> ）を指すからである。
ラップ集合（この場合$("＜DIV＞")）を指すからである。
＜＞は全角です。
回答が大変遅れてしまい申し訳ありません。
このようなことを行ったのはjqueryオブジェクトにデータを持たせたかったからです。
jQuery.data()なんていうメソッドがあったのですね！これは便利です。既にやりたいことがメソッドで用意されていたなんて知りませんでした。
すごい助かりました。ありがとうございます。
それと「ラップ集合」についてまだ理解をしておりません。勉強いたします。細かな点まで記述ありがとうございます。今後の勉強課題が増えました。
1
1
1
1
1
1
1
>> ラップ集合（この場合
2013/09/19 18:32:59>> ）を指すからである。
ラップ集合（この場合$("＜DIV＞")）を指すからである。
＜＞は全角です。
回答が大変遅れてしまい申し訳ありません。
2013/10/20 20:45:24このようなことを行ったのはjqueryオブジェクトにデータを持たせたかったからです。
jQuery.data()なんていうメソッドがあったのですね！これは便利です。既にやりたいことがメソッドで用意されていたなんて知りませんでした。
すごい助かりました。ありがとうございます。
それと「ラップ集合」についてまだ理解をしておりません。勉強いたします。細かな点まで記述ありがとうございます。今後の勉強課題が増えました。