BETA

速習ECMAScript2018を勉強する Proxy編

投稿日:2018-11-10
最終更新:2018-11-10

Proxy オブジェクト

  • オブジェクトの挙動をカスタマイズできるとのこと。
  • 既存のオブジェクトに手を加えずに、オブジェクトの操作ができたりするみたいです。
  • target のオブジェクトに対して、handler で取得するのか、セットするのか削除するのか等を指定して操作。

  • new Proxy(target, handler)

  • handler メソッド
    • get, set, for...in, for...of, delete
const obj = { hoge: 'hogehoge', foo: 'foofoo' };
const handler = {
    get(target, prop) {
        return prop in target ?
            target[prop] :
            'None';
    }
}
const p = new Proxy(obj, handler);
p.a = 1;
p.b = undefined;
console.log('obj: ', obj)
console.log('p: ', p);
console.log(p.a, p.b);
console.log('c'in p, p.c)
  • ただ、リードオンリーでは無くプロキシのインスタンスを変更すると、既存のオブジェクトにも影響します。
  • 例では、プロキシに存在しないプロパティを指定すると、Noneが表示されるように定義してあるので、エラーで止まるのが防止できそうです。
  • バリデーターとして、この機能は使えそうですね。
node test.js
obj:  { hoge: 'hogehoge', foo: 'foofoo', a: 1, b: undefined }
p:  Object [None] { hoge: 'hogehoge', foo: 'foofoo', a: 1, b: undefined}
1 undefined
false 'None'
const validator = {
    set(obj, prop, value) {
        try {
            if (prop === 'age') {
                if (!Number.isInteger(value)) {
                    throw new TypeError('age が 整数でない');
                }
                if (value > 200) {
                    throw new RangeError('age が 200より大きい');
                }
            }
            obj[prop] = value;
            return true;
        } catch (e) {
            console.log(e.message)
        }
    }
}

let person = new Proxy({}, validator)

person.age = 100;
console.log(person.age);
person.age = 'young';
person.age = 300;
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@atoris1192の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!