はじめに
Udemyの【JS】ガチで学びたい人のためのJavaScriptメカニズムの講座の振り返りです。
前回の記事
目的
- Proxyについての理解を深める
本題
1.Proxy
Proxyというのはプロパティーの操作に独自の処理を加えるオブジェクトのこと
例1
基本的な使い方(set)
main.js
// オブジェクトを変数に格納
const targetObj = { a: 0 };
const handler = {
// setというメソッドを登録する（トラップとも呼ばれる）
// 第一引数にはtargetObjが渡ってくる
// 第二引数にはプロパティにアクセスされた際のプロパティの名前が渡ってくる
// 第三引数にはsetの場合には新しい値が渡ってくる
// 第四引数はnew Proxyのオブジェクト（proxy）が渡ってくる
set: function (target, prop, value, receiver) {
// Proxy経由で値が呼ばれた際に、setのトラップが呼ばれているのか確認する
console.log(`[set]: ${prop}`);
// 下記を定義することで新しい値を設定できるようにする（a = 1と表示される）
target[prop] = value;
}
}
// new演算子でProxyを定義し変数に格納
// 第一引数に定義したオブジェクトを入れる
// 第二引数にはhandlerというtargetObjを操作した際に実行されるメソッドを格納したオブジェクトを入れる(上記)
const proxy = new Proxy(targetObj, handler)
// ここで出力結果が[set]:aとなるのでproxy経由で呼ばれていることがわかる
proxy.a = 1;
例2
基本的な使い方（get）
main.js
const targetObj = { a: 0 };
const handler = {
// getでは値の取得が行われた際の検知ができるようになる
// 値の取得なので新しい値は渡ってこない ＝ 第三引数は削除（value）
get: function (target, prop, receiver) {
console.log(`[get]: ${prop}`);
// returnで値を返す
return target[prop];
}
}
const proxy = new Proxy(targetObj, handler)
// [get]:aと出力される
proxy.a;
例3
基本的な使い方(delete)
main.js
const targetObj = { a: 0 };
const handler = {
get: function (target, prop, receiver) {
console.log(`[get]: ${prop}`);
return target[prop];
},
// 下記のdeleteでは値が削除された際の検知を行う
// deletePropertyの場合にはreceiverは渡ってこないので削除
deleteProperty: function (target, prop) {
console.log(`[delete]: ${prop}`);
// deleteとして値を削除
delete target[prop];
}
}
const proxy = new Proxy(targetObj, handler);
proxy.a;
// delete aと出力される
delete proxy.a;
// targetObjの中身をコンソールで確認してみるとオブジェクトの中身も削除されている
例4
実用的な例
const targetObj = { a: 0 };に対して値の変更を許可しない場合にはどのようにするべきか
main.js
const targetObj = { a: 0 };
const handler = {
set: function (target, prop, value, receiver) {
console.log(`[set]: ${prop}`);
// setのトラップが呼ばれた際にErrorが発生するようにする
throw new Error(`cannot add prop`)
// deleteでも削除不可にできる
}
}
const proxy = new Proxy(targetObj, handler);
// 以下でaの値を1に変更使用としてもエラーが発生し変更できない
proxy.a = 1;
例5
デフォルト値をgetで取得した際に渡したい場合
main.js
const targetObj = { a: 0 };
const handler = {
get: function (target, prop, receiver) {
// if文を使用する
// 最初の条件は自分自身のプロパティにpropの名前が見つかった場合
if(target.hasOwnProperty(prop)){
// returnで返す
return target[prop]
} else {
// 見つからなかった場合にはデフォルト値を返す
// 数値はなんでも可
return -1;
}
}
}
const proxy = new Proxy(targetObj, handler);
// elseの方に条件が分岐するので -1と出力される
console.log(proxy.b);
今日はここまで！