オブジェクト(Javascript)

オブジェクト(Javascript) #

Javascriptのオブジェクトについて。

Javascriptでは、オブジェクトと呼ばれる、C言語などの構造体のようなデータ構造が存在する。

ここではそれについて記載する。

オブジェクトの定義 #

Javascriptでのオブジェクトは、以下のような方法で記載する。

記法

var 変数名 = {
    key名1 : value名1,
    key名2 : value名2,
    ・・・
}

このように、キーと値のセットを複数連ねたような構造になる。

ちなみに、オブジェクトではこのキーと値のセットのことをプロパティと呼んでいる。


プロパティの書き換え #

オブジェクト中のプロパティの値を書き換える方法についてを述べる。

Javascriptでのオブジェクトのプロパティの書き換えは、以下のような記法で行う。

オブジェクトの変数名.変更したいプロパティのキー = 書き換えたい値;
//または
オブジェクトの変数名['変更したいプロパティのキー'] = 書き換えたい値;

プロパティの追加 #

オブジェクトにプロパティを追加する方法についてを述べる。

Javascriptでのオブジェクトのプロパティの追加は、以下のような記法で行う。

オブジェクトの変数名.追加したいプロパティのキー = 追加したい値;

要はプロパティの書き換えと同じ。


プロパティの削除 #

オブジェクト中のプロパティを削除するには、特殊演算子のdeleteを利用する。

delete オブジェクトの変数名.削除したいプロパティ名

thisキーワード #

thisキーワードは、オブジェクト内でオブジェクトのプロパティを参照するときに用いる。

但し、オブジェクトを参照するのは、thisがメソッドとして使用された場合に限るので注意。

var 変数名 = {
    key名1 : value名1,
    key名2 : value名2,
    ・・・
    key名n : function(){
        //メソッド
        this.key名1  //これでvalue名1が参照できる
    }
}

セッターの設定(set演算子) #

set演算子は、擬似プロパティを設定する演算子で、プロパティが呼び出された時に呼び出す関数を設定する演算子である。

これを利用して、オブジェクトのプロパティに値を設定しようとした時に、設定した関数を呼び出してプロパティに値を設定する事が行える。

//例
var obj = {
    set setAge(age){
        this.age = age;
        this.category = (age >= 20) ? '大人' : '小人';
    }
}

obj.setAge = 18
console.log(obj);

結果

{age: 18, category: "小人"}

ゲッターの設定(get演算子) #

get演算子は、擬似プロパティを取得する演算子で、setと同様にプロパティが呼び出された時に呼び出す関数を設定する演算子である。

関数には、オブジェクトのプロパティを返すように設定する。このようにする事で、プロパティを取得することが可能になる。

//例
var obj = {
    set setAge(age){
        this.age = age;
        this.category = (age >= 20) ? '大人' : '小人';
    },

    get getAge(){
        return this.age;
    }
}

obj.setAge = 18
console.log(obj.getAge);

結果

18

プロパティの存在確認(in演算子) #

指定したプロパティがオブジェクト内に存在するかを確認したいときは、in演算子を利用する。

//例
var obj = {
    set setAge(age){
        this.age = age;
        this.category = (age >= 20) ? '大人' : '小人';
    },

    get getAge(){
        return this.age;
    }
}

console.log('setAge' in obj);
console.log('a' in obj);

結果

true
false

Objectオブジェクト #

JavascriptのObjectオブジェクトは、全てのオブジェクトの基本オブジェクトである。

プロパティ・メソッド類は以下の通り。

プロパティ名 説明
constructor コンストラクタを返す
メソッド名 説明
toString() オブジェクトを文字列で返す
valueOf() オブジェクトのプリミティブ値を返す
hasOwnProperty() 指定したプロパティがオブジェクトのプロパティならばtrueを返す
propertyIsEnumerable() 指定したプロパティが列挙可能な場合trueを返す
isPrototypeOf() 指定したオブジェクトがプロトタイプの場合はtrueを返す

以下に例を記載する。

var mike = {
    age: 18,
    category: '小人'
};

console.log('--constructor:--');
console.log(mike.constructor);
console.log('--toString():--');
console.log(mike.toString());
console.log('--valueOf():--');
console.log(mike.valueOf());
console.log('--hasOwnProperty(age):--');
console.log(mike.hasOwnProperty('age'));
console.log('--propertyIsEnumerable(age):--');
console.log(mike.propertyIsEnumerable('age'));
console.log('--isPrototypeOf():--');
console.log(mike.isPrototypeOf());

実行結果

--constructor:--
function Object() {
    [native code]
}
--toString():--
[object Object]
--valueOf():--
{age: 18, category: "小人"}
--hasOwnProperty(age):--
true
--propertyIsEnumerable(age):--
true
--isPrototypeOf():--
false

prototype #

prototypeプロパティは、特定のオブジェクトに存在するプロパティとメソッドを、他のオブジェクトでも利用できるように定義する方式である。

必要に応じて他のオブジェクトのメソッドやプロパティを追加することで、それらを新たに追加する必要がなくなる。

オブジェクト指向の言語の特徴の一つに継承というものがある。Javaなどではクラスで継承を行うが、Javascriptではこのオブジェクトで継承を行う。このような継承をプロトタイプベースの継承という。

例を以下に記載する。

function Person(name) {
    this.name = name
};

// オブジェクト作成
var mike = new Person('mike');

// コンストラクタのprototypeプロパティにプロパティsexを追加
Person.prototype.sex = "male";

// オブジェクトにsexプロパティが追加されている
console.log(mike.sex);

実行結果

male