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

回答No.1

Chaire · ベストアンサー

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

pringlez

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