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|実行結果サンプル]] == propertyIsEnumerable() メソッド == *objName1.propertyIsEnumerable(1); :上記のような記述によりオブジェクトがForループのvar a in objName1のような形式で列挙できるかどうかを判定しBoolean値を返却します。特にArrayおよびStringは判定がOKになることが多いです。その他オブジェクトで要素を複数含んでいれば、trueが返却されます。引数にはオブジェクトの要素番号もしくは、プロパティ値を指定することもできます。配列オブジェクトを要素番号で指定する場合は要素番号が存在するかを確認することになります。プロパティ値を指定した場合はForループで列挙できるかを確認します。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript メソッド.propertyIsEnumerable()</TITLE> </HEAD> <BODY> JavaScript メソッド.propertyIsEnumerable()<br /> <SCRIPT Language="JavaScript"> <!-- objObject = new Object; objArray = new Array("HR-V", "ESTIMA", "LEXUS"); 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.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Object.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objObject.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Array.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Array.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objArray.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Boolean.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Boolean.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objBoolean.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Date.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Date.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objDate.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Function.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Function.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objFunction.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Number.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Number.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objNumber.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("String.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(String.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objString.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("<TR>\n"); write("<TD>\n"); write("Error.propertyIsEnumerable(1)\n"); write("</TD>\n"); write("<TD>\n"); write(Error.propertyIsEnumerable(1)); write("</TD>\n"); write("<TD>\n"); write(objError.propertyIsEnumerable(1)); write("</TD>\n"); write("</TR>\n"); write("</TABLE>\n"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object propertyIsEnumerable.html|実行結果サンプル]] == prototype.isPrototypeOf() メソッド == *Object.prototype.isPrototypeOf(objName1); :上記のようにするとObjectのprototypeがobjName1に格納されているか?つまりObject型になっているかを確認するためのメソッドが準備されています。あんまり使わないかもしれませんが、こういうのも覚えておくと意外と役に立つときがあったがりします。ややこしい話を持ち出すのは好きではないのですが、こういうNewキーワードによるオブジェクトの生成結果で__proto__の中にprototypeを割り当てる仕組みをJAVA Script界ではプロトタイプチェーン(prototypechain)と呼んでいます。もっとややこしいことを言うと、C++で言うところのクラスのような仕組みを作ることも可能ですが、それもこれもこのprototypechainの仕組みによって実現されます。あまり内部的な仕組みを理解しようとせず、感覚で使うのもよいと思います。ややこしい話は嫌いですが、ちょこちょこ小出しにして、いつの間にか理解していたっていうのがBESTかなぁと思っています。理解してもらえるかどうかは、未知数ですよね。まぁいい。まぁいい。じっくりやっていこう。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript メソッド.prototype.isPrototypeOf()</TITLE> </HEAD> <BODY> JavaScript メソッド.prototype.isPrototypeOf()<br /> <SCRIPT Language="JavaScript"> <!-- objObject = new Object; document.write("■prototype.isPrototypeOf()<BR />"); document.write(Object.prototype.isPrototypeOf(objObject)); --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object isPrototypeOf.html|実行結果サンプル]] == hasOwnProperty() メソッド == *objObject.hasOwnProperty(”property_nValue”); :上記のようにすると、objObjectのプロパティ値にprperty_nValueというプロパティが存在するかを評価します。存在すればtrueなければfalseです。この評価はprototypechainを辿らず(この表現は、オブジェクトの中にオブジェクトを持つ構造の子供にあたるオブジェクトまで見るかということを意味しています。)、objObject直下のプロパティとして存在するかを評価します。prototypechainを辿る評価方法としてはinキーワードを使う方法があり、 *"property_nValue" in objObject :のように記述することで、prototypechainを辿ります。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript メソッド.hasOwnProperty()</TITLE> </HEAD> <BODY> JavaScript メソッド.hasOwnProperty()<br /> <SCRIPT Language="JavaScript"> <!-- function Func1(){ this.property_nValue1 = 100; } function Func2(){ this.property_nValue2 = 100; } Func1.prototype = new Func2(); Func2.prototype.property_nValue3 = 200; objFunc = new Func1(); document.write("■hasOwnProperty()<BR />"); document.write(objFunc.hasOwnProperty("property_nValue1"), "<BR />"); document.write(objFunc.hasOwnProperty("property_nValue2"), "<BR />"); document.write("<BR />"); document.write("■in<BR />"); document.write("property_nValue1" in objFunc, "<BR />"); document.write("property_nValue2" in objFunc, "<BR />"); --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object hasOwnProperty.html|実行結果サンプル]] == ソースオブジェクト オブジェクト初期化子 == *var objSource1 = {a:1,b:2}; :上記のようにするとobjSource1.a = 1、objSource1.b =2のように初期化されたオブジェクトが生成されます。{}で囲われたオブジェクトを変数に代入するような、こういったものをソースオブジェクトと呼んでいて、test1:1のようにしてプロパティ値を設定するときの:をオブジェクト初期化子と呼びます。オブジェクトなので{}中は構造的なモノだけを指定します。プログラムを記述する部分では無いことに注意してください。プロパティ値に関数を指定することはできます。このあたりの利用方法はややこしくなってくるのでまた後の方でサンプルを示します。まずは単純なプロパティ値を設定するサンプルを示します。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript ソースオブジェクト オブジェクト初期化子</TITLE> </HEAD> <BODY> JavaScript ソースオブジェクト オブジェクト初期化子<br /> <SCRIPT Language="JavaScript"> <!-- var objSource1 = { test1:1, test2:2, test3:3 }; document.write("■objSource", objSource1 ,"<BR />"); for(var key in objSource1){ document.write("objSource1 key = ", key , ", objSource1[", key,"] = ",objSource1[key],"<BR />"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object sourceObject.html|実行結果サンプル]] == .assign 関数 == *objSource3 = Object.assign(objSource1,objSource2); :上記のようにassign関数の引数に二つのオブジェクトを記述して、結合したものをobjSource3に格納するような動作をする関数です。objSource1と2の両方にあるプロパティ値およびメソッドの全てを保持するobjSource3が生成されます。同じプロパティ値があった場合は引数の後ろ側に書かれたオブジェクトが保持している値が優先されて上書きされます。上記の例ではobjSource2の値が保持されます。また、引数の1番目に空のオブジェクト{}を指定すると、objSource2のオブジェクトそのものがobjSource3のオブジェクトになりますので、オブジェクトをコピーするような処理になります。引数1のオブジェクト自体も2番目のオブジェクトと結合した形にアサイン(割り当て)されます。 '''InternetExplorer(11までの全てのIE)ではサポートされないオブジェクト関数です。'''JAVA Scriptユーザにはありがたい機能なのですが、普及率を考えると致命的なものがある関数になっています。 EdgeやChromeではサポートされています。 サンプル <syntaxhighlight lang="javascript" line start="1"> <HTML> <HEAD> <TITLE>JavaScript assign</TITLE> </HEAD> <BODY> JavaScript assign<br /> <SCRIPT Language="JavaScript"> <!-- var objSource1 = { test1:1, test2:2, test3:3 }; var objSource2 = { test1:100, nValue1:1, nValue2:2 }; var objNull = {}; objSource4 = Object.assign({},objSource1); objSource5 = Object.assign({},objSource2); objSource3 = Object.assign(objSource1,objSource2); document.write("■objSource1", objSource1 ,"<BR />"); for(var key in objSource1){ document.write("objSource1 key = ", key , ", objSource1[", key,"] = ",objSource1[key],"<BR />"); } document.write("■objSource2", objSource2 ,"<BR />"); for(var key0 in objSource2){ document.write("objSource2 key = ", key0 , ", objSource2[", key0,"] = ",objSource2[key0],"<BR />"); } document.write("■objSource3", objSource3 ,"<BR />"); for(var key1 in objSource3){ document.write("objSource3 key = ", key1 , ", objSource3[", key1,"] = ",objSource3[key1],"<BR />"); } document.write("■objSource4", objSource5 ,"<BR />"); for(var key2 in objSource4){ document.write("objSource4 key = ", key2 , ", objSource4[", key2,"] = ",objSource4[key2],"<BR />"); } document.write("■objSource5", objSource5 ,"<BR />"); for(var key3 in objSource5){ document.write("objSource5 key = ", key3 , ", objSource5[", key3,"] = ",objSource5[key3],"<BR />"); } --> </SCRIPT> </BODY> </HTML> </syntaxhighlight> [[Media:JavaScript Object assign.html|実行結果サンプル]] == .create 関数 == *objNew1 = Object.create(Object.prototype,objSource1); :上記のようにしてオブジェクトを作成できます。第一引数には作成するオブジェクトのプロトタイプを指定できます。上記の例であれば、何も値を保持しないObjectというオブジェクトが持っている構造をもとにしたプロパティ値やメソッドおよび関数を保持した構造に付け加えて、2番目の引数で指定したobjSource1が保持するプロパティ値やメソッドを保持したものがobjNew1として生成されます。第一引数にnullを指定すると、プロトタイプ値は保持されません。Objectのプロトタイプも保持されません。第二引数を省略することは可能です。何も引き継がれません。 '''InternetExplorerの9以降で使えるようになった機能です。'''古いIEを使うことを強要されるような職場はありますので、あまり汎用性が無いともいえる関数です。JAVA Scriptを個人的に楽しむのは簡単ですが、バージョンによっては全く動作しないというのがイタイっすね。親切なWebコンテンツを提供するのであれば、使ってほしいブラウザをいくつか明記するべきです。 サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object create.html|実行結果サンプル]] == .defineProperties 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object defineProperties.html|実行結果サンプル]] == .defineProperty 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object defineProperty.html|実行結果サンプル]] == .freeze 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object freeze.html|実行結果サンプル]] == .getOwnPropertyDescriptor 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object getOwnPropertyDescriptor.html|実行結果サンプル]] == .getOwnPropertyNames 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object getOwnPropertyNames.html|実行結果サンプル]] == .getOwnPropertySymbols 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object getOwnPropertySymbols.html|実行結果サンプル]] == .getPrototypeOf 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object getPrototypeOf.html|実行結果サンプル]] == .is 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object is.html|実行結果サンプル]] == .isExtensible 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object isExtensible.html|実行結果サンプル]] == .isFrozen 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object isFrozen.html|実行結果サンプル]] == .isSealed 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object isSealed.html|実行結果サンプル]] == .keys 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object keys.html|実行結果サンプル]] == .preventExtensions 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object preventExtensions.html|実行結果サンプル]] == .seal 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object seal.html|実行結果サンプル]] == .setPrototypeOf 関数 == * : サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object setPrototypeOf.html|実行結果サンプル]] == 記事作成用テンプレート == サンプル <syntaxhighlight lang="javascript" line start="1"> </syntaxhighlight> [[Media:JavaScript Object yoobidashi.html|実行結果サンプル]] [[JAVA Script#リファレンス]]に戻る。
JavaScript オブジェクト
に戻る。
個人用ツール
ログイン
名前空間
ページ
議論
変種
表示
閲覧
ソースを表示
履歴表示
操作
検索
案内
メインページ
コミュニティ・ポータル
最近の出来事
最近の更新
おまかせ表示
ヘルプ
ツールボックス
リンク元
関連ページの更新状況
特別ページ