关于javascript:JavaScript-之-Proxy

Proxy 能够了解成，在指标对象之前架设一层“拦挡”，外界对该对象的拜访，都必须先通过这层拦挡，因而提供了一种机制，能够对外界的拜访进行过滤和改写。Proxy 这个词的原意是代理，用在这里示意由它来“代理”某些操作，能够译为“代理器”。

var proxy = new Proxy(target, handler);

Proxy 对象的所有用法，都是下面这种模式，不同的只是 handler 参数的写法。其中：

new Proxy() 示意生成一个 Proxy 实例
target 参数示意所要拦挡的指标对象
handler 参数也是一个对象，用来定制拦挡行为

如果 handler 没有设置任何拦挡，那就等同于间接通向原对象。

let target = {};
let handler = {};
let proxy = new Proxy(target,handler);
proxy.name = '编程三昧'; 
console.log(target.name); // '编程三昧'

还有一个技巧是将 Proxy 对象，设置到 object.proxy 属性, 从而在 object 对象上调用：

let proxy = new Proxy({}, {get: function(target, property) {return 35;}
});

let obj = Object.create(proxy);
obj.time // 35

get() 办法用于拦挡某个属性的读取操作，能够承受三个参数，顺次为:

指标对象
属性名
proxy 实例自身（严格地说，是操作行为所针对的对象），可选。

get() 办法的用法，上文曾经有一个例子，上面是另一个拦挡读取操作的例子:

let  perosn = {
    name:'james',
    age:26,
    profession:'software'
}

var proxy = new Proxy(perosn,{get:function(target,property) {if (property in target) {return target[property];
        } else {throw new ReferenceError("propertype\""+property + "\" does no exit");
        }
    }
});

console.log(proxy.name,proxy.profession); // james software
console.log(proxy.sex); // Uncaught ReferenceError: propertype"sex" does no exit

set() 办法用来拦挡某个属性的赋值操作，能够承受四个参数，顺次为:

指标对象
属性名
属性值
Proxy 实例自身，可选。

假设 person 对象有一个 age 属性，该属性应该是一个不大于 200 的整数，那么能够应用 Proxy 保障 age 的属性值符合要求。

let perosn = {
    name:'james',
    age:26,
    profession:'software'
}

let proxy = new Proxy(perosn,{get:function(target,property) {if (property in target) {return target[property];
        } else {throw new ReferenceError("propertype\""+property + "\" does no exit");
        }
    },
    set:function(target,key,value) {if(key === 'age') {if(value>80) {throw ReferenceError("invail");
            } else {return target[key] = value;
            }
        } else {return target[key];
        }
    }
});
proxy.age = 60;
console.log(proxy.name,proxy.profession,proxy.age); // james software 60

proxy.age = 99; // Uncaught ReferenceError: invail

apply() 办法拦挡:

函数的调用
call 操作
apply 操作

apply() 办法能够承受三个参数，别离是：

指标对象
指标对象的上下文对象（this）
指标对象的参数数组。

let twice = {apply(target, ctx, agrs) {return Reflect.apply(...arguments) * 2;
    }
};
function sum (a, b) {return a + b;}
let proxy5 = new Proxy(sum, twice);

console.log(proxy5(1, 3));  // 8
console.log(proxy5.apply(null, [1, 3])); // 8

另外，间接调用 Reflect.apply 办法，也会被拦挡。

Reflect.apply(proxy5, null, [9, 10]) // 38

has() 办法用来拦挡 HasProperty 操作，即判断对象是否具备某个属性时，这个办法会失效。典型的操作就是 in 运算符。

has() 办法能够承受两个参数，别离是指标对象、需查问的属性名。

上面的例子应用 has 办法暗藏某些属性，不被 in 运算符发现。

let stu1 = {name: '张三', score: 59};
let stu2 = {name: '李四', score: 99};

let handler = {has(target, prop) {if (prop === 'score' && target[prop] < 60) {console.log(`${target.name} 不及格 `);
      return false;
    }
    return prop in target;
  }
}

let oproxy1 = new Proxy(stu1, handler);
let oproxy2 = new Proxy(stu2, handler);

'score' in oproxy1
// 张三 不及格
// false

'score' in oproxy2
// true

for (let a in oproxy1) {console.log(oproxy1[a]);
}
// 张三
// 59

for (let b in oproxy2) {console.log(oproxy2[b]);
}
// 李四
// 99

下面代码中，has 拦挡只对 in 运算符失效，对 for...in 循环不失效，导致不符合要求的属性没有被 for…in 循环所排除。

Proxy 反对的拦挡操作根本有 13 种。

拦挡对象属性的读取，比方：

proxy.foo
proxy['foo']。

拦挡对象属性的设置，比方 proxy.foo = v 或 proxy['foo'] = v，返回一个布尔值。

拦挡 propKey in proxy 的操作，返回一个布尔值。

拦挡 delete proxy[propKey] 的操作，返回一个布尔值。

拦挡：

Object.getOwnPropertyNames(proxy)
Object.getOwnPropertySymbols(proxy)
Object.keys(proxy)
for...in 循环

以上拦挡都返回一个数组。

该办法返回指标对象所有本身的属性的属性名，而 Object.keys() 的返回后果仅包含指标对象本身的可遍历属性。

拦挡 Object.getOwnPropertyDescriptor(proxy, propKey)，返回属性的形容对象。

拦挡：

Object.defineProperty(proxy, propKey, propDesc）
Object.defineProperties(proxy, propDescs)

返回一个布尔值。

拦挡 Object.preventExtensions(proxy)，返回一个布尔值。

拦挡 Object.getPrototypeOf(proxy)，返回一个对象。

拦挡 Object.isExtensible(proxy)，返回一个布尔值。

setPrototypeOf(target, proto)

拦挡 Object.setPrototypeOf(proxy, proto)，返回一个布尔值。

如果指标对象是函数，那么还有两种额定操作能够拦挡。

apply(target, object, args)

拦挡 Proxy 实例作为函数调用的操作，比方：

proxy(...args)
proxy.call(object, ...args)
proxy.apply(...)。

拦挡 Proxy 实例作为结构函数调用的操作，比方：new proxy(...args)。

~ 本文完，感激浏览！

学习乏味的常识，结识乏味的敌人，塑造乏味的灵魂！

大家好，我是〖编程三昧〗的作者 隐逸王 ，我的公众号是『编程三昧』，欢送关注，心愿大家多多指教！

关于javascript:JavaScript-之-Proxy

前言

语法

get()

set()

apply()

has()

Proxy 反对的拦挡操作一览

get(target, propKey, receiver)

set(target, propKey, value, receiver)

has(target, propKey)

deleteProperty(target, propKey)

ownKeys(target)

getOwnPropertyDescriptor(target, propKey)

defineProperty(target, propKey, propDesc)

preventExtensions(target)

getPrototypeOf(target)

isExtensible(target)

construct(target, args)