Today is the first day of the National Day holiday. I wish you a happy National Day. Today, let's take a look at the use examples of JavaScript Proxy, mainly the interception operations of get(), set() and apply(), which are used to intercept the acquisition and assignment of object properties and the call of functions.

Proxy usage example

get() intercept

When the target object is accessed through proxy, the get() function is triggered.

In the previous example, when printing the properties of the proxyUser object, an additional message will be printed.

So we can develop our own custom logic in the get() function.

For example, use get() to implement a function of calculating properties. This is similar to the calculated properties in Vue.

const user = {
    firstName: 'Xiaoshuai',
    lastName: 'Programming Notes'
}

const handler = {
    get(target, property) {
        return property === 'fullName' ?
            `${target.firstName} ${target.lastName}` :
            target[property];
    }
};

const proxyUser = new Proxy(user, handler);

console.log(proxyUser.fullName);
// Output: Xiaoshuai Programming Notes

The above user object does not have the fullName attribute. In the get() function, we return a result of combining the firstName attribute and lastName attribute through user-defined judgment.

set() intercept

When we want to assign a value to the proxy object property, the set() function will be triggered.

If we have a requirement to ensure that the type of the age attribute must be a number and be greater than or equal to 18 years old, we can use the set() function to define the logic.

const user = {
    firstName: 'Xiaoshuai',
    lastName: 'Programming Notes',
    age: 20
}

const handler = {
    set(target, property, value) {
        if (property === 'age') {
            if (typeof value !== 'number') {
                throw new Error('Please enter the correct age');
            }
            if (value < 18) {
                throw new Error('You must be 18 years old')
            }
        }
        target[property] = value;
    }
};

const proxyUser = new Proxy(user, handler);

Then, try to set a value of the wrong type

proxyUser.age = 'foo';
// Output: Uncaught Error: Please enter the correct age

Then try to set a value less than 18

proxyUser.age = 16;
// Output: Uncaught Error: you must be 18 years old

Finally, set the correct value

proxyUser.age = 23;
// Output: 23
console.log(proxyUser);
// Output: Proxy {firstName: 'Xiaoshuai', lastName: 'Programming Notes', age: 23}
console.log(user);
// {firstName: 'Xiaoshuai', lastName: 'Programming Notes', age: 23}

apply() intercept

apply() is the interceptor function used to call the function and do some other custom logic.

const user = {
    firstName: 'hello',
    lastName: 'world'
}

const getFullName = function (user) {
    return `${user.firstName} ${user.lastName}`;
}

const getFullNameProxy = new Proxy(getFullName, {
    apply(target, thisArg, args) {
      	// Target is the getFullName target function
      	console.log(target);
      	// args is the parameter user passed in when actually calling the function
      	console.log(args);
        return target(...args).toUpperCase();
    }
});

console.log(getFullNameProxy(user));
// Output: HELLO WORLD

I created a function proxy getFullNameProxy to convert the value to uppercase for return when calling the function.

last

proxy can intercept many other operations. The above three types, get(), set(), and apply(), are commonly used.

There are others that are relatively unpopular and rarely used

• construct – when intercepting new calls
• GetPrototypeOf – intercepting agent [[GetPrototypeOf]]
• setPrototypeOf – intercept proxy Object.setPrototypeOf
• isExtensible – intercept proxy Object.isExtensible
• preventExtensions – block proxy Object.preventExtensions
• getOwnPropertyDescriptor – intercept proxy Object.getOwnPropertyDescriptor

Here today, happy National Day.

Welcome to my official account, Xiao Shuai's programming notes, and follow me every day.