【JavaScript】Proxyの作成

こんにちは。
本日はJavaScriptメモです。

概要

Proxyオブジェクトを使用すると
ターゲットとの代わりに処理を実行します。
つまり、処理のカスタマイズが可能になります。

Proxyオブジェクトのコンストラクタ引数は

• 第一引数：ターゲット(プロキシを設定する対象のオブジェクト)
• 第二引数：ハンドラオブジェクト

new Proxy(target, handler)となります。

空のハンドラオブジェクトを指定してProxyを作成

対象のオブジェクトの代理を行うだけで
処理のカスタマイズをしない場合でも、ハンドラオブジェクトの指定が必要です。

const target = [1, 2, 3]
const handler = {}
const myProxy = new Proxy(target, handler)

console.log('--- myProxy ---')
console.log(myProxy[0])
console.log(myProxy.length)
console.log('--- target ---')
console.log(target[0])
console.log(target.length)

実行結果は以下です。

--- myProxy ---
1
3
--- target ---
1
3

トラップを設定したハンドラオブジェクトを指定してProxyを作成

オブジェクトをカスタマイズするメソッドをトラップと呼びます。 今回は、get()トラップとset()トラップを作成してみます。

const target = {
    item1: 'hello',
    item2: 10
}

const handler = {
    get(target, prop, receiver) {
        if (!(prop in target)) {
            return '指定されたプロパティは存在しません'
        }

        if (prop === 'item2') {
            return `Count ${target[prop]}`
        }

        return target[prop]
    },

    set(target, prop, value) {
        if (!(prop in target)) {
            console.log('指定されたプロパティは存在しません')
            return
        }

        if (prop === 'item2') {
            target[prop] = value * 2
            return
        }

        if (typeof value === 'string') {
            target[prop] = value
            return
        }
    }
}

const myProxy = new Proxy(target, handler)
console.log('--- get ---')
console.log(myProxy.item1)
console.log(myProxy.item2)
console.log(myProxy.item3)

console.log('--- set ---')
myProxy.item1 = 'world'
myProxy.item2 = 25
console.log(myProxy.item1)
console.log(myProxy.item2)

実行結果は以下です。

--- get ---
hello
Count 10
指定されたプロパティは存在しません
--- set ---
world
Count 50

関数の呼び出しをプロキシすることも可能です。
今回は、apply()トラップを使用してみます。

2つの引数を足し算するadd()関数を
プロキシを使って、足し算した結果を2倍します。

function add(a, b) {
    return a + b
}

const handler = {
    apply(target, thisArg, args) {
        console.log(`Calculate add target = ${args}`)
        return target(args[0], args[1]) * 2
    }
}

const proxy = new Proxy(add, handler)
console.log(proxy(10, 20))

実行結果は以下です。

Calculate add target = 10,20
60

ハンドラオブジェクトに指定できる
トラップは他にも色々あるので、用途に応じて使用してください。

Proxy - JavaScript | MDN

以上です。