JavaScript でのプロキシの探索: 実用的な例による高度な機能

JavaScript は多くの興味深い機能を提供しますが、最も強力であまり一般的ではない機能の 1 つは Proxy オブジェクトです。このツールを使用すると、プロパティへのアクセスや変更など、他のオブジェクトに対する操作をインターセプトできるオブジェクトを作成できます。この投稿では、プロキシの仕組み、その使用法、ゲッターやセッターなどの他の同様の機能との違いについて説明します。

---

プロキシとは何ですか?

プロキシは、別のオブジェクト (「ターゲット」と呼ばれる) の仲介として機能します。 「ハンドラー」を通じて、さまざまな操作に対してプロキシがどのように動作するかを定義できます。これにより、基礎となるオブジェクトとの対話方法をカスタマイズできます。

---

基本的な構文

const target = {}; // The original object
const handler = { /* definitions of operations */ };
const proxy = new Proxy(target, handler);

---

使用法 1: プロパティ アクセスの傍受

ユーザーを表すオブジェクトがあり、そのプロパティにアクセスするときにカスタム動作を提供したいとします。

const user = {
    name: 'Gabriel',
    age: 30
};

const handler = {
    get: function(target, prop) {
        if (prop in target) {
            return target[prop];
        } else {
            return 'Property not found';
        }
    }
};

const userProxy = new Proxy(user, handler);

console.log(userProxy.name); // Gabriel
console.log(userProxy.age); // 30
console.log(userProxy.email); // Property not found

同様の動作を実現するには、ゲッターの使用を検討してください。

const userWithGetters = {
    name: 'Gabriel',
    age: 30,
    getProperty(prop) {
        return this[prop] || 'Property not found';
    }
};

console.log(userWithGetters.getProperty('name')); // Gabriel
console.log(userWithGetters.getProperty('email')); // Property not found

プロキシを使用すると、プロパティへのアクセスだけでなく、オブジェクトに対するあらゆる操作をインターセプトできるため、柔軟性が向上します。

---

使用法 2: プロパティの検証

ユーザーの年齢を設定するときに、有効な値のみが許可されるようにしたいと想像してください。ここでプロキシが威力を発揮します:

const person = {
    name: 'Ana'
};

const handler = {
    set: function(target, prop, value) {
        if (prop === 'age' && (value < 0 || value > 120)) {
            throw new Error('Age must be between 0 and 120');
        }
        target[prop] = value;
        return true;
    }
};

const personProxy = new Proxy(person, handler);

personProxy.name = 'María'; // Works fine
console.log(personProxy.name); // María

try {
    personProxy.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

セッターを使用して値を検証できます:

const personWithSetters = {
    _age: 0,
    name: 'Ana',
    set age(value) {
        if (value < 0 || value > 120) {
            throw new Error('Age must be between 0 and 120');
        }
        this._age = value;
    },
    get age() {
        return this._age;
    }
};

try {
    personWithSetters.age = -5; // Will throw an error
} catch (e) {
    console.log(e.message); // Age must be between 0 and 120
}

プロキシとの違いは、プロパティごとにゲッターとセッターを定義する必要がなく、より一般的に検証を任意のプロパティに適用できることです。

---

使用法 3: 変更の監視

オブジェクトに加えられた変更を追跡したいと想像してください。プロキシを使用すると、これを簡単に実現できます:

const data = {};

const handler = {
    set: function(target, prop, value) {
        console.log(`Changing ${prop} from ${target[prop]} to ${value}`);
        target[prop] = value;
        return true;
    }
};

const dataProxy = new Proxy(data, handler);

dataProxy.name = 'Pedro'; // Changing name from undefined to Pedro
dataProxy.age = 25; // Changing age from undefined to 25

監視可能なシステムでは、変更を通知する特定のパターンを定義する必要があります。プロキシを使用すると、操作を単にインターセプトします:

// Simulating a basic observable
class Observable {
    constructor(data) {
        this.data = data;
        this.listeners = [];
    }

    addListener(listener) {
        this.listeners.push(listener);
    }

    notify() {
        this.listeners.forEach(listener => listener(this.data));
    }
}

違いは、プロキシを使用すると、変更を傍受して応答するための、より直接的で冗長ではないアプローチが可能になることです。オブザーバブルを使用すると、通知を手動で管理する必要があります。

---

結論

JavaScript の Proxy オブジェクトは、オブジェクトに対する操作をインターセプトして再定義できる非常に強力なツールです。制限が厳しく、より多くのコードを必要とするゲッターやセッターとは異なり、プロキシはオブジェクトの検証、監視、操作に柔軟性とクリーンなアプローチを提供します。

JavaScript でオブジェクトを操作する能力を強化したい場合は、プロキシを検討することは間違いなく価値があります!

以上がJavaScript でのプロキシの探索: 実用的な例による高度な機能の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。