jQueryｵﾌﾞｼﾞｪｸﾄからｲﾝｽﾀﾝｽ変数を参照以下のｺｰﾄﾞについて質問です｡変数mydivにはｺﾝｽﾄﾗｸﾀの戻り値のjQueryｵﾌﾞｼﾞｪｸﾄが格納されています｡こうす…

人力検索はてな

ﾓﾊﾞｲﾙ版を表示しています｡PC版はこちら

jQueryｵﾌﾞｼﾞｪｸﾄからｲﾝｽﾀﾝｽ変数を参照

以下のｺｰﾄﾞについて質問です｡
変数mydivにはｺﾝｽﾄﾗｸﾀの戻り値のjQueryｵﾌﾞｼﾞｪｸﾄが格納されています｡
こうすることによって､mydiv.jQueryﾒｿｯﾄﾞと記述できるようにしました｡
そして､この変数でｲﾝｽﾀﾝｽ変数を参照したいのですが､うまくいきません｡
以下の場合ですと､ｲﾝｽﾀﾝｽ変数はundefinedと表示されてしまいます｡

ｲﾝｽﾀﾝｽ変数はどのようにして記述すればよいでしょうか？

環境
PC:imac
ﾌﾞﾗｳｻﾞ：Chrome

●質問者: 匿名質問者
●ｶﾃｺﾞﾘ:ｺﾝﾋﾟｭｰﾀｳｪﾌﾞ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

● 質問者から

$(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>');
}
}

▽1 ● 匿名回答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>');
}
}

匿名回答2号さんのｺﾒﾝﾄ
すみません､横から...｡このｺｰﾄﾞってうまくいくんでしょうか？どうも､ var obj = this.create() ↑この時点でjQueryｵﾌﾞｼﾞｪｸﾄになってしまい､ xとyを設定したとしても return obj; ↑の時点でjQueryｵﾌﾞｼﾞｪｸﾄ自体を返しているので､ var mydiv = new Div(1, 2); ↑ｲﾝｽﾀﾝｽ化した際はthisは$("＜DIV>")を指し､create()ﾒｿｯﾄﾞは存在しないことになるのでは？？ ※＜＞は全角です｡

匿名回答1号さんのｺﾒﾝﾄ
>> create()ﾒｿｯﾄﾞは存在しないことになるのでは？？ << そうですけど､それが何か？元のｺｰﾄﾞにも含まれていないと思いますし､new で得られたｵﾌﾞｼﾞｪｸﾄにｺﾝｽﾄﾗｸﾀが含まれないことに何か問題ありますか？

匿名回答2号さんのｺﾒﾝﾄ
実行されてみればわかります｡ console.logには Object #<Div> has no method 'create'

匿名回答2号さんのｺﾒﾝﾄ
http://jsfiddle.net/2Nt7d/

匿名回答1号さんのｺﾒﾝﾄ
onloadで実行してますよ｡ご確認のほどを｡

匿名回答1号さんのｺﾒﾝﾄ
まあ､そこまでおっしゃるなら､追加しておきますけれども｡ >|| $(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; obj.create = this.create; return obj; } Div.prototype = { create: function() { return $('<div></div>'); } } ||< 正直､なにが引っ掛かってるのか分かりかねます｡

匿名回答1号さんのｺﾒﾝﾄ
2号､だんまりですか？回答へのつっこみは大歓迎ですが､つっこみへのこちらの応答に返事をしないのはあまり感心しない態度ですね｡結局､なにが気に入らなかったのか､明確にならないままで残念です｡このままでは､2号がいちゃもんをつけてるだけのように見えてしまいます｡

匿名回答3号さんのｺﾒﾝﾄ
OOらしからぬ変態仕様に混乱して返事が出来ないのか我に返って枕に顔を埋めているのでしょう｡ javascript/perlの闇は常人に耐えられぬほど深いのです｡察して上げましょう｡匿名質問者さん宛ﾒｯｾｰｼﾞとしては､このような事をしているとﾀﾞｰｸｻｲﾄﾞに落ちてしまうので､普通の関数を使うかﾌﾟﾗｸﾞｲﾝにしてしまうことをおすすめします｡

匿名回答1号さんのｺﾒﾝﾄ
>> javascript/perlの闇は常人に耐えられぬほど深いのです << perlの闇に敗れたｸﾁなのでよく分かりますw

匿名質問者さんのｺﾒﾝﾄ
回答が大変遅れてしまい申し訳ありません｡return文を始めに書いてしまったのはﾐｽです｡失礼しました｡ > var obj = this.create() このようにすればｺﾝﾄﾗｸﾀでjqueryｵﾌﾞｼﾞｪｸﾄが扱えるようになるのですね｡thisについてもっと勉強しなくてはいけません｡大変参考になりました｡ありがとうございます｡

▽2 ● 匿名回答2号

ﾍﾞｽﾄｱﾝｻｰ

色々とﾁｸﾞﾊｸﾞなことをされていますし､なぜjQueryを使ってわざわざそんな後ろ向きな処理を行う必要があるのかがわからないですが....｡

*以下の行の時点で､xとyを設定することができない｡受け取れない｡
// ｸﾗｽ定義
function Div() { ...

=======

*以下の行の時点でｺﾝｽﾄﾗｸﾀを作る意味がない｡なぜなら､この時点で､xとyも参照されずに､returnしてしまっているし､この実行時のｲﾝｽﾀﾝｽ化の際にthisはjQueryのﾗｯﾌﾟ集合(この場合

)を指すからである｡
return this.create();

要素にﾃﾞｰﾀを持たせたいというのであれば､以下が参考になると思います｡
jQuery.data(elem, name, value) - jQuery 日本語ﾘﾌｧﾚﾝｽ
http://semooh.jp/jquery/api/internals/jQuery.data/elem%2C+name%2C+value/

匿名回答2号さんのｺﾒﾝﾄ
>> ﾗｯﾌﾟ集合(この場合 >> )を指すからである｡ﾗｯﾌﾟ集合(この場合$("＜DIV＞"))を指すからである｡＜＞は全角です｡

匿名質問者さんのｺﾒﾝﾄ
回答が大変遅れてしまい申し訳ありません｡このようなことを行ったのはjqueryｵﾌﾞｼﾞｪｸﾄにﾃﾞｰﾀを持たせたかったからです｡ jQuery.data()なんていうﾒｿｯﾄﾞがあったのですね！これは便利です｡既にやりたいことがﾒｿｯﾄﾞで用意されていたなんて知りませんでした｡すごい助かりました｡ありがとうございます｡それと｢ﾗｯﾌﾟ集合｣についてまだ理解をしておりません｡勉強いたします｡細かな点まで記述ありがとうございます｡今後の勉強課題が増えました｡