プロキシ オブジェクトは JavaScript でどのように機能しますか?
JavaScript プロキシ オブジェクトを使用すると、元のオブジェクトを変更することなく、別のオブジェクトの動作を傍受してカスタマイズできます。
プロキシ オブジェクトを使用すると、データを検証し、追加機能を提供し、プロパティと関数へのアクセスを制御できます。
プロキシ オブジェクトの使用方法と、JavaScript でそれらを作成する方法をすべて調べてください。
プロキシ オブジェクトの作成
JavaScript では、 Proxyコンストラクターを使用してプロキシ オブジェクトを作成できます。このコンストラクターは、プロキシをラップするターゲットオブジェクトと、操作を実行するときのプロキシの動作を定義するプロパティを持つハンドラーオブジェクトの2 つの引数を取ります。
これらの引数を受け取り、ターゲット オブジェクトの代わりに使用できるオブジェクトを作成します。この作成されたオブジェクトは、プロパティの取得、設定、定義などのコア操作を再定義できます。これらのプロキシ オブジェクトを使用して、プロパティ アクセスをログに記録し、入力を検証、フォーマット、またはサニタイズすることもできます。
例えば：
const originalObject = {
foo: "bar"
}
const handler = {
get: function(target, property) {
return target[property];
},
set: function(target, property, value) {
target[property] = value;
}
};
const proxy = new Proxy(originalObject, handler)
このコードは、1 つのプロパティfooとハンドラー オブジェクト handlerを持つターゲット オブジェクトoriginalObjectを作成します。ハンドラー オブジェクトには、getとsetの 2 つのプロパティが含まれています。これらのプロパティはトラップとして知られています。
プロキシ オブジェクト トラップは、プロキシ オブジェクトに対して特定のアクションを実行するたびに呼び出される関数です。トラップを使用すると、プロキシ オブジェクトの動作をインターセプトしてカスタマイズできます。プロキシ オブジェクトからプロパティにアクセスするとgetトラップが呼び出され、プロキシ オブジェクトからプロパティを変更または操作するとsetトラップが呼び出されます。
最後に、コードはProxyコンストラクターを使用してプロキシ オブジェクトを作成します。originalObjectとhandlerをそれぞれターゲット オブジェクトとハンドラとして渡します。
プロキシ オブジェクトの使用
プロキシ オブジェクトには JavaScript でいくつかの用途があり、その一部を次に示します。
オブジェクトへの機能の追加
プロキシ オブジェクトを使用して既存のオブジェクトをラップし、元のオブジェクトを変更せずに、ログやエラー処理などの新しい機能を追加できます。
新しい機能を追加するには、Proxyコンストラクターを使用し、インターセプトするアクションに対して 1 つ以上のトラップを定義する必要があります。
例えば：
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.lastName); // Getting property "lastName"Martins
proxy.age = 23; // Setting property "age" to value "23"
このコード ブロックは、プロキシ トラップgetおよびsetを介して機能を追加します。これで、 userObjectのプロパティにアクセスまたは変更しようとすると、プロキシ オブジェクトは、プロパティにアクセスまたは変更する前に、まず操作をコンソールに記録します。
オブジェクトに設定する前のデータの検証
オブジェクトにデータを設定する前に、プロキシ オブジェクトを使用してデータを検証し、特定の条件を満たしていることを確認できます。これを行うには、ハンドラーオブジェクトのセットトラップで検証ロジックを定義します。
例えば：
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
};
const handler = {
get: function (target, property) {
console.log(`Getting property "${property}"`);
return target[property];
},
set: function (target, property, value) {
if (
property === "age" &&
typeof value == "number" &&
value > 0 &&
value < 120
) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
} else {
throw new Error("Invalid parameter. Please review and correct.");
}
},
};
const proxy = new Proxy(userObject, handler);
proxy.age = 21;
このコード ブロックは、設定されたトラップに検証ルールを追加します。userObjectインスタンスのageプロパティには任意の値を割り当てることができます。ただし、追加された検証規則を使用すると、年齢プロパティに新しい値を割り当てることができるのは、年齢プロパティが 0 より大きく、120 未満の数値である場合のみです。必要な基準を満たさない年齢プロパティに設定しようとする値エラーをトリガーし、エラーメッセージを出力します。
オブジェクト プロパティへのアクセスの制御
プロキシ オブジェクトを使用して、オブジェクトの特定のプロパティを非表示にすることができます。これを行うには、アクセスを制御するプロパティのgetトラップで制限ロジックを定義します。
例えば：
const userObject = {
firstName: "Kennedy",
lastName: "Martins",
age: 20,
phone: 1234567890,
email: "foo@bar.com",
};
const handler = {
get: function (target, property) {
if (property === "phone" || property === "email") {
throw new Error("Access to info denied");
} else {
console.log(`Getting property "${property}"`);
return target[property];
}
},
set: function (target, property, value) {
console.log(`Setting property "${property}"to value "${value}"`);
target[property] = value;
},
};
const proxy = new Proxy(userObject, handler);
console.log(proxy.firstName); // Getting property "firstName"Kennedy
console.log(proxy.email); // Throws error
上記のコード ブロックは、getトラップに特定の制限を追加します。最初は、 userObjectで使用可能なすべてのプロパティにアクセスできます。追加されたルールにより、ユーザーの電子メールや電話などの機密情報へのアクセスが防止されます。これらのプロパティのいずれかにアクセスしようとすると、エラーが発生します。
その他のプロキシ トラップ
getトラップとsetトラップが最も一般的で便利ですが、他にも 11 個の JavaScript プロキシ トラップがあります。彼らです：
- apply :プロキシ オブジェクトで関数を呼び出すと、 applyトラップが実行されます。
- construct : new 演算子を使用してプロキシ オブジェクトからオブジェクトを作成すると、コンストラクトトラップが実行されます。
- deleteProperty : deletePropertyトラップは、削除演算子を使用してプロキシ オブジェクトからプロパティを削除するときに実行されます。
- has – hasトラップは、in演算子を使用してプロキシ オブジェクトにプロパティが存在するかどうかを確認するときに実行されます。
- ownKeys –プロキシ オブジェクトでObject.getOwnPropertyNamesまたはObject.getOwnPropertySymbols関数を呼び出すと、 ownKeysトラップが実行されます。
- getOwnPropertyDescriptor –プロキシ オブジェクトでObject.getOwnPropertyDescriptor関数を呼び出すと、 getOwnPropertyDescriptorトラップが実行されます。
- defineProperty –プロキシ オブジェクトでObject.defineProperty関数を呼び出すと、 definePropertyトラップが実行されます。
- preventExtensions –プロキシ オブジェクトでObject.preventExtensions関数を呼び出すと、 preventExtensionsトラップが実行されます。
- isExtensible –プロキシ オブジェクトでObject.isExtensible関数を呼び出すと、 isExtensibleトラップが実行されます。
- getPrototypeOf –プロキシ オブジェクトでObject.getPrototypeOf関数を呼び出すと、 getPrototypeOfトラップが実行されます。
- setPrototypeOf –プロキシ オブジェクトでObject.setPrototypeOf関数を呼び出すと、 setPrototypeOfトラップが実行されます。
setおよびgetトラップと同様に、これらのトラップを使用して、元のオブジェクトを変更することなく、機能、検証、および制御の新しいレイヤーをオブジェクトに追加できます。
プロキシ オブジェクトの短所
プロキシ オブジェクトは、カスタム機能や検証をオブジェクトに追加するための強力なツールとなります。しかし、それらにはいくつかの潜在的な欠点もあります。そのような欠点の 1 つは、バックグラウンドで何が起こっているかを確認するのが難しいため、デバッグが難しいことです。
プロキシ オブジェクトは、使い慣れていない場合は特に、使いにくい場合があります。コードでプロキシ オブジェクトを使用する前に、これらの欠点を慎重に検討する必要があります。
コメントを残す