![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
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;
}
}
})();
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) が位置指定要素、を基準とする座標です。
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が見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript EasyUIのSubGrid(jquery)におけるObjectに入れた連想配列について 1 2022/05/02 11:21
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Webページ中の javascript をVB...
-
Shell.ApplicationでのIEオブ...
-
フォルダ内のファイル名を取得...
-
JSPの処理の途中で、JavaScript...
-
VB.NET2003 テキストボックスに...
-
正整数の半角数字かどうか判定する
-
gas 全角数字を半角数字に変換
-
VBAによる第3、4水準文字の判定...
-
jsでルートディレクトリより上...
-
C#でTextBoxに数値のみ入力可能...
-
VBAの[cellsメソッドは失敗しま...
-
PHPとjavascriptで共通なエンコ...
-
VB.NETからWEBブラウザの操作に...
-
計算結果が毎回違う。
-
デザイン時のVisible=Falseは実...
-
PowerPointで時計表示
-
Excel VBA カタカナ セル判定...
-
1つのVBAコードをすべてのコア...
-
既存のwebサイトで、ローカルの...
-
javascriptで「オブジェクトを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ローカルのレジストリを読みたい
-
Webページ中の javascript をVB...
-
画面間でのJavaScrip...
-
javaScriptでグローバル変数に...
-
フォルダ内のファイル名を取得...
-
CSSのクラスを動的に変更 classで
-
イベントevt?evt.target:event....
-
タブブラウザで focus() を実...
-
event.srcElementの動的設定
-
エクセル2010のvbaについて
-
jquery か javascript で json ...
-
【javascript】プロパティ?オ...
-
JavaScriptの仕様(ECMA-262以外)
-
PHPで定義した変数を引数として...
-
javascriptでオブジェクトのメ...
-
ASP.NETでURLにマッピングされ...
-
JavaScript 日数計算の関数で演...
-
VBAの引数の指定 カッコとイコ...
-
JavaScriptでオブジェクトを識...
-
jQueryで、listの要素数を取得...
おすすめ情報