匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

jQueryオブジェクトから インスタンス変数を参照


以下のコードについて質問です。
変数mydivにはコンストラクタの戻り値のjQueryオブジェクトが格納されています。
こうすることによって、mydiv.jQueryメソッドと記述できるようにしました。
そして、この変数でインスタンス変数を参照したいのですが、うまくいきません。
以下の場合ですと、インスタンス変数はundefinedと表示されてしまいます。

インスタンス変数はどのようにして記述すればよいでしょうか?

環境
PC:imac
ブラウザ:Chrome

回答の条件
  • 1人50回まで
  • 13歳以上
  • 登録:2013/09/19 15:54:02
  • 終了:2013/09/26 15:55:04
匿名質問者

質問者から

匿名質問者2013/09/19 21:36:40
$(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>');
	}
}

ベストアンサー

匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/09/19 18:13:50

色々とチグハグなことをされていますし、なぜ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>"))を指すからである。

<>は全角です。

2013/09/19 18:32:59
匿名質問者

回答が大変遅れてしまい申し訳ありません。

このようなことを行ったのはjqueryオブジェクトにデータを持たせたかったからです。
jQuery.data()なんていうメソッドがあったのですね!これは便利です。既にやりたいことがメソッドで用意されていたなんて知りませんでした。
すごい助かりました。ありがとうございます。

それと「ラップ集合」についてまだ理解をしておりません。勉強いたします。細かな点まで記述ありがとうございます。今後の勉強課題が増えました。

2013/10/20 20:45:24

その他の回答(1件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/09/19 18:05:54

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>');
	}
}
他8件のコメントを見る
匿名回答1号

javascript/perlの闇は常人に耐えられぬほど深いのです

perlの闇に敗れたクチなのでよく分かりますw

2013/09/21 10:58:32
匿名質問者

回答が大変遅れてしまい申し訳ありません。return文を始めに書いてしまったのはミスです。失礼しました。
> var obj = this.create()
このようにすればコントラクタでjqueryオブジェクトが扱えるようになるのですね。thisについてもっと勉強しなくてはいけません。
大変参考になりました。ありがとうございます。

2013/10/20 20:42:46
匿名回答2号 No.2

匿名回答2号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2013/09/19 18:13:50ここでベストアンサー

色々とチグハグなことをされていますし、なぜ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>"))を指すからである。

<>は全角です。

2013/09/19 18:32:59
匿名質問者

回答が大変遅れてしまい申し訳ありません。

このようなことを行ったのはjqueryオブジェクトにデータを持たせたかったからです。
jQuery.data()なんていうメソッドがあったのですね!これは便利です。既にやりたいことがメソッドで用意されていたなんて知りませんでした。
すごい助かりました。ありがとうございます。

それと「ラップ集合」についてまだ理解をしておりません。勉強いたします。細かな点まで記述ありがとうございます。今後の勉強課題が増えました。

2013/10/20 20:45:24
  • 匿名回答2号
    匿名回答2号 2013/09/27 22:17:15
    あーと、
    匿名回答1号さんは
    console.logに目を向けているのですか?
    バカ。
  • 匿名回答2号
    匿名回答2号 2013/09/27 22:18:47
    一旦、そこをフシアナで確認してみろ。
  • 匿名回答1号
    匿名回答1号 2013/09/29 12:02:09
     え、まだやってたの?
    http://jsfiddle.net/2Nt7d/1/
     ↑の結果を見て、まだ納得がいかなければコメントください。納得がいったならコメントは結構です。
  • 匿名回答1号
    匿名回答1号 2013/10/06 19:51:52
    ああ、2号さん jsfiddle 消したんだ?
    恥ずかしいのは分かるけど、これじゃ後から読んだ人がなにがなんだか分からんだろうにな。
     
    new演算子の振る舞いはこれを参考にするといいよ。
    http://nanto.asablo.jp/blog/2005/10/24/118564
    まあ、頑張ってください

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません