1. What exactly is the Proxy object?

What exactly is the Proxy object? Proxy means proxy. The function of the proxy object is to create a proxy object through Proxy, and then operate the proxy object to allow you to customize some behaviors of the specified object.

Proxy(target,handler); The Proxy constructor receives two objects. The first parameter is the object to be processed, and the second parameter is the collection of methods to be customized (that is, an object). .

Very abstract? In fact, it is very similar to Object.defineProperty in js (that is, the accessor property, which is used to implement the bottom layer of vue2.x).

Object.defineProperty defines accessor properties, which can control the reading and writing behavior of a certain property. It can also be done in Proxy, and Proxy is more flexible and powerful. It can do many things with accessor properties. Things that can’t be accomplished.

For example, listen for attribute deletion events (delete obj.prop;), in events ('id' in obj;), apply calls, etc.

Let’s first take a look at what the proxy object contains.

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????var?handler?=?{};
????
????//?此處，我們先不對(duì)targetObj的行為進(jìn)行干預(yù)，所以傳個(gè)空對(duì)象進(jìn)去即可。
????var?proxy?=?new?Proxy(targetObj,handler);
????
????console.log(proxy);

Look at what the printed proxy is, as shown below.

As you can see, the proxy object contains the Handler attribute, Target attribute and IsRevoked. Their values ??are the handler we passed in, targetObj and false respectively.

This isRevoked indicates whether it is revocable. Use the Proxy.revocable() method to generate a revocable proxy object. For details, you can go to MDN to view the documentation.

2. Operate the original object through the Proxy object

Above we created a proxy object, now we try to operate the original object by operating the proxy object, operating the proxy object is the same as operating the native object That’s it. (Actually, the proxy object is mapped internally.)

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????var?handler?=?{};
????
????//?此處，我們先不對(duì)targetObj的行為進(jìn)行干預(yù)，所以傳個(gè)空對(duì)象進(jìn)去即可。
????var?proxy?=?new?Proxy(targetObj,handler);
????
????
????/**
?????*?1、讀取及修改屬性，可以看到原來(lái)的對(duì)象的屬性也被修改了
?????*/
????console.log(proxy.age);??//?20
????console.log(targetObj.age);?//?20
????proxy.age?=?22;
????console.log(proxy.age);??//?22
????console.log(targetObj.age);?//?22
????
????/**
?????*?2、刪除proxy對(duì)象的屬性，影響原來(lái)的對(duì)象的屬性
?????*/
????console.log(proxy.school);??//?小學(xué)
????console.log(targetObj.school);?//?小學(xué)
????delete?proxy.age;
????console.log(proxy.school);??//?undefined
????console.log(targetObj.school);?//?undefined

3. Set method and get method

Okay, now we can start to interfere with the behavior of the original object. Specifically, we implement the following methods Achieve the purpose of intervening in the target's behavior.

• handler.apply

• handler.construct Intervene in the new behavior of the constructor

• ##handler. defineProperty Intervenes in the object’s data attribute or accessor attribute definition

• handler.deleteProperty Intervenes in the object’s property deletion behavior

• handler.get Intervenes in the object’s Attribute reading behavior

• handler.getOwnProperty Intervening the characteristic value of the object's attribute

##handler.has Intervening in the object's in behavior (prop in obj )
handler.isExtensible
handler.ownKeys

• ##handler.set Set the behavior

• ...

• First intervene in the get behavior (attribute reading behavior)

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????
????var?handler?=?{
????????//?定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性
????????get?:?function(target,prop){
????????????console.log(`${prop}屬性正在被查看`);
????????????console.log(targetObj?==?target);?//?true
????????????return?target[prop];
????????}
????};
????
????var?proxy?=?new?Proxy(targetObj,handler);
????
????console.log(proxy.id);
????
????/**
?????*?可以看到，打印順序?yàn)?
?????*??id屬性正在被查看
?????*??true
?????*??1
?????*/

Then change some properties to " "Private", such as not allowed to read the id attribute

define the set method, not allowed to modify the id, name, age attributes

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????
????var?handler?=?{
????????//?定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性
????????get?:?function(target,prop){
????????????if(prop?==?'id'){
????????????????return?undefined;
????????????}
????????????return?target[prop];
????????},
????????//?定義set方法，set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值
????????set?:?function(target,prop,value){
????????????if(prop?==?'id'?||?prop?==?'name'?||?prop?==?'age'){
????????????????console.log(`不允許修改${prop}屬性`)
????????????}else{
????????????????target[prop]?=?value;
????????????}
????????}
????};
????
????var?proxy?=?new?Proxy(targetObj,handler);
????
????/**
?????*?修改屬性，分別打印
?????*?不允許修改id屬性
?????*?不允許修改name屬性
?????*?不允許修改age屬性
?????*/
????proxy.id?=?2;?
????proxy.name?=?'pxh222';
????proxy.age?=?23;
????
????proxy.school?=?'中學(xué)';?//?這個(gè)無(wú)打印
????
????/**
?????*?讀取屬性，可以看到分別打印
?????*?undefined
?????*?pxh
?????*?20
?????*?中學(xué)??//?這個(gè)沒(méi)有攔截，因此可以修改
?????*/
????console.log(proxy.id);
????console.log(proxy.name);
????console.log(proxy.age);
????console.log(proxy.school);

4. Intervene in the deletion behavior (effective for delete obj.prop statement)

Similarly, we intervene in the behavior of deleting object attributes and do not allow deletion of id, name, and age attributes.

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????var?handler?=?{
????????//?在handler中定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性
????????get?:?function(target,prop){
????????????if(prop?==?'id'){
????????????????return?undefined;
????????????}
????????????return?target[prop];
????????},
????????//?set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值
????????set?:?function(target,prop,value){
????????????if(prop?==?'id'?||?prop?==?'name'?||?prop?==?'age'){
????????????????console.log(`不允許修改${prop}屬性`)
????????????}else{
????????????????target[prop]?=?value;
????????????}
????????},
????????/**
?????????*?這個(gè)方法要求返回個(gè)boolean值，表示是否刪除成功
?????????*?如果返回的值不是boolean值，則會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換成boolean值再返回
?????????*/
????????deleteProperty?:?function(target,prop){
????????????if(prop?==?'id'?||?prop?==?'name'?||?prop?==?'age'){
????????????????console.log(`不允許刪除${prop}屬性`);
????????????????return?false;
????????????}else{
????????????????delete?target[prop];
????????????????return?true;
????????????}
????????}
????};
????
????var?proxy?=?new?Proxy(targetObj,handler);
????/**
?????*?嘗試刪除id屬性，可以看到打印順序?yàn)?
?????*?不允許刪除id屬性
?????*?false
?????*/
????console.log(delete?proxy.id);
????
????/**
?????*?刪除school屬性，可以看到打印
?????*?true
?????*?undefined
?????*/
????console.log(delete?proxy.school);
????console.log(proxy.school);

5. Intervene in prop in obj behavior (determine whether the object has a certain attribute)

Above we are not allowed to obtain the id value of the object, nor can we modify or delete it. Now we put it Hide it.

????var?targetObj?=?{
????????id?:?1,
????????name?:?'pxh',
????????age?:?20,
????????school?:?'小學(xué)'
????}
????
????var?handler?=?{
????????//?在handler中定義get方法，get方法可以接收2個(gè)參數(shù)，分別是原來(lái)的對(duì)象及屬性
????????get?:?function(target,prop){
????????????if(prop?==?'id'){
????????????????return?undefined;
????????????}
????????????return?target[prop];
????????},
????????//?set方法比get多1個(gè)參數(shù)，那就是該屬性修改時(shí)的值
????????set?:?function(target,prop,value){
????????????if(prop?==?'id'?||?prop?==?'name'?||?prop?==?'age'){
????????????????console.log(`不允許修改${prop}屬性`)
????????????}else{
????????????????target[prop]?=?value;
????????????}
????????},
????????/**
?????????*?這個(gè)方法要求返回個(gè)boolean值，表示是否刪除成功
?????????*?如果返回的值不是boolean值，則會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換成boolean值再返回
?????????*/
????????deleteProperty?:?function(target,prop){
????????????if(prop?==?'id'?||?prop?==?'name'?||?prop?==?'age'){
????????????????console.log(`不允許刪除${prop}屬性`);
????????????????return?false;
????????????}else{
????????????????delete?target[prop];
????????????????return?true;
????????????}
????????},
????????/**
?????????*?通過(guò)has?方法來(lái)控制，返回值也是個(gè)boolean，表示對(duì)象是否擁有某個(gè)屬性
?????????*?如果返回的值不是boolean值，則會(huì)進(jìn)行類(lèi)型轉(zhuǎn)換成boolean值再返回
?????????*/
????????has?:?function(target,prop){
????????????if(prop?==?'id'){
????????????????return?false
????????????}else{
????????????????return?prop?in?target;
????????????}
????????}
????};
????
????var?proxy?=?new?Proxy(targetObj,handler);
????console.log('id'?in?proxy);?//?false
????console.log('name'?in?proxy);?//?true

6. Summary

Similarly, proxy can also intervene in many objects’ behaviors, so I won’t introduce them one by one here. If you are interested, please click on the MDN document

Recommended tutorial: "

WeChat Mini Program

"

The above is the detailed content of Understanding and learning about Proxy objects. For more information, please follow other related articles on the PHP Chinese website!