目次

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');


new演算子

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

プロパティの定義

this.プロパティ名

プロパティとメソッドのアクセス

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

メンバーの有無の判定(in演算子)

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演算子)

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


組み込みオブジェクト

オブジェクト説明
GlobalJavaScriptの基本機能
参照型Objectラッパーオブジェクト
JavaScriptの標準なデータ型(基本型、参照型)をラップしたもの
Array
Function
基本型String
Boolean
Number
Symbol
Math数値演算
Date日付
RegExp正規表現
Error/XxxxErrorエラー
Map/WeakMap*2015ディクショナリー
Set/WeakSet*2015集合(セット)
Proxy*2015オブジェクトの基本動作のカスタマイズ
Promise*2015非同期処理

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()){    // 正解の書き方
    // ここには来ない
}