JavaScript オブジェクトの基本

— y2sunlight 2020-10-28

JavaScriptでは関数オブジェクトがクラスの役割を果たします。以下の例の様に、関数リテラルを使ってクラスを記述することができます。

var Student = function(name) {     // コンストラクタ
    this.name = name;              // プロパティ
    this.greeting = function() {   // メソッド
        console.log(`I am ${this.name}`);
    };
};

var suzuki = new Student('suzuki');

1. 関数オブジェクト(コンストラクタ)によってクラスを作る。
2. this.プロパティ名 でプロパティを定義する。
3. 関数を値に持つプロパティがメソッドの役割を果たす。
4. new演算子でクラスからインスタンスを作る。

この例と同様に、次の様に名前付きの関数定義によってクラスを記述することができます。

function Student(name) {           // コンストラクタ
    this.name = name;              // プロパティ
    this.greeting = function() {   // メソッド
        console.log(`I am ${this.name}`);
    };
};
         
var suzuki = new Student('suzuki');

var 変数名 = new オブジェクト名([引数, ･･･])

this.プロパティ名

    var name = suzuki.name();    // プロパティの読み込み
    suzuki.name = 'suzuki taro'; // プロパティの書き込み
    suzuki.greeting();           // メソッドの呼び出し

in演算子を使って、メンバーの存在の有無を判定することができます。

console.log('name' in suzuki);     // true
console.log('greeting' in suzuki); // true

静的プロパティ(またはメソッド)は、インスタンスを生成しなくてもオブジェクトから直接呼び出すことができるプロパティ(またはメソッド)です。これは以下の様に定義することができます。

オブジェクト名.プロパティ名 = 値;
オブジェクト名.メソッド名 = function() {/* メソッドの定義 */};

var Student = function(name) {
    this.name = name;  // インスタンスプロパティ
    this.greeting = function() {  // インスタンスメソッド
        console.log(`I am ${this.name}.`);
    };
}

Student.age = 15;                     // 静的プロパティ
Student.getSchoolName = function() {  // 静的メソッド
    return 'AbcSchool';
}

console.log(Student.age);              // OK (15)
console.log(Student.getSchoolName());  // OK (AbcSchool)

静的プロパティ(またはメソッド)は、インスタンスからアクセスすることはできません。

var taro = new Student('taro');
taro.name = 'suzuki taro'          // OK
taro.greeting();                   // OK (I am suzuki taro.)
console.log(taro.age);             // NG (undefined)
console.log(taro.getSchoolName()); // NG (taro.getSchoolName is not a function)

in演算子を使って、メンバーの存在の有無を判定することができます。

console.log('name' in taro);             // true
console.log('greeting' in taro);         // true
console.log('age' in taro);              // false
console.log('getSchoolName' in taro);    // false

console.log('age' in Student);           // true
console.log('getSchoolName' in Student); // true

• 組み込みオブジェクト ・・・ 全てのJavaScriptに標準で組み込まれている
• ブラウザーオブジェクト ・・・ 特定の環境（ブラウザー上）で動作する

var str = 'こんにちは';

// 基本型のプロパティにアクセスすると一時的にオブジェクトが作られる
// str.length => (new String(str)).length
console.log(str.length);

// 基本型
var flag = false;
if(flag){
    // ここには来ない
}

// 参照型
var flag = new Boolean(false);
if(flag){
    // ここには来る
}
if(flag.valueOf()){    // 正解の書き方
    // ここには来ない
}