JavaScript オブジェクトのソースを表示
新しいページはコチラ
移動:
案内
,
検索
[[JAVA Script#リファレンス]]に戻る。 == 宣言と__proto__プロパティ == *objName1 = new Object; *objName1 = new Object(); :上記のように記述することでobjName1は空のオブジェクトになります。空といってもObject自体にはいくつかの機能がありますので、objName1にはObjectにぶら下がっている関数やプロパティ値が保持されます。例えば、どのようなプロパティ値があるのかを示すようなサンプルを以下にしめします。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript 宣言</TITLE> </HEAD> <BODY> JavaScript 宣言<br /> <SCRIPT Language="JavaScript"> <!-- objName1 = new Object(); objName2 = new Object("newって使わない方がいいんじゃね?"); document.write("■Object.__proto__<br />"); document.write(Object.prototype === objName1.__proto__, "<br />"); document.write(objName1, "<br />"); document.write(String.prototype === objName2.__proto__, "<br />"); document.write(objName2, "<br />"); for(var key in objName2){ document.write("key = ", key , ", Value = ", objName2[key] ,"<br />"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object declare.html|実行結果サンプル]] 例えば、objName1.__proto__のようなプロパティがあります。このプロパティにはnewキーワードで生成されたオブジェクトのObject.prototypeプロパティ値と同じ値が保持されるものです。objName1自体を出力した場合でも[object Object]のように出力されるのは、prototypeの紐づけが__proto__に格納されているために起こります。サンプルでは、__proto__値は文字として出力はできるような構造ではないため、同じ値になっているかどうかを比較した結果を出力するようにしています。newで生成する際に初期値として文字列を設定したobjName2は自動的にStringオブジェクトと同じ構造が保持されていて、その構造がStringオブジェクトと同等にふるまいます。出力結果はそのことを確認できるものになっています。 このようにObjectには空のObjectでも何かしらの構造を保持していることがわかりましたが、__proto__というイマイチよく理解できないような複雑なプロパティをもっていることもわかってしまいました。この__proto__やprototypeのようなプロパティの仕組みを詳細に解説しようとするとかなり長くなってしまいますが、この複雑さの理解を助けるような記事にするべく、引き続きオブジェクトについての記事を記述していきたいと思います。 == constructor プロパティ== *objName1.constructor :上記のようなプロパティを記述することでobjName1の生成元が返されます。ようするにサンプルのとおりになります。先のサンプルに☆☆☆マークで明記した部分が追加した処理になります。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript constructor</TITLE> </HEAD> <BODY> JavaScript constructor<br /> <SCRIPT Language="JavaScript"> <!-- function funcName(){ funcName.nValue = 1; } objName1 = new Object(); objName2 = new Object("newって使わない方がいいんじゃね?"); document.write("■Object.__proto__<br />"); document.write(Object.prototype === objName1.__proto__, "<br />"); document.write(objName1, "<br />"); document.write("<br />"); document.write("☆☆☆<br />"); document.write(objName1.constructor, "<br />");//☆☆☆ document.write("☆☆☆<br />"); document.write("<br />"); document.write(String.prototype === objName2.__proto__, "<br />"); document.write(objName2, "<br />"); for(var key in objName2){ document.write("key = ", key , ", Value = ", objName2[key] ,"<br />"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object constructor.html|実行結果サンプル]] == prototype プロパティ== *Object.prototype.dateToday = "2016/02/23"; :上記のようにすることで、ObjectというオブジェクトにdateTodayというプロパティが作成されると同時に値として文字列の2016/02/23が格納されます。したがって、Objectという空のオブジェクトを保持するオブジェクトobjName1のようなオブジェクトにはobjName1.dateTodayというプロパティの参照や値の入れ替えが可能です。サンプルは前述から追加した部分を☆☆☆マークで示しました。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript prototype</TITLE> </HEAD> <BODY> JavaScript prototype<br /> <SCRIPT Language="JavaScript"> <!-- function funcName(){ funcName.nValue = 1; } objName1 = new Object(); objName2 = new Object("newって使わない方がいいんじゃね?"); document.write("■Object.__proto__<br />"); document.write(Object.prototype === objName1.__proto__, "<br />"); document.write(objName1, "<br />"); document.write("<br />"); document.write("☆☆☆<br />"); Object.prototype.dateToday = "2016/02/23"; document.write(objName1.dateToday, "<br />"); document.write("☆☆☆<br />"); document.write("<br />"); document.write(objName1.constructor, "<br />"); document.write(String.prototype === objName2.__proto__, "<br />"); document.write(objName2, "<br />"); for(var key in objName2){ document.write("key = ", key , ", Value = ", objName2[key] ,"<br />"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object prototype.html|実行結果サンプル]] 上記のようにobjName1オブジェクトを生成してからprototypeによって新しくObjectのプロパティとしてdateTodayを追加したとしても、objName1のdateTodayプロパティの値の保持が反映されます。あんまり役に立たない技術かもしれませんが、こんなこともできるよという程度です。 == valueOf メソッド == *objName1.valueOf(); :objName1の値を出力します。オブジェクト毎に既定の出力値が定まっています。具体的には以下のとおりです。 :*Object Object自身が返却されます。 :*Array 配列の実体が返却されます。 :*Boolean ブール値(false or true)が返却されます。 :*Date 世界協定時のミリ秒が返却されます。 :*Function 関数の内容が返却されます。 :*Number 格納されている数値が返却されます。 :*String 格納されている文字列が返却されます。 :より具体的にはサンプルのとおりです。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript .valueOf()</TITLE> </HEAD> <BODY> JavaScript .valueOf()<br /> <SCRIPT Language="JavaScript"> <!-- objObject = new Object; objArray = new Array('1', '2'); objBoolean = new Boolean; objDate = new Date; objFunction= new Function; objNumber = new Number(123); objString = new String("1234"); with(document){ write("<TABLE BORDER=\"1\">\n"); write("<TR>\n"); write("<TD>\n"); write("Object.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Object.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objObject.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Array.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Array.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objArray.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Boolean.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Boolean.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objBoolean.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Date.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Date.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objDate.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Function.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Function.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objFunction.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Number.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(Number.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objNumber.valueOf()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("String.valueOf()\n"); write("</TD>\n"); write("<TD>\n"); write(String.valueOf()); write("</TD>\n"); write("<TD>\n"); write(objString.valueOf()); write("</TD>\n"); write("</TR>\n"); write("</TABLE>\n"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object valueOf.html|実行結果サンプル]] == toString() メソッド == *objName1.toString(); :objName1の文字列を出力します。オブジェクト毎に既定の出力値が定まっています。具体的には以下のとおりです。 :*Object Object名[object オブジェクト名]の形式で文字列が返却されます。 :*Array 配列の実体を文字列にした形式が返却されます。 :*Boolean ブール値(false or true)が文字列で返却されます。 :*Date 世界協定時をブラウザを使用しているOSのロケールもしくはブラウザに設定されたロケールにしたがって日時の文字列形式にしたものを返却します。 :*Function 関数の内容が文字列で返却されます。 :*Number 格納されている数値が返却されます。引数に基数を指定できます。 :*String 格納されている文字列が返却されます。 :*Error エラーメッセージが文字列で返却されます。 :より具体的にはサンプルのとおりです。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript メソッド.toString()</TITLE> </HEAD> <BODY> JavaScript メソッド.toString()<br /> <SCRIPT Language="JavaScript"> <!-- objObject = new Object; objArray = new Array('1', '2'); objBoolean = new Boolean; objDate = new Date; objFunction= new Function; objNumber = new Number(123); objString = new String("1234"); objError = new Error("エラーが発生しました。"); with(document){ write("<TABLE BORDER=\"1\">\n"); write("<TR>\n"); write("<TD>\n"); write("Object.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Object.toString()); write("</TD>\n"); write("<TD>\n"); write(objObject.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Array.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Array.toString()); write("</TD>\n"); write("<TD>\n"); write(objArray.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Boolean.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Boolean.toString()); write("</TD>\n"); write("<TD>\n"); write(objBoolean.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Date.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Date.toString()); write("</TD>\n"); write("<TD>\n"); write(objDate.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Function.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Function.toString()); write("</TD>\n"); write("<TD>\n"); write(objFunction.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Number.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Number.toString()); write("</TD>\n"); write("<TD>\n"); write(objNumber.toString(16)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("String.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(String.toString()); write("</TD>\n"); write("<TD>\n"); write(objString.toString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Error.toString()\n"); write("</TD>\n"); write("<TD>\n"); write(Error.toString()); write("</TD>\n"); write("<TD>\n"); write(objError.toString()); write("</TD>\n"); write("</TR>\n"); write("</TABLE>\n"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object toString.html|実行結果サンプル]] == toLocaleString() メソッド == *objName1.toLocaleString(); :objName1のロケール情報に基づいた文字列を出力します。オブジェクト毎に基本的にはtoStringと動作が変わりませんが、DateオブジェクトとNumberオブジェクトのみ日本のロケール情報では既定の出力値が特別に定まっています。具体的には以下のとおりです。 :*Date 世界協定時をブラウザを使用しているOSのロケールもしくはブラウザに設定されたロケールにしたがって日時の文字列形式にしたものを日付の情報のみ返却します。 :*Number 格納されている数値が3桁ごとにカンマで区切られた簿記形式の数値で返却されます。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript メソッド.toLocaleString()</TITLE> </HEAD> <BODY> JavaScript メソッド.toLocaleString()<br /> <SCRIPT Language="JavaScript"> <!-- objObject = new Object; objArray = new Array('1', '2'); objBoolean = new Boolean; objDate = new Date; objFunction= new Function; objNumber = new Number(123500); objString = new String("1234"); objError = new Error("エラーが発生しました。"); with(document){ write("<TABLE BORDER=\"1\">\n"); write("<TR>\n"); write("<TD>\n"); write("Object.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Object.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objObject.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Array.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Array.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objArray.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Boolean.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Boolean.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objBoolean.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Date.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Date.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objDate.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Function.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Function.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objFunction.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Number.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Number.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objNumber.toLocaleString(16)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("String.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(String.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objString.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Error.toLocaleString()\n"); write("</TD>\n"); write("<TD>\n"); write(Error.toLocaleString()); write("</TD>\n"); write("<TD>\n"); write(objError.toLocaleString()); write("</TD>\n"); write("</TR>\n"); write("</TABLE>\n"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object toLocaleString.html|実行結果サンプル]] == 記事作成用テンプレート == サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object yoobidashi.html|実行結果サンプル]] [[JAVA Script#リファレンス]]に戻る。
JavaScript オブジェクト
に戻る。
個人用ツール
ログイン
名前空間
ページ
議論
変種
表示
閲覧
ソースを表示
履歴表示
操作
検索
案内
メインページ
コミュニティ・ポータル
最近の出来事
最近の更新
おまかせ表示
ヘルプ
ツールボックス
リンク元
関連ページの更新状況
特別ページ