1. What is Proxy?The Proxy object is used to intercept and modify specified operations of the target object. // Syntax const p = new Proxy(target, handler)
2. How to use it?1. Simple example of using ProxyAccessing a non-existent property, set the default value to return instead of undefined // 1. Find a suitable handler and write code const handler = { get: function(obj, prop) { return prop in obj ? obj[prop] : 37; } }; // 2. Create a new Proxy object const p = new Proxy({}, handler); // 3. Execute operation pa = 1; pb = undefined; // 4. Check the results console.log(pa, pb); // 1, undefined console.log('c' in p, pc); // false, 37 2. The target object is modified correctlylet target = {}; let p = new Proxy(target, {}); pa = 37; // The operation is forwarded to the target console.log(target.a); // 37. The operation has been forwarded correctly 3. Use set handler for data validationlet validator = { set: function(obj, prop, value) { if (prop === 'age') { if (!Number.isInteger(value)) { throw new TypeError('The age is not an integer'); } if (value > 200) { throw new RangeError('The age seems invalid'); } } // The default behavior to store the value obj[prop] = value; // Indicates success return true; } }; let person = new Proxy({}, validator); person.age = 100; console.log(person.age); // 100 person.age = 'young'; // Throws an exception: Uncaught TypeError: The age is not an integer person.age = 300; // Throws an exception: Uncaught RangeError: The age seems invalid 4. Extended Constructorfunction extend(sup, base) { var descriptor = Object.getOwnPropertyDescriptor( base.prototype, "constructor" ); base.prototype = Object.create(sup.prototype); var handler = { construct: function(target, args) { var obj = Object.create(base.prototype); this.apply(target, obj, args); return obj; }, apply: function(target, that, args) { sup.apply(that, args); base.apply(that, args); } }; var proxy = new Proxy(base, handler); descriptor.value = proxy; Object.defineProperty(base.prototype, "constructor", descriptor); return proxy; } var Person = function (name) { this.name = name }; var Boy = extend(Person, function (name, age) { this.age = age; }); Boy.prototype.sex = "M"; var Peter = new Boy("Peter", 13); console.log(Peter.sex); // "M" console.log(Peter.name); // "Peter" console.log(Peter.age); // 13 SummarizeThis article ends here. I hope it can be helpful to you. I also hope you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: Font references and transition effects outside the system
>>: Introduction to encryption of grub boot program in Linux
In HTML, the Chinese phrase “學好好學” can be express...
After being tortured by the front-end cross-domai...
As a front-end developer, I can’t avoid IE’s pitf...
Async Hooks is a new feature of Node8. It provide...
Many people may ask, does the text on the website...
1. What is a calculated attribute? In plain words...
Preface JavaScript is one of the widely used lang...
Table of contents cluster Cluster Details Events ...
1. Overview 1.1 Basic concepts: Docker is an open...
This article example shares the specific code of ...
In an unordered list ul>li, the symbol of an u...
Tomcat is widely known as a web container. It has...
Use stored procedures to start transactions when ...
What? What star coat? Well, let’s look at the pic...
Keepalived installation: cd <keepalived_source...