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 --- 2023.