Paepoi

Paepoi » JavaScript Tips » JavaScript object

JavaScript object

# 最終更新日 2020.07.19
Gjs での覚書です、環境によっては print を console.log で全置換してください

object と function
クラスや構造体のような特別な型はありません、型は全部 function です
JavaScript の function は関数ですがクロージャの仕組みを持っています
その仕組みでクラス(function)とインスタンス(object)を表します
// これがオブジェクトです
let obj = {}
print(typeof(obj));
//=> object

// マジです
let suzuki = new Object();
suzuki.bike = 'Katana';
suzuki.car = 'Swift';
print(JSON.stringify(suzuki));
//=> {"bike":"Katana","car":"Swift"}


// 配列等も全部オブジェクトです
let arr = [1, 2];
print(typeof(arr));
//=> object

// 関数やクラスではこうなります
let Test = function() {}
print(typeof(Test));
//=> function

// function を new すればオブジェクトになります
let test = new Test();
print(typeof(test));
//=> object

プロトタイプ
JavaScript でクラスのような振舞いをさせる仕組み
this に定義した変数には object からでないと参照できない
var TestClass = function(num) {
    this._num = num;
}
TestClass.staticFunc = function() {
    print('staticFunc');
}
TestClass.prototype.instanceFunc = function() {
    print('num は '+ this._num + 'です');
}

// 直接定義したものはそのまま呼び出す
TestClass.staticFunc();

// prototype で定義したものは object 化してから呼び出す
var test = new TestClass(777);
test.instanceFunc();

クラス
クラスは上記プロトタイプの糖衣構文です、一般的なクラスとは動作が違う場合がある
たとえば static メンバはインスタンス化すると参照できない
class TestClassBase {
    constructor(num) {
        // コンストラクタ、メンバ変数の初期化等を行う
        // Python 等と同様に既に this は作られている
        this._num = num;
    }
    static staticFunc() {
        print('staticFunc');
    }
    instanceFunc() {
        print('instanceFunc');
    }
}

// サブクラスを作る時は extends を使う
// constructor の引数は親に合わせる必要は無い
class TestClass extends TestClassBase{
    constructor() {
        // 継承元の初期化
        super(7);
    }
    getNum() {
        return this._num;
    }
}

// static 関数は他言語と同様
TestClass.staticFunc();

// インスタンス化
const tc = new TestClass();
tc.instanceFunc();
//tc.staticFunc(); // インスタンス化すると static 関数は呼び出しできない

print(tc.getNum());  //=> 7

ゲッター、セッター
関数をプロパティのように呼び出す仕組み、C# でおなじみ
setter で不正な処理を弾いたり何か処理を行ないたい場合に利用する
class TestClass {
    constructor() {
        this._width = 0;
        this._height = 0;
    }
    get width() {
        return this._width;
    }
    set width(num) {
        if (num <= 300) {
            this._width = num;
        } else {
            print('300 以上にはできません');
            this._width = 300;
        }
    }
    get height() {
        return this._height;
    }
}

const tc = new TestClass();
tc.width = 400; //=> 300 以上にはできません
print(`width は ${tc.width} です`); //=> width は 300 です
tc.height = 400; //=> height に setter は定義されていないのでエラー

メソッド定義の簡略構文
object の仕組みを利用して名前空間のようにクロージャを利用できる
定義はカンマで区切るのを忘れないように
const App = {
    _num: '666',
    func1() {
        return 'Hello';
    },
    func2() {
        return this._num;
    }
}

print(App.func1());
print(App.func2());

Copyright(C) sasakima-nao All rights reserved 2002 --- 2020.