連載
» 2016年11月01日 05時00分 UPDATE

JavaScript標準ライブラリの使い方超入門(6):JavaScriptのObject、Globalオブジェクト、NaN、URIエンコードの基本 (1/4)

JavaScriptの標準仕様としてビルトインされている主なオブジェクトの使い方を紹介する連載。今回は、ビルトインオブジェクトを扱うためのObject、制限がなくどこからでも利用できるGlobalオブジェクトやコンストラクタについての基本を解説。NaNとは何かやURIエンコードのメソッドの使い方についても。

[金城俊哉,著]

連載目次

書籍の中から有用な技術情報をピックアップして紹介する本シリーズ。今回は、秀和システム発行の書籍『JavaScript Web開発パーフェクトマスター(2015年6月27日発行)』からの抜粋です。

ご注意:本稿は、著者及び出版社の許可を得て、そのまま転載したものです。このため用字用語の統一ルールなどは@ITのそれとは一致しません。あらかじめご了承ください。


 これまでに、いくつかのビルトインオブジェクト(JavaScriptに用意されている組み込みオブジェクト)について見てきましたが、これらのオブジェクトを扱うためのオブジェクトというものが存在します。それがObjectオブジェクトです。

 でも、いったいオブジェクトを扱うためのオブジェクトなんて何の役に立つのでしょうか。その辺りのことをポイントに、Objectについて見ていきたいと思います。

Objectオブジェクトは自身の機能を使わせるために存在する

 JavaScriptのオブジェクトを扱うためのオブジェクトがObjectであるといいました。このことからObjectオブジェクトは、それ自体をインスタンス化できるだけではなく、「Objectオブジェクトの機能を提供する」という役割を持っています。つまり、Objectオブジェクトが持っているプロパティやメソッドを、ほかのオブジェクトで利用することができるのですね。

 これまでに何度か使用したtoString()やvalueOf()メソッドは、Objectオブジェクトのメソッドだったのです。

Objectオブジェクトが持っているプロパティやメソッドを、ほかのオブジェクトで利用することができる

Objectオブジェクトのプロパティとメソッド

 このようなObjectオブジェクトは、いわばすべてのオブジェクトの「基本オブジェクト」ということになります。何が基本なのか、ということになりますが、すべてのオブジェクトは、Objectオブジェクトに備わっている以下のプロパティとメソッドを使うことができます。

Objectオブジェクトのプロパティ
プロパティ 説明
constructor オブジェクトをインスタンス化する際に使用したメソッド(コンストラクター)の参照情報を返します。

 

Objectオブジェクトのメソッド
メソッド 説明
toString() オブジェクトの中身を文字列で返す。
valueOf() 指定されたオブジェクトの値を返す。
hasOwnProperty() 指定したプロパティをオブジェクトが持っているかどうかを真偽値で返す。
propertyIsEnumerable() オブジェクトが持つプロパティやメソッドをfor...in文ですべて書き出すことができるかどうかを真偽値で返す。
isPrototypeOf() 指定されたオブジェクトが、このメソッドの呼び出し元のオブジェクトの機能を引き継いで作成されたものであるかどうかを示す真偽値を返す。

ObjectのtoString()でいろんなオブジェクトの中身を書き出してみよう

 toString()は、Objectオブジェクトのメソッドなので、どのオブジェクトでも使うことができます。ここでは、Object自身のインスタンスを始め、DateやArray、Number、さらにはRegExpのインスタンスの中身を書き出してみることにします。また、ついでにvalueOf()メソッドも実行して、インスタンスの中身をそのまま取り出してみましょう。

Onepoint

書き出す内容が多いので、ここでは改行を行うwriteln()メソッドを使用することにしました。改行コードを画面に反映させるために、<pre>タグで<script>以下をマークアップしています。


toString()メソッドでインスタンスの中身を書き出す

 結果は、ソースコードの右側にコメントとして書いておきました。Dateオブジェクト以外は、valueOf()メソッドにおいてもインスタンスに格納した値が、そのまんま出力されています。Dateオブジェクトは、実際の値を1970年1月1日からの経過時間(ミリ秒)で管理しているので、この値が出力されています。

Onepoint

 ここでは、writeln()メソッドでtoString()メソッドを実行することで文字列にして表示しましたが、前にもお話したようにwrite()などの文字列を書き出すメソッドでは、あえてtoString()メソッドを呼び出さなくても内部的に呼び出しが行われるので、通常はインスタンス(の参照変数)名だけを書けばOKです。

Objectオブジェクトのメソッドは好きなように機能を追加できる≫

 ところで唯一、大もとのObjectオブジェクトだけは、意味のある値が返されていません。というのはObjectオブジェクトでは、自身のメソッドをほかのオブジェクトでも広く使ってもらうために、必要最小限のことしか行わないようになっているのです。Object以外のオブジェクトは、自分自身で使いやすいようにtoString()メソッドの動作にちょっとずつ手を加えているのです。こんなふうに、基本オブジェクトのメソッドは、たんにそのまま使うだけでなく「使いやすいように手を加えて使う」ことができるのですね。

インスタンスのオブジェクト名を調べる

 Objectオブジェクトのconstructorプロパティを使うと、インスタンスがどのオブジェクトのものであるかを知ることができます。具体的には、インスタンスを生成するときには、「コンストラクター」という関数が呼び出されているのですが、このコンストラクターの「参照」を返してきます。

Onepoint

 このように配列を作成した場合は、ArrayオブジェクトのArray()コンストラクターを呼び出しています。「コンストラクターの名前はオブジェクト名と同じである」という決まりがあるので、「コンストラクター名=オブジェクト名」ということになります。それでコンストラクター名でオブジェクト名がわかる、というわけです。ただし、返されてくる値は、コンストラクター名を示す文字列ではなく、コンストラクターの参照情報ですので注意してください。

 では、実際に配列を作成し、これがArrayオブジェクトのインスタンスであるかどうかを確かめてみましょう。

インスタンスのオブジェクト名を確認する(constructor.html)
実行結果

constructorプロパティが返す値

Attention

 先にお話ししたように、constructorプロパティはコンストラクターそのものを参照するための情報を返してきます。ですので、次のように文字列と比較することはできません。

文字列リテラルとは比較できない

 条件式においてこのように書けば、コンストラクターがArray()であればtrueが返されます。

 一方、コンストラクターの参照情報といってきましたが、実際にそれが何なのか見てみたのが、次の部分です。

結果を直接書き出す

 そうすると、次のように表示されました。

ビルトインオブジェクトとして内部で定義されているので、内部のソースコードまでは見ることはできない

 まさにArray()コンストラクターが参照されています。でも、ビルトインオブジェクトとして内部で定義されているので、コンストラクターの中身は「[native code]」となっていて、残念ながら内部のソースコードまでは見ることはできません。

Memo コンストラクターって何をするものなの?

 これまでに何度か登場しているコンストラクターですが、これは、インスタンスを生成するときに行う処理(初期化処理)を実行するための関数です。ただし、インスタンスの初期化処理を行うといった事情から、通常の関数とは区別されています。

 「var 変数 = new コンストラクター名()」のようにnewとセットでコンストラクター名を書くことで、インスタンスの生成と同時にコンストラクターが呼び出されて、初期化のための処理が行われます。

 new演算子を使って10個の要素を持つ配列を作成する場合は、次のように記述しますが、このときArray()コンストラクターに「10」という値が渡され、コンストラクター側では渡された「10」に基づいて、配列要素を10個作成する処理を行うというわけです。

Array()コンストラクターに「10」が渡される

Hint 自分で作ったオブジェクトなら中身が表示される

 独自に作成したオブジェクトにおいても、Objectオブジェクトのプロパティやメソッドを利用することができます。

 次は、例として作成したオブジェクトをインスタンス化して、constructorプロパティでコンストラクターの参照を表示するプログラムです。結果を見ると、コンストラクターのソースコードがそのまま表示されることが確認できます。

独自に作成したオブジェクトの参照情報を確かめる(constructor.html)
実行結果

       1|2|3|4 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。