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

プロキシとは何ですか?

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

基本的な構(gòu)文

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

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

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

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

同様の動(dòng)作を?qū)g現(xiàn)するには、ゲッターの使用を検討してください。

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: プロパティの検証

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

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: 変更の監(jiān)視

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

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

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

// 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));
    }
}

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

結(jié)論

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

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

以上がJavaScript でのプロキシの探索: 実用的な例による高度な機(jī)能の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。