立て続けに質問することをお許し下さい。。
以下のようなPersonクラスがあるとします。
/**** Person クラス(全角スペース表記) ****/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=UTF-8">
<META HTTP-EQUIV="Content-Script-Type" CONTENT="javascript">
<TITLE>教えて!gao</TITLE>
<SCRIPT TYPE="text/javascript">
function Person(name, age, sex, color) {
this.name = name;
this.age = age;
this.sex = sex;
this.color = color;
}
Person.prototype = {
name:null,
age:null,
sex:null,
color:null
};
Person.YELLOW = "黄色人種";
Person.BLACK = "黒色人種";
Person.WHITE = "白色人種";
function test() {
var person = new Person("ggaogg", 23, "male", Person.YELLOW);
var resultBlock = document.getElementById("resultBlock");
for (property in person) {
resultBlock.appendChild(document.createTextNode(property + " = " + person[property]));
resultBlock.appendChild(document.createElement("BR"));
}
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="test()">
<DIV ID="resultBlock"></DIV>
</BODY>
</HTML>
/********************************************************/
これの実行結果は、以下の通りです。
name = ggaogg
age = 23
sex = male
color = 黄色人種
しかし、静的変数を、毎回「Person.」を付けて記述するのは面倒で、すべて{}でひとくくりになっていたほうが可読性も増すと思い、以下のようにできると思いましたが、そうしたところ
new Person("ggaogg", 23, "male", Person.YELLOW);
の部分がコンストラクタではないというようなエラーとなってしまいます。(Web等でこの書き方はあまり見かけないが自分は気に入っている)
/************ 変更した部分 ******************/
Person = {
YELLOW : "黄色人種",
BLACK : "黒色人種",
WHITE : "白色人種"
};
/********************************************/
多分、初めに行ったコンストラクタの定義とこの{}の定義とが競合しているためだと思うのですが、何かよい書き方ありませんでしょうか。
No.3ベストアンサー
- 回答日時:
あ、質問がなんとなくわかりましたが、説明が難しい。
/* 書換え前 */
Person.YELLOW = "黄色人種";
Person.BLACK = "黒色人種";
Person.WHITE = "白色人種";
の部分だけを
/* 書換え後 */
Person = {
YELLOW : "黄色人種",
BLACK : "黒色人種",
WHITE : "白色人種"
};
と単に簡略化したいと言う事でしょうか?
書換え後の方法でPersonに後から追加してるつもりなら、
この書き方では『追加』にならずに新たな Person 変数(オブジェクト)を定義してるだけ。
同じ名前を持つ コンストラクタ function Person(){} がこの時点で消滅します。
また、prototypeで追加の形をとれば、それらはコンストラクタとして呼ばれた時に全てを生成してしまいます。
そもそも書換え前の時点でも Personをコンストラクタとして用意しながら、
オブジェクトとして別利用(間借りしてるような物)してるので、それ自体が目的とする意図ともしかしたらずれてるかもしれないと思います。
コンストラクタとなる function Person の中で #2の方法などで
this.colorを定義する時に 引数colorの値に応じて動的に定義させるか、
colorに渡す引数を別の場所でオブジェクトとして定義しておきたいなら、
col = {
YELLOW : "黄色人種",
BLACK : "黒色人種",
WHITE : "白色人種"
};
var person = new Person("ggaogg", 23, "male", col.YELLOW);
の様に Personではなく、別の名前にすれば普通に成り立ちます。
ちょっと考えすぎて迷路に入ってませんか? ^^;
>と単に簡略化したいと言う事でしょうか?
そうそう、そうなんです。
長くJavaのスタイルに慣れてしまったせいで、現在JavaScriptの書き方に当惑中です。。
#2の方法ですが、ハッシュを一時的に作成して、そこから値を取り出すということが、#3を読んでようやく分かりました。
残念ながら#2は今回求めていた答えそのものではなかったですが、こんな書き方も面白いですね。
定数だけ別のクラスに定義する方法は、無難ではありますね。
そもそもC言語とかだと名前空間も何もないところにdefineしているわけですし、Cの後にJavaを学習したときにも、「クラスの外に定数宣言できないかな・・」と考えていたことを思い出しました・・。
というわけで、なんだか色々と考えて頂いちゃったみたいですけど、JavaScriptの流儀でやろうと思います。
言語仕様で簡単に素直に実現することが難しいということが分かっただけでも収穫でした。
どうもありがとうございました。
No.2
- 回答日時:
質問者さんの作ろうとしてる物と意図が同じになるかわかりませんが
function Person(name, age, sex, color) {
this.name = name;
this.age = age;
this.sex = sex;
this.color = {YELLOW:"黄色人種",BLACK:"黒色人種",WHITE:"白色人種"}[color];
}
function test() {
var person = new Person("ggaogg", 23, "male", 'YELLOW');
var resultBlock = document.getElementById("resultBlock");
for (property in person) {
resultBlock.appendChild(document.createTextNode(property + " = " + person[property]));
resultBlock.appendChild(document.createElement("BR"));
}
}
これで事が足りるでしょうか?
No.1
- 回答日時:
私が知っている限りでは
withでしょうか…あまりオススメしませんが
with( Person )
{
YELLOW = "";
BLACK = "";
WHITE = "";
}
これでいけると思います。多分…。
先ほどの質問に続き、ありがとうございます。
調べてみると、javascript1.2で導入されたようですね。
こちらの環境では、Person.YELLOW、Person.BLACK、Person.WHITEは、いずれもundefinedになりました(IE7とFireFox2.0.0.12)。
さらに、ai10さんがおっしゃられるように、現在非推奨であるとの記述が多々あったので、これを使うのは避けようと思います。
しかし情報が見つからなかっただけでなく、実際にJavaScriptを使われている方でも使わない記述となると、私の求めるものはなんだか邪道に思えてきました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- JavaScript GoogleChart 階層ごとのブロックの長さを個別に設定したい 1 2022/07/06 14:27
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- AJAX JavascriptからPHPへのAjax通信でnullが返ってくる 3 2022/08/03 22:00
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
DOM要素を削除しても、イベント...
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
javascript で li タグにある値...
-
Null またはオブジェクトではあ...
-
FireFoxのjavascriptで自動でキ...
-
bxsliderでpagerCustomのクラス...
-
キーコードなどでAlt+○を認...
-
responseTextについて
-
C#テキストボックスの文字を配...
-
C#OpenCv V4にのエラーに関する...
-
functionから別のfunctionを実...
-
同じIDで定義した要素の配列を...
-
idを使わずにonclickで自身の要...
-
関数でy=g(x)のgとは何の略です...
-
Boolean型配列中のTrueの有無を...
-
台形公式
-
C言語の質問です HTMLでこのよ...
-
【正規表現】【javascript】CR...
-
jslintのエラーについて質問
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScript window.openで開く...
-
このjavascriptのif文、条件式...
-
FireFoxのjavascriptで自動でキ...
-
DOM要素を削除しても、イベント...
-
javascriptの基本的なことだと...
-
文字を一文字ずつ表示
-
showModalDialogで開いた画面を...
-
Null またはオブジェクトではあ...
-
Javascriptのhtml出力についてa...
-
codejump 模写コーディングgall...
-
LaTeX:数式を等号揃えにする方法
-
javascriptのdocument.allにつ...
-
excle VBA とweb上の検索を利用...
-
Latexに関する質問です。
-
乗換案内 VBAで操作したい
-
JavaScriptのdocument.all("変...
-
Javascriptで定期的にF5を押す...
-
選択によってsubmitボタンの色...
-
スマホでフォームにフォーカス...
-
compatModeとは?
おすすめ情報