トップ

JavaScriptのオブジェクト指向プログラミング

オブジェクト指向の説明からやり方や関連トピックなど。JavaScriptのオブジェクト指向プログラミングについてまとめています。

▲記事トップへ

目次

この記事の目次です。

1. オブジェクト指向プログラミングとは
2. JavaScriptのオブジェクト指向プログラミング
3. JavaScriptのやり方や関連するトピック

もっと知識を広げるための参考
更新履歴

1. オブジェクト指向プログラミングとは

オブジェクト指向の説明からやり方や関連トピックなど。JavaScriptのオブジェクト指向プログラミングについてまとめています。

オブジェクト指向とは

オブジェクトという概念に注目し、これをモジュール化に役立てる手法です。 構造化手法のプログラムよりもコード量は多くなりますが、独立性の高いプログラムの実現がしやすく、 構造化手法の手続き型のプログラムよりも拡張性の高い柔軟なプログラムが構築できます。

詳細

オブジェクト指向プログラミング

JavaScriptをはじめ、C++やJava、PHPなど多くの言語はオブジェクト指向言語です。 これらのオブジェクト指向言語は、オブジェクト指向プログラミングをサポートした言語です。

オブジェクト指向プログラミングのオブジェクトは、フィールドとメソッドを持っています。 オブジェクトのフィールドやメソッドは、他のオブジェクトからは独立していて、対象範囲が明確になっています。

オブジェクトのフィールドは、別の呼び方で「属性」と読んだり、JavaScriptの場合、「プロパティ」と呼びます。 メソッドは、別の呼び方で「操作」と読んだり、「メンバ関数」と読んだりします。

C++やJavaなどオブジェクト指向プログラミングが普及している言語では、オブジェクトが持っているフィールドやメソッドをひな形となるクラスを定義します。 そして、そのクラスから実体化したインスタンスという実際に処理に使用するオブジェクトを作成します。

2. JavaScriptのオブジェクト指向プログラミング

JavaScriptのオブジェクト指向プログラミングは、JavaやC++などの言語を基準に比べるとやや特殊なオブジェクト指向です。

JavaScriptのオブジェクト指向プログラミングの特徴

JavaScriptのオブジェクト指向プログラミングは、以下のような特徴があります。

3. JavaScriptのやり方や関連するトピック

以下では、JavaScriptのオブジェクト指向プログラミングのやり方や関連するトピックについてまとめています。

オブジェクトとプロパティ

JavaScriptのオブジェクト指向プログラミングにおけるJavaScriptのオブジェクトとプロパティの説明とプロパティの各種操作(定義・代入・参照・削除)について見ていきます。

JavaScriptのオブジェクトとプロパティ

JavaScriptのオブジェクトは、名前と値で構成されるプロパティを格納した順序のないリストです。

プロパティの値が関数の場合は、そのプロパティはメソッドと呼ばれます。 JavaScriptでは、関数もオブジェクトになります。 関数は呼び出して実行できるだけで、プロパティの値が配列でも関数でも実質的に違いがほとんどないことになります。

JavaScriptのプロパティは、オブジェクトに値を代入するだけで定義ができ、他のオブジェクト指向言語に比べると扱いが単純です。

JavaScriptのプロパティの定義と値の代入

JavaScriptのプロパティは宣言不要です。値を代入すると自動的に定義されます。

JavaScriptでは、事前にプロパティを宣言する必要はありません。 定義されていないプロパティでも値を代入すると、自動的にプロパティが定義されて値も代入されます。

<オブジェクト名>.<プロパティ名> = <値>

JavaScriptのプロパティの参照

オブジェクトが保持しているプロパティは、オブジェクト名に「.」をつけて参照します。

<オブジェクト名>.<プロパティ名>

JavaScriptのプロパティの削除

プロパティを削除するには、delete文を使用します。 delete文を使用すると、指定したプロパティがオブジェクトから削除されます。

delete <オブジェクト名>.<プロパティ名>

JavaScriptのプロパティの定義・代入・参照・削除操作の例

以下は、JavaScriptのプロパティの定義・代入・参照・削除操作の例です。

まずはじめに定義していないプロパティを参照し、その後にプロパティを定義して参照し、最後にプロパティを削除して参照するサンプルです。 プロパティが存在しないときは「undefined」となり、存在するときは「1」が表示されるコードとなります。

<html>
<body>
<script type="text/javascript">
  // 何もないオブジェクト
  var obj = {};
  document.write('obj.propの値を参照:' + obj.prop + '<br />');

  // 代入と定義
  obj.prop = 1;
  document.write('obj.propの値を参照:' + obj.prop + '<br />');

  // 削除
  delete obj.prop;
  document.write('obj.propの値を参照:' + obj.prop + '<br />');
</script>
</body>
</html>

htmlファイルに保存して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

JavaScriptのプロパティの定義・代入・参照・削除操作の例

コンストラクタ

コンストラクタは、オブジェクト生成するために使用されるメソッドです。 オブジェクト指向言語では特別な意味をもつメソッドです。

JavaScriptのコンストラクタの定義方法

JavaScriptのコンストラクタは、コンストラクタ以外のメソッドや関数と同じ構文で定義します。

コンストラクタの引数

コンストラクタは関数であるため、引数を定義できます。 ただし、JavaScriptでは関数呼び出し時に引数が省略できるため、 必ずしも全てのコンストラクタの引数に値が設定されてコンストラクタが 呼び出されるとは限らないので注意が必要です。

コンストラクタの戻り値

コンストラクタを使用してオブジェクトを生成するnew演算子がありますが、 new演算子の結果は以下のルールで決まります。

  1. コンストラクタが戻り値を返さない場合、thisオブジェクトを結果とする
  2. コンストラクタの戻り値がオブジェクトの場合、そのオブジェクトを結果とする

コンストラクタの戻り値が空のオブジェクトの場合、new演算子の結果が常に 空のオブジェクトになりますので注意が必要です。 このような理由から、コンストラクタと関数には違いがないと上述の「JavaScriptのコンストラクタの定義」のところに記載していますが、 「コンストラクタではreturn文を記述しない」という注意点があります。

JavaScriptのコンストラクタの例

JavaScriptのコンストラクタの例です。

コンストラクタでname変数とsayHelloMessage関数をプロパティに追加したオブジェクトを定義して、 ConstractorとJavaScriptの文字列をそれぞれ別々にコンストラクタに設定して作成したオブジェクトを実行する例です。

<html>
<body>
<script type="text/javascript">
function Hello(name) {
    this.name = name;
    this.sayHelloMessage = function() {
        return "Hello " + this.name + "!!";
    };
}

var hello1 = new Hello("JavaScript");
var hello2 = new Hello("Constractor");
document.write("<p>", hello1.sayHelloMessage(), "</p>");
document.write("<p>", hello2.sayHelloMessage(), "</p>");
</script>
</body>
</html>

サンプルコードを「Sample1.html」のように拡張子が「.html」になるファイルを作成して、ChromeやFirefoxなど、ブラウザで開けば表示できます。 表示した結果は次のようになります。

JavaScriptのコンストラクタの例

知識の幅を広げるための参考

もっと知識を広げるための参考です。

JavaScript言語

JavaScriptの入門から応用まで。JavaScript言語についてまとめています。

詳細

更新履歴

更新履歴になります。

戻る

スポンサーリンク

サイト内のページ

言語
C・C++ /HTML /Java /JavaScript /PHP /シェルスクリプト

開発環境
Ant /Burp /Eclipse /Fiddler /gcc /gdb /Git /g++ /JDK /JMeter /JUnit /Teraterm /ZAP

技術・仕様
Ajax /CORBA /Jakarta EE(旧称J2EE、Java EE) /JNI

ライブラリ/Framework/CMS
bootstrap /jQuery /FuelPHP /Lucene /MyBatis /Seasar2 /Spring /Struts /WordPress

Web API
Google Maps

ITインフラOSとミドルウェア
Linux /Windows /シェル
ActiveMQ /Tomcat /MariaDB /MySQL /Nagios /Redis /Solr

ITインフラサーバー
公開Webサーバー

ITインフラネットワーク
プログラミング /構築

ITインフラセキュリティ
公開サーバーのセキュリティ

PC製品
ZOTAC

SI
ホームページの作り方

その他
IT用語 /ITスキル体系

スポンサーリンク

関連サイト内検索ツール

zealseedsおよび関連サイト内のページが検索できます。

IPアドレス確認ツール

あなたのグローバルIPアドレスは以下です。

44.220.131.93

HTMLの表示色確認ツール

パスワード生成ツール

文字数のプルダウンを選択して、取得ボタンを押すと「a~z、A~Z、0~9」の文字を ランダムに組み合わせた文字列が表示されます。

ここに生成されます。

スポンサーリンク