JavaScript オブジェクト 新しいページはコチラ

提供: yonewiki
移動: 案内, 検索
(→‎.keys 関数)
(→‎.is 関数 ☆Edge)
 
812行: 812行:
 
*objNew1 = Object.create(Object.prototype,objPropertyDescripter);
 
*objNew1 = Object.create(Object.prototype,objPropertyDescripter);
 
:上記のようにしてオブジェクトを作成できます。第一引数には作成するオブジェクトのプロトタイプを指定できます。上記の例であれば、何も値を保持しないObjectというオブジェクトが持っている構造をもとにしたプロパティ値やメソッドおよび関数を保持した構造に付け加えて、2番目の引数で指定するのは'''プロパティ記述子というオブジェクトを保持したプロパティ値を持ったオブジェクト(オブジェクト初期化子で定義するプロパティ)です。プロパティ記述子(PropertyDescripter:プロパティデスクリプタ)とは、プロパティの属性を指定するもので、具体的にはサンプルのような形式のものです。'''引数で指定したプロパティ記述子を反映した第一引数のオブジェクトを生成するのがこの関数の役割でobjNew1として生成されます。第一引数にnullを指定すると、プロトタイプ値は保持されません。Objectのプロトタイプも保持されません。第二引数を省略することは可能です。
 
:上記のようにしてオブジェクトを作成できます。第一引数には作成するオブジェクトのプロトタイプを指定できます。上記の例であれば、何も値を保持しないObjectというオブジェクトが持っている構造をもとにしたプロパティ値やメソッドおよび関数を保持した構造に付け加えて、2番目の引数で指定するのは'''プロパティ記述子というオブジェクトを保持したプロパティ値を持ったオブジェクト(オブジェクト初期化子で定義するプロパティ)です。プロパティ記述子(PropertyDescripter:プロパティデスクリプタ)とは、プロパティの属性を指定するもので、具体的にはサンプルのような形式のものです。'''引数で指定したプロパティ記述子を反映した第一引数のオブジェクトを生成するのがこの関数の役割でobjNew1として生成されます。第一引数にnullを指定すると、プロトタイプ値は保持されません。Objectのプロトタイプも保持されません。第二引数を省略することは可能です。
 +
 +
 +
プロパティ記述子は、オブジェクト記述子の形式によって定義できますが、プロパティ記述子としての属性を指示するには、このcreate文の引数の中で指定するか、この先で紹介するdefinePropertyおよびdefineProperties関数の引数の中でプロパティ記述子を付与しないと属性値としての機能を持たないです。単純にソースオブジェクトの定義としてwritableやenumerableやconfiguratableといったプロパティ値を指定してもそういった名前のプロパティ値があるだけのオブジェクトとして機能し、プロパティ記述子としての機能は持ちません。きちんと関数を使って制御しましょう。
  
  
2,244行: 2,247行:
 
*Object.is(obj000, obj111)
 
*Object.is(obj000, obj111)
 
:上記のようにするとオブジェクトや変数同士の比較ができます。プロパティ値の構造や値が同じであるかをチェックしてくれます。同じオブジェクトであることも重要です。まったく同じ構造でも、分けて定義してあるとどうやっても比較結果はtrueにはなりません。自分で全く同じ構造のオブジェクトを定義してしまった場合とかに比較はうまくいかないことに注意が必要です。サンプルではそのことがわかるようなサンプルにしました。ちなみにIEでは対応していない新技術でEdgeでしか使えないので、今のところ、大きなシェアのもとで動かすスクリプトを組むという観点である場合、あまり実用性はありません。企業なんかで、Edgeや違うブラウザを使うことを前提としているような拘束的なアプリケーションを組むときに活用できると考えていいと思います。自分はシェア80%くらいまでのブラウザで使える技術しか導入しない性分ですので、こういうのを使えるようになるのは、ずいぶんと未来の時代になるまで待たないとだめっぽいです。あとの20%は見殺しにするのかお前は？という意見あるかもしれませんが、そうです。見殺しです。なんなら早く違うブラウザ使えってことを意味するお仕置き程度にも捉えて技術の利用を決断します。その判断を自分自身でするというだけのことです。誰に対して自分の情報を見てほしいか？自分の作った技術を提供したいか？誰かに提供する場合でもそういった判断をします。企業内で作る場合の方が拘束力が高いので新技術の導入は早いですが、大きな会社の場合だと、事業所毎の方針とかも調査したりとかが必要になるのかもしれません。そして、どの事業所に展開されても、あまり支障がないようにしたいとそういう風に考えると思います。調べるのって大変ですが、事前調査って意外と大事です。発注された場合はもっと拘束力が高くなって、そういう注文だったのでそのまま作りましたと言い訳はできますが、無為にダメなスクリプトを作りたくないのでそのあたりは、相談しながら、互いが合意できる着地点を決めます。もめ事がおこるのは嫌です。私は職業プログラマではないので、そういう交渉をする感じです。職業プログラマならいわれたとおりドライなプログラミングをしなければならない苦悩があったりするのかもしれませんね。その辺の事情は実際に職業プログラマの方のサイトで意見を聞いてみてください。2ちゃんねるとかでも、ある程度事情がわかる場合があります。いろんな会社があるんですよ。きっと。
 
:上記のようにするとオブジェクトや変数同士の比較ができます。プロパティ値の構造や値が同じであるかをチェックしてくれます。同じオブジェクトであることも重要です。まったく同じ構造でも、分けて定義してあるとどうやっても比較結果はtrueにはなりません。自分で全く同じ構造のオブジェクトを定義してしまった場合とかに比較はうまくいかないことに注意が必要です。サンプルではそのことがわかるようなサンプルにしました。ちなみにIEでは対応していない新技術でEdgeでしか使えないので、今のところ、大きなシェアのもとで動かすスクリプトを組むという観点である場合、あまり実用性はありません。企業なんかで、Edgeや違うブラウザを使うことを前提としているような拘束的なアプリケーションを組むときに活用できると考えていいと思います。自分はシェア80%くらいまでのブラウザで使える技術しか導入しない性分ですので、こういうのを使えるようになるのは、ずいぶんと未来の時代になるまで待たないとだめっぽいです。あとの20%は見殺しにするのかお前は？という意見あるかもしれませんが、そうです。見殺しです。なんなら早く違うブラウザ使えってことを意味するお仕置き程度にも捉えて技術の利用を決断します。その判断を自分自身でするというだけのことです。誰に対して自分の情報を見てほしいか？自分の作った技術を提供したいか？誰かに提供する場合でもそういった判断をします。企業内で作る場合の方が拘束力が高いので新技術の導入は早いですが、大きな会社の場合だと、事業所毎の方針とかも調査したりとかが必要になるのかもしれません。そして、どの事業所に展開されても、あまり支障がないようにしたいとそういう風に考えると思います。調べるのって大変ですが、事前調査って意外と大事です。発注された場合はもっと拘束力が高くなって、そういう注文だったのでそのまま作りましたと言い訳はできますが、無為にダメなスクリプトを作りたくないのでそのあたりは、相談しながら、互いが合意できる着地点を決めます。もめ事がおこるのは嫌です。私は職業プログラマではないので、そういう交渉をする感じです。職業プログラマならいわれたとおりドライなプログラミングをしなければならない苦悩があったりするのかもしれませんね。その辺の事情は実際に職業プログラマの方のサイトで意見を聞いてみてください。2ちゃんねるとかでも、ある程度事情がわかる場合があります。いろんな会社があるんですよ。きっと。
 +
 +
 +
'''InternetExplorer(11までの全てのIE)ではサポートされないオブジェクト関数です。'''JAVA Scriptユーザにはありがたい機能なのですが、普及率を考えると致命的なものがある関数になっています。
 +
  
 
サンプル
 
サンプル
2,392行: 2,399行:
 
== .keys 関数 ==
 
== .keys 関数 ==
 
*var i = Object.keys(obj);
 
*var i = Object.keys(obj);
−
:上記のようにして、for構造の中で使うinキーワードと同じようにオブジェクトの要素名のすべてを、左辺値に代入します。代入された変数は複数の要素が含まれていれば配列のようなオブジェクトになり、この左辺値の配列変数をinキーワードや配列番号で要素の中身を取り出したりすることができます。ただし、inキーワードで取り出す要素名と、微妙な違いがあり、抽出される要素が異なることに注意が必要です。普通に使っている分には同じと思ってもらっても問題ないですが、複雑なオブジェクトを扱い始めると変化が生じてきます。そのことがわかるサンプルを以下に示す予定ですが、今日のところはサンプル作成中ってことで夜を超える予定です。
+
:上記のようにして、for構造の中で使うinキーワードと同じようにオブジェクトの要素名のすべてを、左辺値に代入します。代入された変数は複数の要素が含まれていれば配列のようなオブジェクトになり、この左辺値の配列変数をinキーワードや配列番号で要素の中身を取り出したりすることができます。ただし、inキーワードで取り出す要素名と、微妙な違いがあり、抽出される要素が異なることに注意が必要です。普通に使っている分には同じと思ってもらっても問題ないですが、複雑なオブジェクトを扱い始めると変化が生じてきます。そのことがわかるサンプルを以下に示します。
 +
 
 +
 
 +
'''InternetExplorerの9以降で使えるようになった機能です。'''
 +
 
  
 
サンプル
 
サンプル
 
<syntaxhighlight lang="javascript" line start="1">
 
<syntaxhighlight lang="javascript" line start="1">
 +
<HTML>
 +
<HEAD>
 +
<TITLE>JavaScript keys</TITLE>
 +
</HEAD>
 +
<BODY>
 +
JavaScript keys<br />
 +
<SCRIPT Language="JavaScript">
 +
<!--
 +
function funcOutputObjectKeys(obj){
 +
    var keys = Object.keys(obj);
 +
    var n = 0;
 +
    document.write("■Object.keys()による出力<BR />");
 +
    for(var key in keys){
 +
        document.write("key[", n , "] = ", key,", keys[", key, "] = ", keys[key], ", obj[", key, "] = ", obj[keys[key]] , "<BR />");
 +
        n++;
 +
    }
 +
    n = 0;
 +
    document.write("■for(... in ...)による出力<BR />");
 +
    for(var key in obj){
 +
        document.write("obj[", n , "] = ", key,", obj[", key, "] = ", obj[key], "<BR />");
 +
        n++;
 +
    }
 +
    document.write("<BR />");
 +
}
 +
var obj1 = {
 +
    objectdescriptor_a:100,
 +
    objectdescriptor_b:200,
 +
    objectdescriptor_c:300,
 +
    objectdescriptor_d:400
 +
};
 +
funcOutputObjectKeys(obj1);
  
 +
function obFunc(){
 +
    this.property_a = 100;
 +
    this.property_b = 200;
 +
}
 +
obFunc.prototype.prototype_add_property_c = 300;
 +
obFunc.prototype.prototype_add_property_d = 400;
 +
 +
obj2 = new obFunc();
 +
 +
funcOutputObjectKeys(obj2);
 +
 +
obj3 = Object.create(obj1,{
 +
    create_property_a:{
 +
        value:"create_property_a",
 +
        writable:true,
 +
        enumerable:true,
 +
        configurable:true
 +
    },
 +
    create_property_b:{
 +
        value:"create_property_b",
 +
        writable:true,
 +
        enumerable:true,
 +
        configurable:true
 +
    },
 +
    create_property_c:{
 +
        value:"create_property_c",
 +
        writable:true,
 +
        enumerable:true,
 +
        configurable:true
 +
    }
 +
});
 +
 +
funcOutputObjectKeys(obj3);
 +
 +
-->
 +
</SCRIPT>
 +
</BODY>
 +
</HTML>
 
</syntaxhighlight>
 
</syntaxhighlight>
 
[[Media:JavaScript Object keys.html|実行結果サンプル]]
 
[[Media:JavaScript Object keys.html|実行結果サンプル]]
  
−
== 記事作成用テンプレート ==
 
−
サンプル
 
−
<syntaxhighlight lang="javascript" line start="1">
 
  
−
</syntaxhighlight>
+
Object.createで生成されたオブジェクトは、enumerableが省略されている場合は規定値でfalseになっているため、for(...in...)では列挙されず、Object.keysでは列挙されます。オブジェクトに対してプロトタイプの追加で作成されたpropertyにも違いが発生します。getOwnPropertyNameという関数の項目で記述したようにプロパティ値の取得がぶら下がっているオブジェクトにまで及ぶ抽出方法もありました。適宜使い分けて、オブジェクトの中身を制御する必要があります。
−
[[Media:JavaScript Object yoobidashi.html|実行結果サンプル]]
+
 
 +
== オブジェクト応用 ==
 +
オブジェクトはここまでで言及した仕組みを用いてより実用的なオブジェクト利用方法が見出されそうなことに気づかれた人もいると思います。自分も活用方法をここでさらに言及する予定ですが、イマイチうまく伝える方法が思いついていません。しばらく時間をあけて追記する予定ですが、活用については、それぞれの人が他のややこしい解説のサイトを見るなりして解決してもらえればと思います。ここで解説した内容を理解していれば、ほかのサイトに記述されている有用な記事を読み解くことは可能だと思います。
 +
 
  
 
[[JAVA Script#リファレンス]]に戻る。
 
[[JAVA Script#リファレンス]]に戻る。

2016年3月5日 (土) 00:00時点における最新版

「https://www.yo-net.jp/yonewiki/index.php?title=JavaScript_%E3%82%AA%E3%83%96%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88&oldid=2921」から取得

個人用ツール
名前空間

変種
操作
案内
ツールボックス