javascriptでオブジェクトのメソッドを使う

このQ&Aのポイント
  • JavaScriptでオブジェクトのメソッドを使う方法について
  • Javaでのsetter getterのようなメソッドを作成して使用することは可能か
  • 特定のコードでエラーが発生し、メソッドが存在しないと言われる問題についてのアドバイスを求めています
回答を見る
  • ベストアンサー

javascriptでオブジェクトのメソッドを使う

JavaScriptでnewでオブジェクト化したクラス(?)のメソッド、フィールドを利用する方法を教えて下さい。 javascriptにもオブジェクト化という考え方があると聞いたのですが、 例えば、Javaでいうsetter getterのようなメソッドを作り、使用することはできるのでしょうか? 下記のようなコードを実行したところ Uncaught TypeError: Object #<mousePosi> has no method 'setPara' というエラーが出てしまい、setParaというメソッドはない。と言われてしまいます。 しかし、mousePosi()をオブジェクト化することはできているようなので、 setParaとgetParaを使えるのではないかとおもいました。 どなたかアドバイス下さい。お願いします。 ------------------------------------------------------------------------------------------------- (function LineMain() { console.log("マウスの位置座標を表示"); // console.log("X座標=" + mymouse.x + ",Y座標=" + mymouse.y); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var event = event; var myMousePosi = new mousePosi(); myMousePosi.setPara(event); // console.log("X座標=" + obj.getMouse().x + ",Y座標=" + obj.getMouse().y); } function mousePosi() { var paraMouse = { x : 0, y : 0 }; function setPara(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } function getPara() { return this.paraMouse; } } })();

質問者が選んだベストアンサー

  • ベストアンサー
  • Chaire
  • ベストアンサー率60% (79/130)
回答No.1

JavaScript における「オブジェクト」とは、「プロパティ」と呼ばれるスロットの集合のことです。クラス・フィールドという概念はありません。また、メソッドとは、プロパティの中身が関数オブジェクトであるようなものです。 まず、最も基本となるオブジェクトを作り、基本プロパティをそこに集約させます。このオブジェクトをプロトタイプと呼びます。そして、オブジェクトは、プロパティをプロトタイプから「借りてくる」ことができます。そうすれば、自分の持つプロパティを節約できます。このとき、プロパティとしてアクセスできないものを「借りてくる」ことはできません(No.0 における mousePosi は何のプロパティでもありません)。 このように、JavaScript では全てがオブジェクトベースで動きます。これを擬似的に「クラス」と呼ぶ人もいますが、この用語は他の用途のためにとっておくべきと思います。 --- // ECMAScript 5 + DOM4 document.addEventListener('mousemove', Object.create(null, new function () {  var _x = 0;  var _y = 0;    this.handleEvent = {   value: function handleEvent (e) {    this.xy = e;    console.log(this.x, this.y);   }  };  this.xy = {   set: function (e) {    _x = e.pageX;    _y = e.pageY;   }  };  this.x = {   get: function () {    return _x;   }  };  this.y = {   get: function () {    return _y;   }  }; })); ECMAScript 5 で導入された Object.create などを使えば、セッタ・ゲッタを定義できます。上では x、y がゲッタになっており、this.x のようにして値の取得は可能ですが、this.x = 0 のように上書きすることはできません。また、xy がセッタになっており、this.xy = event と書くと座標値を上書きしますが、this.xy 取得時は undefined を返します。 --- Object.create 以前なら、 document.addEventListener('mousemove', new function () {  var _x = 0;  var _y = 0;    this.handleEvent = function handleEvent (e) {   this.setXY(e);   console.log(this.getX(), this.getY());  };  this.setXY = function (e) {   _x = e.pageX;   _y = e.pageY;  };  this.getX = function () {   return _x;  };  this.getY = function () {   return _y;  }; }, false); のようになるでしょうが、メソッド(関数プロパティ)自体が上書き可能です(Object.create で生成したプロパティは、特に指定しない限り上書き不可、列挙不可になります)。 --- なお、イベントリスナとして handleEvent を持つオブジェクトを渡せるのは NN6 の独自拡張でしたが、Opera、Safari が追従し、DOM4 で標準化されます。handleEvent 内の this 値はリスナオブジェクトを指します。 また、event.x、event.y は歴史的に難しいプロパティなので、使用を避けた方が無難です。page(X|Y) がページ全体、client(X|Y) が表示域(x、y もこれに統合される予定)、offset(X|Y) が位置指定要素、を基準とする座標です。

その他の回答 (1)

  • pringlez
  • ベストアンサー率36% (598/1630)
回答No.2

# Uncaught TypeError: Object #<mousePosi> has no method 'setPara' # というエラーが出てしまい、setParaというメソッドはない。と言われて ということはChromeということですよね。何でやっているかという情報はちゃんと書いたほうがいいですよ。 あなたはメソッドと内部関数の違いが理解できていらっしゃらないのでしょう。あなたが書いたコードでは「setPara」は内部関数として定義されています。そして「setPara」というメソッドは存在しません。メソッドが存在しないから「<mousePosi> has no method 'setPara'」というメッセージが出るのです。あなたのコードでできるだけ手を加えずに修正するとこうですかね。 (function LineMain() { console.log("マウスの位置座標を表示"); //マウスムーブでeventControlを呼び出し addEventListener("mousemove", eventControl, false); function eventControl(event) { var myMousePosi = new mousePosi(); myMousePosi.setPara(event); } function mousePosi() { this.paraMouse = { x : 0, y : 0 }; this.setPara = function(event) { this.paraMouse.x = event.x; this.paraMouse.y = event.y; } this.getPara = function() { return this.paraMouse; } } })();

関連するQ&A

  • javascript new演算子について質問があります。

    javascript new演算子について質問があります。 只今javascript勉強中なのですが、どこかのサイトでnew演算子は悪いパーツとの 記事を読みました。 そこでnew演算子を使用せずにオブジェクト生成の方法を試行錯誤考えてみたのですが (IE用に__proto__もなしで)例えば以下コードはアリなコードでしょうか?? あるいはありえない感じでしょうか?? またnewが悪なのはインスタンスを作る時にnewを付け忘れると、 グローバルな汚染をしてしまうということだけなのでしょうか?? オブジェクトとプロトタイプの理解に苦しんでいるところなので 色々と曖昧なのですが、どなたかどうぞご教授お願い致します。 var obj = {}; obj.method = function(){ this.prop1 = "hoge" return this; }; obj.method.prototype = obj.method(); obj.method.prototype.prop2 = "fuga"; var obj2 = obj.method(); console.log(obj2)

  • javascriptのObject()コンストラクタについて質問です。

    javascriptのObject()コンストラクタについて質問です。 var obj = new Object(); var obj2 = Object(); console.log(obj === obj2)//false いつも質問ばかり恐縮です。。。 どこかのサイトでこの2つは等価みたいな記事を読んだような気がするのですが、 ということはObjectコンストラクタでオブジェクトを作る際はnew演算子は要らない?? のでしょうか?? またobjとobj2の2つの違いを色々試したのですが違いがわかりません。new演算子を 付けたインスタンスと付けないインスタンス??の違いをどなたか ご教授いただけると助かります。

  • javascriptのコードについて

    以下のコードなのですが、 エンクロージャー関数の ローカル変数hogeをさらに、エンクロージャー内部で定義された 関数ででクロージャーとして保持させたいメソッドのコードですが var Method = function (){ var hoge = "初期値"; var getter = function (){ return hoge; } var setter = function (param){ hoge = param; return hoge; } return {"set" : setter,"get" : getter} } var obj = Method(); console.log(obj); console.log(obj . get()); obj.set("初期値変更"); console.log(obj.get()); obj . set("更に変更"); console.log(obj.get()); この場合、メソッドの返り値として、一般的な文献に乗っている関数(関数オブジェクト)を返すのではなく オブジェクトリテラルとして返しています。 この場合でも、動きとしてはクロージャーの動きをしているのでhogeという変数の保持はできているっぽいんですが クロージャーって関数内で定義された関数であれば、どういう返り値の返し方でも クロージャーになるのですかね? また、この方法は、一般的にjsで関数コンストラクタ呼び出しをしてインスタンスを作る際privateメンバを実現する方法として紹介されていますが、 これはクロージャーとして生成するたんびに内部の変数を保持するためメモリ食い虫になるらしいのですが まず間違いなく、このクラス(便宜上そう呼びます)のインスタンスはひとつしかつくることはない!!という仕様だとしても いけないのでしょうか? というかもう現状javascripのバッドノウハウ的なものになっているのでしょうか?

  • インラインフレーム内の変数を親ページから呼び出す

    インラインフレーム内のマウス位置を↓のjavascriptコードで取得しているのですが、親ページのjavascriptの関数で使用したいです。どのようにインラインフレーム内の変数を親ページから呼び出して、利用すればよいのでしょうか? var x, y; window.addEventListener("DOMContentLoaded", function(){ window.document.onmousemove = function(e){ x = getMousePosition(e).x; } },false); function getMousePosition(e) { var obj = new Object(); if(e) { obj.x = e.pageX; obj.y = e.pageY; } else { obj.x = event.x + document.body.scrollLeft; obj.y = event.y + document.body.scrollTop; } return obj; }

  • 【javascript】プロパティ?オブジェクト?

    皆様あけましておめでとうございます!! 新年早々質問させていただけたらと思います。 ただいまオライリーのjavascriptのサイ本第六版を読みながら勉強してるのですが、 以下の部分がどうしても理解できません・・・ range.methods = { includes: function(x) { return this.from <= x && x <= this.to; }, foreach: function(f) { for(var x = Math.ceil(this.from); x <= this.to; x++) f(x); }, toString: function() { return "(" + this.from + "..." + this.to + ")"; } }; var r = range(1,3); // Create a range object r.includes(2); // => true: 2 is in the range r.foreach(console.log); // Prints 1 2 3 console.log(r); // Prints (1...3) 本にmethodsプロパティにinculedsやforeachを格納すると書いてあります。 2行目:includesや3行目foreachはプロパティでプロパティに関数を設定することでr.inculdes(2)で関数として呼び出しているんですよね!? なので2行目:includesや3行目foreachはプロパティという認識で間違いないでしょうか? ということはプロパティのなかにプロパティをを設定してるという形になるのでしょうか? どうもしっくりこなくて悩んでおります。 よろしくお願いします。

  • [JS] private関数からオブジェクト参照

    JavaScriptにて外部から使用する関数をpublicに、内部的に使用するだけの関数をprivateにしたく、 <http://d.hatena.ne.jp/brazil/20051028/1130468761>や<http://www.findxfine.com/programming/javascript/59.html>を参考に以下のようにしてみました。 func1はtestクラス内からしか呼び出せず、privateになっており、 func2はtestクラス外からも呼び出せて、publicになっているようです。 しかし、func2からfunc1を呼び出した際に、func2の呼び出しもとのオブジェクトを参照しようとすると undefinedになってしまいます。 var a = new test(); //a.func1(); // これはprivateなのでエラー a.func2(); // こちらはpublicなのでOK function test(){ var self = this; // private variable var data1 = 1; // public variable this.data2 = 2; // private function function func1(){ console.log(data1); // 1を表示 console.log(this.data2); // これがundefinedとなってしまう } // public function this.func2 = function(){ console.log(data1); // 1を表示 console.log(this.data2); // 2を表示 func1(); }; } どのようにすれば、オブジェクト変数を参照でき、 クラス内でのみ使用可能なprivate関数を定義できるのでしょうか。

  • オブジェクト 

    JavaScriptのオブジェクトについて。初心者です。 オブジェクトは順番がない、という仕様ですが。 何かアルゴリズムで、順番(定義した順)に取り出せないでしょうか? var obj={ "su":"tanaka", "ro":"suzuki", "en":"honda" } console.log(???(obj)); tanaka,suzuki,honda

  • javascriptで困っています。教えてください

    javascript初心者です。javascriptでクラスのようなものを扱えると知り、いろいろ調べながら取り組んでいます。 html <div id="a"></div> css #a{ width:100px; height:100px; background-color:#0F0; } javascriptでクラスを作って function Character(x,y){      this.ele = document.getElementById("a"); this.x = x; this.y = y; this.move = function () { this.x += 100; this.y += 100; this.ele.style.left = this.x; this.ele.style.top = this.y; } } var cha = new Character(10,10); cha.move(); としたら、緑の正方形が座標(100,100)あるのかと思っていたのですが、うまくいきませんでした。 javascriptのクラスとhtmlの要素を紐づけるにはどうしたらいいのでしょうか?教えてください。

  • javascriptを只今勉強中なのですが、オブジェクトについてこんが

    javascriptを只今勉強中なのですが、オブジェクトについてこんがらがってしまいました。 var obj = new Object(); var obj2 = {}; Object.prototype.prop1 = "hoge"; obj,obj2共にprop1にhogeがセットされるのですが、オブジェクトリテラルのobj2は Objectコンストラクタのインスタンスと解釈できるのでしょうか?? new演算子について色々とfirebugで調べていたところこの疑問が出てきました。 newなしでもインスタンスができるのでしょうか? オブジェクトを理解していないので意味不明な質問かもしれませんが どなたかアドバイスいただけると嬉しいです。

  • オブジェクトとメソッドの、定義の分離

    JavaScriptにて、最初にメソッド用の関数を定義しておいた後、それを複数のオブジェクトのメソッドとして利用するようにしたいのですがうまくいきません。 *************************** <html> <head> <title>test</title> <script type="text/javascript"> function a() {return this.size;} function b(s) {this.size = s;} function rectA() { this.size = 0; this.getSize = a; this.setSize = b; this.notice = function() {alert(this.getSize());} } function rectB() { this.size = 0; this.arg = 90; this.getSize = a; this.setSize = b; this.notice = function() {alert(this.getSize());} } </script> </head> <body> <script type="text/javascript"> var a = new rectA; var b = new rectB; a.setSize(12); b.setSize(250); a.notice(); b.notice(); </script> </body> </html> ************************* 要するに↑のコードのようなことをやりたいのですが、FireFox3.6と12.1で実行した限りでは、a.notice()は実行されるものの, b.notice()の段階では「this.getSize is not a function」というエラーが出てしまいます。 上手な解決法がありましたらお願いします。