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,objPropertyDescripter);
:上記のようにしてオブジェクトを作成できます。第一引数には作成するオブジェクトのプロトタイプを指定できます。上記の例であれば、何も値を保持しないObjectというオブジェクトが持っている構造をもとにしたプロパティ値やメソッドおよび関数を保持した構造に付け加えて、2番目の引数で指定するのは'''プロパティ記述子というオブジェクトを保持したプロパティ値を持ったオブジェクト(オブジェクト初期化子で定義するプロパティ)です。プロパティ記述子(PropertyDescripter:プロパティデスクリプタ)とは、プロパティの属性を指定するもので、具体的にはサンプルのような形式のものです。'''引数で指定したプロパティ記述子を反映した第一引数のオブジェクトを生成するのがこの関数の役割でobjNew1として生成されます。第一引数にnullを指定すると、プロトタイプ値は保持されません。Objectのプロトタイプも保持されません。第二引数を省略することは可能です。


'''InternetExplorerの9以降で使えるようになった機能です。'''古いIEを使うことを強要されるような職場はありますので、あまり汎用性が無いともいえる関数です。JAVA Scriptを個人的に楽しむのは簡単ですが、バージョンによっては全く動作しないというのがイタイっすね。親切なWebコンテンツを提供するのであれば、使ってほしいブラウザをいくつか明記するべきです。

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript create</TITLE>
</HEAD>
<BODY>
JavaScript create<br />
<SCRIPT Language="JavaScript">
<!--
var obj = {};
var objCreate  = Object.create(null,            {x:{value:"create_x" ,writable:true}});
var objCreate2 = Object.create(Object.prototype,{x:{value:"create2_x",writable:true}});
var objCreate3 = Object.create(Object.getPrototypeOf(obj),   {x:{value:"create3_x",writable:true}});

obj.newDataProperty = "obj_newDataProperty";

var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");


descriptor.writable = false;
Object.defineProperty(obj, "newDataProperty", descriptor);


var desc = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
var desc1 = Object.getOwnPropertyDescriptor(objCreate, "x");
var desc2 = Object.getOwnPropertyDescriptor(objCreate2, "x");
var desc3 = Object.getOwnPropertyDescriptor(objCreate3, "x");


document.write("■obj.newDataPropertyのプロパティ記述子の出力<br />");
for (var prop in desc) {
    document.write(prop + ': ' + desc[prop]);
    document.write("<br />");
}

document.write("■objCreate.xのプロパティ記述子の出力<br />");
for (var prop in desc1) {
    document.write(prop + ': ' + desc1[prop]);
    document.write("<br />");
}

document.write("■objCreate2.xのプロパティ記述子の出力<br />");
for (var prop in desc2) {
    document.write(prop + ': ' + desc2[prop]);
    document.write("<br />");
}

document.write("■objCreate3.xのプロパティ記述子の出力<br />");
for (var prop in desc3) {
    document.write(prop + ': ' + desc3[prop]);
    document.write("<br />");
}
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript Object create.html|実行結果サンプル]]


:サンプルはプロパティ記述子を出力したり、プロパティ記述子の値を設定したりする処理をする部分を追加しているためややこしいことになっていますが、まずはObject.createの使い方だけでも参考にしてもらえればと思います。もうちょい先まで同じサンプルで説明したいとおもっておりますので、もうちょっと先の項目まで読めば、わからなかった部分も理解できると思います。


:ここでは、サンプルの10、11、12行目だけ解説しておきたいと思います。10行目では生成するオブジェクトを指定しないパターンで、nullとしています。prototypeを持たないので、最小限のオブジェクトが生成されます。11行目ではObjectのプロトタイプを引き継がさせています。Objectも比較的機能を持たないオブジェクトですので、nullの指定とあまり変わりません。違いは調べていませんので、開発者ツールでぶら下がっているオブジェクトの違いを見てみてほしいですね。12行目は生成したオブジェクトからプロトタイプ情報を取得して、引き継がせる手法になっています。引数にしたobjは何も持たないのでobj.prototypeでは生成できませんが、このようにすると、プロトタイプ情報を設定するため、何もないobjでも大丈夫です。第二引数に指定したプロパティ記述子はすべて同じような内容になっていますが、プロパティ記述子は最大構成でも以下のような構造になります。

{
:value:"Data",
:writable:true,
:enumerable:true,
:configurable:true,
:set:function(){},
:get:function(){}
}

プロパティデスクリプタは、値を意味するvalueプロパティのほか、書き換えを制御するwritableプロパティ、inキーワードによる列挙をするかを制御するenumerableプロパティ、プロパティディスクリプタの変更を制御するconfigurableプロパティ。これにset関数とget関数が利用できます。value,writable,enumerable,configuraleはデータプロパティ、setとgetはアクセサプロパティって呼びます。

== .defineProperties 関数 ==
*Object.defineProperties(objCreate1,{data_x:{value:"x_value",writable:true}});
:と上記のように1つめの引数にはオブジェクト記述子とプロパティ記述子を定義したいオブジェクトを記載します。2つめの引数にはオブジェクト記述子とプロパティ記述子の構造を持つオブジェクトを記載します。


'''InternetExplorerの9以降で使えるようになった機能です。'''

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript create</TITLE>
</HEAD>
<BODY>
JavaScript create<br />
<SCRIPT Language="JavaScript">
<!--
var obj = {};
var objCreate  = Object.create(null,                      {x:{value:"create_x" ,writable:true}});
var objCreate2 = Object.create(Object.prototype,          {x:{value:"create2_x",writable:true}});
var objCreate3 = Object.create(Object.getPrototypeOf(obj),{x:{value:"create3_x",writable:true}});

obj.newDataProperty = "obj_newDataProperty";
var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
descriptor.writable = false;

Object.defineProperties(obj, {
    data_x:{//オブジェクト記述子
        //プロパティ記述子 データプロパティ部
        enumerable:true,
        configurable:true,
        set: function (setValue){//アクセサプロパティ部
            this.new_xValue = setValue;
        },
        get: function (){
            return this.new_xValue;
        }
    },
    data_y:{//オブジェクト記述子
        //プロパティ記述子 データプロパティ部
        enumerable:true,
        configurable:true,
        set: function (setValue){//アクセサプロパティ部
            this.new_yValue = setValue;
        },
        get: function (){
            return this.new_yValue;
        }
    }
});
var descriptor2 = Object.getOwnPropertyDescriptor(obj, "data_x");
descriptor2.set(-7100);

var descriptor3 = Object.getOwnPropertyDescriptor(obj, "data_y");
descriptor3.set(5500);

var desc   = Object.getOwnPropertyDescriptor(obj,       "newDataProperty");
var desc_x = Object.getOwnPropertyDescriptor(obj,       "data_x");
var desc_y = Object.getOwnPropertyDescriptor(obj,       "data_y");
var desc1  = Object.getOwnPropertyDescriptor(objCreate, "x");
var desc2  = Object.getOwnPropertyDescriptor(objCreate2,"x");
var desc3  = Object.getOwnPropertyDescriptor(objCreate3,"x");


document.write("■obj.newDataPropertyのプロパティ記述子の出力<br />");
for (var prop in desc) {
    document.write(prop + ': ' + desc[prop]);
    document.write("<br />");
}
document.write("■obj.data_xのプロパティ記述子の出力<br />");
for (var prop in desc_x) {
    document.write(prop + ': ' + desc_x[prop]);
    document.write("<br />");
}
document.write("desctipter accesa get = ", descriptor2.get(), "<br />");
document.write("■obj.data_yのプロパティ記述子の出力<br />");
for (var prop in desc_y) {
    document.write(prop + ': ' + desc_y[prop]);
    document.write("<br />");
}
document.write("desctipter accesa get = ", descriptor3.get(), "<br />");

document.write("■objCreate.xのプロパティ記述子の出力<br />");
for (var prop in desc1) {
    document.write(prop + ': ' + desc1[prop]);
    document.write("<br />");
}

document.write("■objCreate2.xのプロパティ記述子の出力<br />");
for (var prop in desc2) {
    document.write(prop + ': ' + desc2[prop]);
    document.write("<br />");
}

document.write("■objCreate3.xのプロパティ記述子の出力<br />");
for (var prop in desc3) {
    document.write(prop + ': ' + desc3[prop]);
    document.write("<br />");
}
-->
</SCRIPT>
</BODY>
</HTML>
</syntaxhighlight>
[[Media:JavaScript Object defineProperties.html|実行結果サンプル]]


アクセサプロパティを記述した場合、データプロパティのvalueおよびwritableは定義することができません。列挙した際にも自動で初期化されるようなこともなく、この二つのプロパティは定義されません。関数内で複数のプロパティを定義することができるので、このプロパティに対して、個別にプロパティ記述子を付与することになります。

== .defineProperty 関数 ==
*Object.defineProperty(objCreate1,"data_x",propertydescriptor);
:前述のdefinePropertiesが複数のオブジェクト記述子に対して、プロパティ記述子を定義するものだったのに対して、definePropertyは一つのオブジェクト記述子に対して、プロパティ記述子を定義するものです。上記の例ではdata_xというオブジェクト記述子で定義したプロパティをobjCreate1オブジェクトにぶら下げると共に、そのプロパティのプロパティ記述子としてprpertydescriptorの値が設定されます。サンプルはcreateの項目でも示したものと同じで、20行目が実際に定義をしている部分になります。descriptorという変数にプロパティ記述子の値を格納し、defineProperty関数の第三引数として適切な形式を得ることができる関数getOwnPropertyDescriptorを利用するところがポイントです。


同じサンプルをもう一度掲載しておきます。

サンプル
<syntaxhighlight lang="javascript" line start="1">
<HTML>
<HEAD>
<TITLE>JavaScript create</TITLE>
</HEAD>
<BODY>
JavaScript create<br />
<SCRIPT Language="JavaScript">
<!--
var obj = {};
var objCreate  = Object.create(null,            {x:{value:"create_x" ,writable:true}});
var objCreate2 = Object.create(Object.prototype,{x:{value:"create2_x",writable:true}});
var objCreate3 = Object.create(Object.getPrototypeOf(obj),   {x:{value:"create3_x",writable:true}});

obj.newDataProperty = "obj_newDataProperty";

var descriptor = Object.getOwnPropertyDescriptor(obj, "newDataProperty");


descriptor.writable = false;
Object.defineProperty(obj, "newDataProperty", descriptor);


var desc = Object.getOwnPropertyDescriptor(obj, "newDataProperty");
var desc1 = Object.getOwnPropertyDescriptor(objCreate, "x");
var desc2 = Object.getOwnPropertyDescriptor(objCreate2, "x");
var desc3 = Object.getOwnPropertyDescriptor(objCreate3, "x");


document.write("■obj.newDataPropertyのプロパティ記述子の出力<br />");
for (var prop in desc) {
    document.write(prop + ': ' + desc[prop]);
    document.write("<br />");
}

document.write("■objCreate.xのプロパティ記述子の出力<br />");
for (var prop in desc1) {
    document.write(prop + ': ' + desc1[prop]);
    document.write("<br />");
}

document.write("■objCreate2.xのプロパティ記述子の出力<br />");
for (var prop in desc2) {
    document.write(prop + ': ' + desc2[prop]);
    document.write("<br />");
}

document.write("■objCreate3.xのプロパティ記述子の出力<br />");
for (var prop in desc3) {
    document.write(prop + ': ' + desc3[prop]);
    document.write("<br />");
}
-->
</SCRIPT>
</BODY>
</HTML>
</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|実行結果サンプル]]


== .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#リファレンス]]に戻る。