JavaScriptにおけるプロパティ

投稿者: | 2016-05-06

前回に引き続きJavaScriptについての自分用まとめメモです。今回はプロパティについてです。

プロパティ

プロパティとはオブジェクトが持つ何かしらの値です。Javaでいうところのメンバ変数やメンバ関数ですね。JavaScriptでもJavaやC#と同様、プロパティとしてプリミティブ型だけでなくオブジェクト型や関数オブジェクトを保持することができます。

プロパティの読み書き

オブジェクトのプロパティにアクセスするには、ドット演算子と[]演算子を使う方法が存在します。2つの演算子の違いは、プロパティ名が識別子かです。ドット演算子の場合はプロパティ名は識別子となり、[]演算子の場合はプロパティ名がとなります。

var obj = {"bookTitle": "サイ本"};

console.log(obj.bookTitle);             // ドット演算子によるプロパティアクセス
console.log(obj["bookTitle"]);          // []演算子によるプロパティアクセス

// []演算子はプロパティ名を表現するのに式を使うので、このような書き方ができる
console.log(obj["book" + "Title"]);
// ドット演算子はプロパティ名を表現するのに識別子を使うので、このような書き方は文法エラーとなる
console.log(obj.("book" + "Title"));

今までJavaやC#を使ってきた身としては、プロパティにアクセスする際に配列の要素にアクセスするような[]演算子を使用した書き方には少し抵抗がありますね…。JavaScriptではオブジェクト≒連想配列なので、プロパティにアクセスする際に配列アクセスのような書き方ができるとのことです。配列表現でプロパティにアクセスできるということは、プロパティ名である配列のインデックスが文字列であることから、プロパティ名をプログラムで操作することができるというメリットがあるらしいです。(ただ柔軟なコードを書くことができる代わりに、可読性は下がってしまうのではないか、と思ったのですが、サイ本のfor/inループを使用したサンプルコードをみると、なるほど便利だと思いました。)

プロパティの削除

前回の記事にてプロパティを動的に設定できると書きましたが、削除も動的に行うことができます。しかし設定時よりも制約が多く、インスタンスプロパティしか削除することができません。したがってプロトタイプ継承によって保持しているプロパティやfunction文で宣言した関数、varで宣言した変数は削除することができません。

function Student (age, gender, major) {
    this.age = age;
    this.gender = gender;
    this.major = major;
    this.getMajor = function () {
        return this.major;
    }
}

var aoi = new Student(21, "female", "animation");

delete aoi.age;             // コンストラクタ関数にて設定したプロパティはインスタンスプロパティ
console.log(aoi.age);       // undefinedと出力される

delete aoi.getMajor;
console.log(aoi.getMajor);  // undefinedと出力される

delete aoi.toString;        // 何も起こらない

プロパティ参照の解決順序

以下のコードを実行してみます。

function Student (age, gender, major) {
    this.age = age;
    this.gender = gender;
    this.major = major;
    this.getMajor = function () {
        return this.major;
    }
}

var ema = new Student(21, "female", "design");
console.log(ema.toString);  // function toString() { [native code] }

コンストラクタ関数StudentではtoStringメソッドを定義していないのに、インスタンスにはtoStringにメソッドが設定されています。JavaScriptではオブジェクト内に存在しないプロパティにアクセスしようとすると、プロトタイプチェーンをたどって該当のプロパティが存在しないかチェックをします。プロトタイプチェーンの詳細は後日記事にまとめますが、上記のコードの場合は、オブジェクトインスタンスemaに該当のプロパティが無いか確認⇒Student.prototypeに該当のプロパティが無いか確認⇒Object.prototypeに該当のプロパティが無いか確認、といった順序で検索を行います。

オブジェクトがプロパティを持っているかどうかを確認する方法としてObject.hasOwnPropertyメソッドとin演算子を用いる方法があります。hasOwnPropertyメソッドは指定したプロパティがインスタンスプロパティかどうか、すなわちプロトタイプチェーンを経由して検索されたものではないかどうかを確認できます。in演算子はプロトタイプチェーンを経由したものも含めて検索を行います。

console.log(ema.hasOwnProperty('toString'));    // false 
console.log('toString' in ema);                 // true

まとめ

JavaScriptオブジェクトのプロパティについてまとめました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です