目次

オブジェクトなJavaScriptの基礎講座

プロパティとメソッドについて

◆ はじめに

JavaScriptは、C言語の延長で理解することもできますが...、実は、結構本格的なオブジェクト指向の言語で...、 この際、オブジェクト指向も極めてしまいましょう。

そのためには、まず最初に、いくつかのオブジェクト指向的な概念を理解しないとなりません。それは、以下の通りです。

オブジェクト

すなわち「物」です。
JavaScriptでは、クラスオブジェクトとインスタンスオブジェクトがあり、単にオブジェクトと言った場合、インスタンスを指すことが多いです。

プロパティ

すなわち「特徴」です。
JavaScriptでは、変数のことです。

メソッド

すなわち「動作」です。
JavaScriptでは、関数のことです。

コンストラクタ

すなわち「構築子」です。
JavaScriptでは、クラスと同じ名前になります。

インスタンス

すなわち「実例」です。
JavaScriptでは、インスタンスオブジェクトのことです。まぁ、普通、オブジェクトというとこれのことです。

クラス

コンストラクタ、メソッド、プロパティを一括りにまとめたパッケージのことです。逆に云うとインスタンスされていないオブジェクトです。

◆ クラス作成

プロパティ

では、つぎに、簡単なクラスを作成してみましょう。可愛い女の子のクラスとか...。

可愛い女の子の特徴(プロパティ)は、とりあえず、「年齢(age)」、「髪の長さ(hair)」とします。
クラスの名前は、Charmingとします。

これをもとにクラスを作成してみましょう。

   function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;
    }

よく見ると関数そのものです。this.〜 となっているのが、プロパティとなります。そして、今回のようにオブジェクトを構築するための関数をコンストラクタといいます。このCharmingコンストラクタでは、このコンストラクタから作られるオブジェクトに対してage , hairを定義しています。

また、this はそのコンストラクタまたはメソッドが呼び出されるオブジェクト自体を指します。

Charmingコンストラクタからオブジェクトを作るには、以下のように new演算子 を使います。

    var Chaichan = new Charming("13" , "short");

上記の場合の this は Chaichanオブジェクト自体を指します。

クラス作成のサンプル(プロパティ)
  <script type="text/javascript">
    // Charmingコンストラクタの定義
   function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;
    }
    
    // Charmingオブジェクトの作成
    var Chaichan  = new Charming( 13, "short");
    var Akarichan = new Charming( 9, "long" );
    
    // それぞれのオブジェクトのプロパティを書き出す。
    document.write( "<div>");
    document.write( Chaichan.age + Chaichan.hair + "<br>" );
    document.write( Akarichan.age + Akarichan.hair + "<br>" );
    document.write( Chaichan.constructor ==  Charming);  // constructor プロパティ
    document.write( "<br>" );
    for( i in Chaichan  )		//Chaichanオブジェクトの一覧
      document.write( i +"<br>" );
    document.write( "</div>");
  </script>

尚、オブジェクトのメンバの一覧を得るためには、for( i in objectName ) 構文で取得できます。 i は String 型で取得されます。

実行結果

予約されたプロパティ

プロパティの名前には任意(自由)に付けることができますが、予約されているプロパティ名があります。それが constructor , length , arguments です。

constructor プロパティ

JavaScriptではあらゆるアクセスできる物はオブジェクトです。ですから、それを生成したコンストラクタがあるはずです。オブジェクトから、それを生成したコンストラクタが収まっているプロパティが、constructorプロパティです。

arguments プロパティ

関数の内部からその引数を参照するために使う配列オブジェクトのプロパティとなります。 関数についての補足説明参照。

length プロパティ

JavaScriptのオブジェクトは、フォームの部品など配列として扱われるケースが多く、その時の配列の長さをもつプロパティです。

メソッド

プロパティの雰囲気は、つかめたでしょうか、つぎに、Charmingクラスにメソッドを追加して見ましょう。 可愛い女の子の動作(メソッド)は、とりあえず、「髪の長さを変える」(hair_length)とします。

メソッドの追加は、以下の感じになります。

  クラス名.prototype.メソッド名  = 関数名 ;
クラス作成のサンプル(メソッド)
   function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;

      function chg_hair_length( nagasa )
      {
        this.hair = nagasa;
      }
      Charming.prototype.hair_length = chg_hair_length;

    }

    var Chaichan  = new Charming( 13, "short");//コンストラクタ起動 (初期の髪型はショート)
    Chaichan.hair_length("semilong");   // メソッドの起動(今回は、髪型をセミロングへ)
    document.write( "<div>");
    document.write( Chaichan.age + Chaichan.hair + "<br>" );
    for( i in Chaichan  )       //objオブジェクトの一覧
      document.write( i +"<br>" );
    document.write( "</div>");
実行結果
解説

まず、クラス内に新たに「髪の長さを変える」関数(chg_hair_length)を定義します。この関数の中で、this.hair の値を変えます。そして、Charming.prototype.hair_length = chg_hair_length; で定義した関数をメソッドとして登録しています。

prototypeプロパティは単に、クラスへ新たなプロパティやメソッドを追加するためのものです。

今回の場合は、chg_hair_length という関数を、Charmingクラスに hair_lengthメソッドとして登録せよ、という命令を下しています。

◆ 補足

クラスへメソッドを追加するのにprototypeプロパティを使いましたが、オブジェクトへのメソッドやプロパティの追加は、もっと簡単です。

尚、プロパティやメソッドをクラスへ追加するか、または、オブジェクトへ追加するかは、ケースにより適切に判断する必要があります。感じとしては、汎用的なものはクラスへ、固有的なものはオブジェクトへです。

オブジェクトへのプロパティの追加

オブジェクトへのプロパティの追加は、任意のプロパティを宣言なしに追加することができます。

  オブジェクト名.任意のプロパティ名 = 値;
サンプル1
    function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;
    }
    var obj = new Charming(13, "short");
    obj.newmember = 1;		//プロパティの追加
    obj.foo = "You are a girl.";	//プロパティの追加

    document.write( "<div>");
    for( i in obj  )       //objオブジェクトの一覧
      document.write( i +"<br>" );
    document.write( "</div>");

実行結果1

プロパティの追加に関して、さらに凄いことに、連想配列の引数が実はすべてプロパティだったのです。

サンプル2
    function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;
    }
    var obj = new Charming(13, "short");
    obj["newmember"] = 1;		//プロパティの追加
    obj["foo"] = "You are a girl.";	//プロパティの追加

    document.write( "<div>");
    for( i in obj  )       //objオブジェクトの一覧
      document.write( i +"<br>" );
    document.write( "</div>");

実行結果

つまり、obj["foo"] は obj.fooと表現してOKです。だだし、変数名やプロパティ名は、JavaScriptの命名規則で、英字またはアンダーバーで始まる英数文字でなければなりません。ですので、obj["100"]をobj.100としては、NGです。

オブジェクトへのメソッドの追加

オブジェクトへのメソッドの追加は、任意のメソッドを宣言なしに追加することができます。

   オブジェクト名.任意のメソッド名 = 関数名;

サンプル3
    function chg_hair_length( nagasa )
    {
        this.hair = nagasa;
    }
    function Charming( _age, _hair)
    {
      this.age = _age ;
      this.hair = _hair;
    }
    var obj = new Charming(13, "short");
    obj.hair_length = chg_hair_length;       // メソッドの追加
    document.write( "<div>");
    obj.hair_length("long");
    document.write("髪の長さを" + obj.hair + " にしちゃった!<br>");
    for( i in obj  )       //objオブジェクトの一覧
      document.write( i +"<br>" );
    document.write( "</div>");

実行結果

◆ おわりに

どうでしたか...、今までC言語レベルでは、関数と思っていたものが、クラスやコンストラクタ、メソッドだったりして...。

また、JavaScriptでのインスタンスとオブジェクトの違いなど分かりますか...、この辺は To be continued ということで...。

では、「インスタンスとオブジェクト」で、また、お会いしましょう!

目次