JavaScriptプロキシオブジェクト

オブジェクトを操作するときに、プロキシオブジェクトこれは、既存のオブジェクトの動作を傍受して変更します。

私たちはを使用してそうしますプロキシES2015で導入されたネイティブオブジェクト。

あるとしましょうcarオブジェクト:

const car = {
  color: 'blue'
}

作成できる非常に簡単な例は、存在しないプロパティにアクセスしようとしたときに「見つかりません」という文字列を返すことです。

このオブジェクトのプロパティにアクセスしようとするたびに呼び出されるプロキシを定義できます。

これを行うには、次のような別のオブジェクトを作成します。get()ターゲットオブジェクトとプロパティをパラメータとして受け取るメソッド:

const car = {
  color: 'blue'
}

const handler = { get(target, property) { return target[property] ?? ‘Not found’ } }

これで、を呼び出すことでプロキシオブジェクトを初期化できますnew Proxy()、元のオブジェクトとハンドラーを渡します。

const proxyObject = new Proxy(car, handler)

次に、に含まれているプロパティにアクセスしてみますcarオブジェクトですが、proxyObject

proxyObject.color //'blue'

これは電話するのと同じですcar.color

しかし、に存在しないプロパティにアクセスしようとするとcar、 お気に入りcar.test、あなたは戻ってきますundefined。プロキシを使用すると、'Not found'文字列、それは私たちがそれをするように言ったことだからです。

proxyObject.test //'Not found'

私たちはに限定されていませんget()プロキシハンドラのメソッド。それは私たちが書くことができる最も単純な例にすぎませんでした。

使用できる方法は他にもあります。

  • apply使用すると呼び出されますapply()オブジェクト上
  • constructオブジェクトコンストラクタにアクセスすると呼び出されます
  • deletePropertyプロパティを削除しようとすると実行されます
  • definePropertyオブジェクトに新しいプロパティを定義すると呼び出されます
  • setプロパティを設定しようとすると実行されます

等々。基本的に、オブジェクトで発生するすべてを制御する保護されたゲートを作成し、独自のロジックを実装するための追加のルールとコントロールを提供できます。

他の方法(別名トラップ)使用できるものは次のとおりです。

  • enumerate
  • getOwnPropertyDescriptor
  • getPrototypeOf
  • has
  • isExtensible
  • ownKeys
  • preventExtensions
  • setPrototypeOf

すべてそれぞれの機能に対応しています。

あなたはできるMDNでそれらのそれぞれについてもっと読む

を使用して別の例を作成しましょうdeleteProperty。オブジェクトのプロパティが削除されないようにする必要があります。

const car = {
  color: 'blue'
}

const handler = { deleteProperty(target, property) { return false } }

const proxyObject = new Proxy(car, handler)

電話すればdelete proxyObject.color、TypeErrorが発生します:

TypeError: 'deleteProperty' on proxy: trap returned falsish for property 'color'

Of course one could always delete the property directly on the car object, but if you write your logic so that that object is inaccessible and you only expose the proxy, that is a way to encapsulate your logic.


More js tutorials: