匿名質問者回答ポイント なしウォッチ

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

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

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

環境
PC:imac
ブラウザ：Chrome

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• 匿名回答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件のコメントを見る

  • 匿名回答2号 2013/09/19 18:32:59

    >> ラップ集合（この場合
    >> ）を指すからである。
    
    ラップ集合（この場合$("＜DIV＞")）を指すからである。
    
    ＜＞は全角です。

  • 匿名質問者 2013/10/20 20:45:24

    回答が大変遅れてしまい申し訳ありません。
    
    このようなことを行ったのはjqueryオブジェクトにデータを持たせたかったからです。
    jQuery.data()なんていうメソッドがあったのですね！これは便利です。既にやりたいことがメソッドで用意されていたなんて知りませんでした。
    すごい助かりました。ありがとうございます。
    
    それと「ラップ集合」についてまだ理解をしておりません。勉強いたします。細かな点まで記述ありがとうございます。今後の勉強課題が増えました。

その他の回答

• 匿名質問者

  2013/09/19 15:54:56

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

  • 

    10件のコメントを見る

  • 匿名回答2号 2013/09/19 18:34:09

    すみません、横から...。
    このコードってうまくいくんでしょうか？
    
    どうも、
    var obj = this.create()
    ↑この時点でjQueryオブジェクトになってしまい、
    
    xとyを設定したとしても
    return obj;
    ↑の時点でjQueryオブジェクト自体を返しているので、
    
    var mydiv = new Div(1, 2);
    ↑インスタンス化した際はthisは$("＜DIV>")を指し、create()メソッドは存在しないことになるのでは？？
    
    ※＜＞は全角です。

  • 匿名回答1号 2013/09/19 18:37:24

    create()メソッドは存在しないことになるのでは？？

    そうですけど、それが何か？
    元のコードにも含まれていないと思いますし、new で得られたオブジェクトにコンストラクタが含まれないことに何か問題ありますか？

  • 匿名回答2号 2013/09/19 18:52:13

    実行されてみればわかります。
    
    console.logには
    Object #

    has no method 'create'

  • 匿名回答2号 2013/09/19 18:53:16

    http://jsfiddle.net/2Nt7d/

  • 匿名回答1号 2013/09/19 19:10:07

    onloadで実行してますよ。ご確認のほどを。

  • 匿名回答1号 2013/09/19 19:13:13

    まあ、そこまでおっしゃるなら、追加しておきますけれども。

    $(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号 2013/09/20 18:12:09

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

  • 匿名回答3号 2013/09/21 08:52:50

    OOらしからぬ変態仕様に混乱して返事が出来ないのか我に返って枕に顔を埋めているのでしょう。
    javascript/perlの闇は常人に耐えられぬほど深いのです。察して上げましょう。
    匿名質問者さん宛メッセージとしては、このような事をしているとダークサイドに落ちてしまうので、普通の関数を使うかプラグインにしてしまうことをおすすめします。

  • 匿名回答1号 2013/09/21 10:58:32

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

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

  • 匿名質問者 2013/10/20 20:42:46

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

この質問へのコメント

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

質問の情報

登録日時

2013-09-19 15:54:02

終了日時

2013-09-26 15:55:04

回答条件

1人50回まで

この質問のカテゴリ

• コンピュータ
• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者21時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者221時間前
• 内定してほしいポケモンはいますか？匿名質問者22時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ