JavaScript オブジェクトについて (from Codeacademy)

JavaScript オブジェクトについて (from Codeacademy)

Code academy : Introduction to Object I (Code Year:Week 5)

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

データタイプ:オブジェクト(Object)を学習します。 オブジェクトは、プロパティ(property)を含んでいます。 プロパティは、オブジェクトに関連付けた変数と考えられます。 プロパティを含んでいないオブジェクトの生成は次のようになります。

var Me = {};

プロパティを含んだオブジェクト生成は次のとおりです。 この生成方法を、literal notationと呼びます。

• プロパティ名と値は「:」で区切ります。
  
• プロパティが複数個、続く場合は、「,」で区切ります。 最後のプロパティには「,」は不要です。
  

var Me = {
  age    : 30,
  country: "Japan"
};

オブジェクトの生成に、new()を使った方法があります。 これを、constructor()を使った方法と言います。 new Object()で、中身が空のオブジェクトを生成後、 プロパティをくわえていきます。

var Me = new Object()

Me.age = 30;
Me.country = "Japan";

オブジェクトのプロパティ アクセス方法は、 オブジェクトとプロパティを「.」でつないでアクセスします。 この方法を、dot notation と言います。

var age_val = Me.age;
var country_val = Me.country;

また、次のようにアクセスすることも可能です。 この方法を、bracket notation をいいます。

var age_val = Me["age"];
var country_val = Me["country"];

オブジェクトとメソッド

メソッド(method)は、オブジェクトと関連付いた関数です。 メソッドの定義方法は、関数の定義方法と似ています。 = function の左辺に、ObjectName.methodName を書きます。 ObjectName.methodName()で使います。

var Me = new Object();

// プロパティ age を追加
Me.age = 10;

// メソッド Me.setAge() を作る
Me.setAge = function(age) {
  Me.age = age;
};

// メソッド Me.setAge() を使う
Me.setAge(30);

メソッド内で、自分自身のオブジェクトを表すのに thisを使います。thisを使うと、上記のメソッドは 次のように書き換えられます。 このようにthisを使うと、特定のオブジェクト(この例の場合はMe)に 縛られることがなくなります。

var Me = new Object();

// プロパティ age を追加
Me.age = 10;

// メソッド Me.setAge() を作る
Me.setAge = function(age) {
  this.age = age;
};

// メソッド Me.setAge() を使う
Me.setAge(30);

コンストラクタ

コンストラクタ(constructor)はオブジェクトを作る方法の一つです。 Me = new Object() とした場合は、bult-inコンストラクタが呼ばれます。 このbult-inコンストラクタは、JavaScritによって用意されていて、 プロパティとメソッドが一つもないオブジェクトを生成します。

空のオブジェクトを生成し、プロパティとメソッドを毎回追加するのは 面倒な作業です。そこで、カスタムコンストラクタを作成します。 カスタムコンストラクタによって、オブジェクトを生成時に、 プロパティをメソッドを同時に定義することができます。

// 四角形オブジェクト
function Rectangle(length, width) {
  this.length = length;
  this.width = width;

  // メソッド 面積を計算する
  this.calcArea = function() {
      return (this.length * this.width);
  };

  // メソッド 周囲の長さを計算する
  this.calcPerimeter = function() {
    return (this.length * 4);
  };
}

// オブジェクトを生成する
var rect1 = new Rectangle(10, 20);

// 面積を計算し、出力する
console.log(rect1.calcArea());

(END)

---

Last updated 2012-02-12 22:56:32 JST